Bootstrap Datepicker Deployment and Usage Guide

Prerequisites

Before installing and using bootstrap-datepicker, ensure you have the following:

Bootstrap: This datepicker is designed to work with Twitter Bootstrap. You need to include Bootstrap CSS and JavaScript files in your project.
jQuery: Required as a dependency for bootstrap-datepicker to function.
Node.js and npm: Required for development and building from source. Download from nodejs.org.
Git: For cloning the repository.

Installation

Using CDN (Recommended for Production)

You can use the CloudFlare powered cdnjs.com to include bootstrap-datepicker in your project:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Using npm (Recommended for Development)

npm install bootstrap-datepicker

Manual Installation

Download the latest release from the GitHub releases page
Extract the files and include them in your project

Building from Source

Clone the repository:

git clone https://github.com/uxsolutions/bootstrap-datepicker.git
cd bootstrap-datepicker

Install development dependencies:

# Using yarn (recommended)
yarn global add grunt-cli
yarn install

# Using npm
npm install --global grunt-cli
npm install

Build the project:

grunt

The built files will be available in the dist/ directory.

Configuration

Basic Usage

Include the necessary CSS and JavaScript files in your HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="path/to/bootstrap-datepicker.min.css">
</head>
<body>
    <!-- Your HTML content -->
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- Datepicker JS -->
    <script src="path/to/bootstrap-datepicker.min.js"></script>
</body>
</html>

Initializing the Datepicker

$(document).ready(function() {
    $('#datepicker').datepicker();
});

Options and Customization

The datepicker supports numerous options for customization. Here are some common ones:

$('#datepicker').datepicker({
    format: 'mm/dd/yyyy', // Date format
    startDate: '-3d',      // Starting date
    endDate: '+3d',        // Ending date
    daysOfWeekDisabled: [0, 6], // Disable weekends
    autoclose: true,       // Auto-close after selection
    todayHighlight: true   // Highlight today's date
});

Localization

Bootstrap Datepicker includes built-in support for multiple languages. To use a specific locale:

// Include the locale file
<script src="path/to/locales/bootstrap-datepicker.fr.min.js"></script>

// Initialize with the locale
$('#datepicker').datepicker({
    language: 'fr'
});

Available locales include: en, fr, de, es, ru, zh-CN, zh-TW, ja, ko, ar, fa, he, th, tr, vi, pt-BR, pl, nl, it, hu, el, cs, sk, sv, da, no, fi, et, lv, lt, bg, ro, sr, uk, hy, ka, bn, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, ta, te, kn, or, pa, as, ne, si, km, my, lo, ml, mr, gu, `

How to Deploy & Use uxsolutions/bootstrap-datepicker