CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepickerjquery-multidatespicker
Jie Hart
Jie Hart

Reputation: 909

I am unable to get the date box to display - multiDatesPicker

I have spent a week trying to get a multiselect date picker to work. Of all the components I have tried multiDatesPicker fits the bill but I cannot get it to work. I even downloaded the same versions of the two included jquery .js files they use in the example. Please can someone help me I have to have this finished by the end of the month.

below is the downloaded example code 

<html>
<head>
<!-- includes jquery, jquery ui and multidatespicker scripts -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.multidatespicker.js"></script>

<script>
  $(function() {
    // initiate the multiDatesPicker.
    // Note that you can still use jQuery UI datepicker options (and events and methods too :)
    $('#calendar').multiDatesPicker({
      minDate: +1, // jQuery UI datepicker option
      addDates: ['26/09/2010', '01/12/2010'] // multidatepicker option
    });

    // shows selected dates in an alert message
    $('#show_dates').click(function(e) {
      e.preventDefault();
      var dates = $('#calendar').multiDatesPicker('getDates');
      var dates_in_string = '';
      for(d in dates) dates_in_string+= dates[d]+' ';
      alert(dates_in_string);
    });
  });
</script>
</head>
<body>
  <div id="calendar"></div>
  <button id="show_dates">Show selected dates!</button>
</body>
</html>

I have checked all three .js files load OK.

Upvotes: 2

Views: 6465

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

The error you are facing is because the addDates option is localization dependent:

Adds an array of dates specified in a string, milliseconds or javascript date object format.
NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it.

If you check the console there is the error raised from jQuery-UI script:

Uncaught Invalid date

If you not locate the datepicker it use US/ENG notation; so your date must be set as:

$('#calendar').multiDatesPicker({
    minDate: +1, // jQuery UI datepicker option
    addDates: ['09/26/2010', '12/01/2010'] // multidatepicker option
});

Working demo: jsFiddle

If you want to set a different date format use the dateFormat option:

$('#calendar').multiDatesPicker({
    minDate: +1, // jQuery UI datepicker option
    dateFormat: "dd/mm/yy",   
    addDates: ['26/09/2010', '01/12/2010'] // multidatepicker option
});

Working demo: jsFiddle

PS: if you can, please, update your jQuery version

Upvotes: 1

Related Questions