Boostrap3 Date Picker

Usage

You can try a sandbox here to expore more about bootstrap-datepicker.

General Usage

Generally everything is easy. After you refer source file (stylesheet and js) in code, create a <input type="input"> element. Then write following JavaScript code:

$("#your_container input").datepicker();

Now when you click input box, a calendar will appear.

Embeded Full Calander

You may want a full calender instead of a input box. First you make a <div> with id/className, The do same JavaScript code as above:

$("#your_div").datepicker();

Disable Special Dates

One of the function I use very often is to disable some dates (Or only make a few dates available). You need beforeShowDay option to do this:

var avialableDates= [1,18,20];
$("#date_picker").datepicker({
    beforeShowDay: function(date){
        if(date.getMonth() == (new Date()).getMonth())
        //This means date apply to any month, you can also set specific month if you need

        switch(true){
            case(availableDates.indexOf(date.getDate())==-1):
                //Do something to unavailable date
                return false;

                //You can also set opearation to available date
        }
    }
});

Do Something after User Choose Date

You may want to perform something after user click on a date. Use .change() and .on to detect user's selection and assign function to it:

$("#your_div").datepicker({
  //assign options, such as beforeShowDay
}).change(changeEvent)
  .on('changeDate',changeEvent);


function changeEvent(ev){
    var nowDate = new Date(ev.Date).getDate();
    //This is the date that user choose. You are free to use .getFullYear(), .getMonth(), etc

    //Do whatever you want to do
}

Problems and Solutions

P1: "cannot call method 'split' of undefined" error

S1: I find following steps to solve this problem:

• First, check if there is any repeat id/class name as the one that you are calling

• Second, try to add "format: 'dd.mm.yyyy'" in option list

• Third, check if your version is right: you can download a zip with both production version and full version here. Try to replace your javascript file with another version, and check if problem disappears.