bootstrap datepicker format

Question

PROBLEM SOLVED:

jsFiddle: http://jsfiddle.net/s4d0fxd2/1/

enter image description here

As the picture above show, I am trying to alert the dates selected from bootstrap datepicker, but I can't get it to show the format I want(format: YYYY-mm-dd)

HTML:

<div class="datepicker" id="datepicker1" ></div>

JS:

$('.datepicker').datepicker({ format: 'yyyy-mm-dd', multidate: true, multidateSeparator: ",", calendarWeeks: true, todayHighlight: true }).on('changeDate', function(e){ alert($('#datepicker1').datepicker('getDates')); });

Though I get the proper format when using <input> and show the calendar when input is focused instead of inline calendar, but that is not an option.

Docs for bootstrap-datepicker: http://bootstrap-datepicker.readthedocs.org/en/release/

jsFiddle: http://jsfiddle.net/s4d0fxd2/

Means you want datepicker to work properly with DIV than INPUT TYPE TEXT OK ? — Pratik Joshi, Sep 29 '14 at 12:57
Means you want datepicker to work properly with DIV than INPUT TYPE TEXT OK ? — Pratik Joshi, Sep 29 '14 at 13:06

score 2 · Accepted Answer · edited May 23 '17 at 11:56

As per documentation getDates supposed to return a list of localized date objects representing the internal date objects. There is no direct method which can give you directly formatted date in the way you want it. What you can do is, when an array of selected dates returned by getDates method, use some custom function to format it and display.

$(document).ready(function() {

    $('.datepicker').datepicker({
    format: 'yyyy-mm-dd',
    multidate: true,
    multidateSeparator: ",",
    calendarWeeks: true,
    todayHighlight: true

    }).on('changeDate', function(e){
    var selecteddates = $('.datepicker').datepicker('getDates');
        var formatedSelectedDates = [];
        for(var date in selecteddates)
        {
          formatedSelectedDates.push(convertDate(selecteddates[date]));
        }
        alert(formatedSelectedDates);
      });           
    });

And a formatter function as per your need:

 function convertDate(d) {
          function pad(s) { return (s < 10) ? '0' + s : s; }
          return [ d.getFullYear(),pad(d.getMonth()+1),pad(d.getDate())].join('-');
        }

Demo

Thank you for the help! :) Very pedagogically, I appreciate it! — Joel, Sep 29 '14 at 13:26

bootstrap datepicker format

1 Answers1