CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-datepicker
Joel
Joel

Reputation: 61

bootstrap datepicker format

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/

Upvotes: 0

Views: 5476

Answers (1)

SSA
SSA

Reputation: 5493

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

Upvotes: 2

Related Questions