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

Question

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.

Irvin Dominin · Accepted Answer · 2013-07-22T10:18:08.973

1

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:

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:

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

edited Jul 22 '13 at 10:18

answered Jul 22 '13 at 10:10

Irvin Dominin

30,819
9
77
111

Thank you very much, I appreciate the time you have spent in answering my question. I do have the latest version of jquery but downloaded the older version in case the problem was caused by an incompatibility problem. – Jie Hart Jul 22 '13 at 21:09
You need not to download that. Simple add `` this in the scripts. – Harry Suren Dec 22 '14 at 10:31
@Irvin Dominin sorry stupid comment in here, please see this link http://jsfiddle.net/dauruk0512/dnqowp3o/1/ i just make in external resources but it doesn't working ? but after i make in html with it working fine ``my question is why ? please don't vote down cause i'm new at this forum, thanks – Freddy Sidauruk Feb 12 '16 at 11:20

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

1 Answers1