Multi Dates Picker Bug?

Question

I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.

The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.

If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.

Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.

Has anyone used this and had the same problem and solved it?

Does anyone know how to fix it?

OR

Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.

Answer 1

The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.

The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.

HTML

<input type="text" id="date">

<button type="button" id="addDate">Add dates</button>

<button type="button" id="removeDate">Remove dates</button>

<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">

JAVASCRIPT

And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)

var dates = $('#altField').val().split(',');


   $('#datepicker').multiDatesPicker({
   dateFormat: "yy-mm-dd",
   addDates: dates,
   altField: '#altField'
   });

    $('#addDate, #removeDate').on('click', function() {
        try {
            var $date = $('#date');
            var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates'; 

            $('#datepicker').multiDatesPicker(addOrRem, $date.val());
            $date.val('');
        } catch (e) {
            var $error = $('#error');
            $error.html(e).slideDown();
            setTimeout(function() {
                $error.slideUp();
            }, 2000);

        }
    });

jsFiddle

Answer 2

I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing. I also do not understand the difference between the preselected dates and the altfield.

I think you can do what you want with a combination of preselect and the altfield:

html

   <div id="with-altField"></div>
    <input type="text" id="altField" value="08/22/2013,08/21/2013">
   </div>

javascript

//first read the values of the #altfield
var dates = $('#altField').val().split(',');

//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
    dateFormat: "mm/dd/yy",
    addDates: dates,
    altField: '#altField'
});

nb load the javascript on document ready