JQuery datePicker SelectMultiple format dd/mm/yy

Question

Got the datePicker working to select multiple dates. When the user selects multiple dates and closes the calendar the textbox displays the dates in the format:

Thur Jan 03 2013 00:00:00 GMT +0000
Fri Jan 03 2013 00:00:00 GMT +0000
Sat Jan 04 2013 00:00:00 GMT +0000,

My Code:

<script>

            $("#HolidayDate").addClass('date-pick');
            $('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();
            (
                    {
                        createButton: false,
                        displayClose: true,
                        closeOnSelect: false,
                        selectMultiple: true,                  
                    }
            )
            .bind(
                'click',
                function () {
                    $(this).dpDisplay();
                    this.blur();
                    return false;
                }
            )
            .bind(
                'dateSelected',
                function (e, selectedDate, $td, state) {
                    console.log('You ' + (state ? '' : 'un') // wrap
                        + 'selected ' + selectedDate);
                }
            )
            .bind(
                'dpClosed',
                function (e, selectedDates) {
                    console.log('You closed the date picker and the ' // wrap
                        + 'currently selected dates are:');
                    console.log(selectedDates);
                    $('#HolidayDate').val( selectedDates );
                }
            );

    </script>

However I would like the date to display as dd-mm-yy. If I use the commented out line

$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();

and run it as    $('.date-pick').datePicker({dateFormat: 'dd-mm-yy'}).val();

The textbox will return the date in the correct format but now it only allows me to select one date at a time.

Please advice?

Thanks

score 2 · Answer 1 · answered Dec 06 '12 at 11:58

2

try to select dateformat using .bind(Date.format = 'dd-mm-yyyy') and use selectMultiple: true

answered Dec 06 '12 at 11:58

Abhi

1,105
2
12
29

Thanks for the reply abhi...do you mean like this... .bind(Date.format = 'dd-mm-yyyy') 'click', function () { $(this).dpDisplay(); this.blur(); return false; } )....still no joy, any suggestios? – John Dec 06 '12 at 12:30

jonas · Accepted Answer · 2012-12-06T15:21:47.590

1

Its because you left ouy the options saying it is a selectmultiple.

try

$('.date-pick').datePicker
            (
                    {
                        createButton: false,
                        displayClose: true,
                        closeOnSelect: false,
                        selectMultiple: true,   
                        dateFormat: 'dd-mm-yy'               
                    }
            )

See that i added it to the previous options you had?

Edit

After reading kelvinlucks documentation on this, I see what's causing your problem. The date you get in return is a javascript Date object and not a string. You are free to format it as you wish, but in your overloaded methods dateSelected and dpClosed they are just printed without formatting.

Try this:

.bind(
    'dateSelected',
    function(e, selectedDate, $td, state)
    {
        var date = selectedDate.getDate() + "-" + (selectedDate.getMonth() + 1) + "-" +     selectedDate.getFullYear();
        console.log('You ' + (state ? '' : 'un') // wrap
            + 'selected ' + date);

    }
)

My formatting of dates isn't so good, but you get the point. Here's a post on formatting dates (http://stackoverflow.com/questions/1056728/formatting-a-date-in-javascript)

edited Dec 06 '12 at 15:21

answered Dec 06 '12 at 11:54

jonas

984
10
15

Thanks for the reply jonas....Sorry but I should have mentioned that I previously tried that also but no joy...cant understand why though....Any suggestions? Thaks – John Dec 06 '12 at 12:28
What version of datepicker (jquery ui) are you using? I can see no optino "selectMultiple" in the documentation http://api.jqueryui.com/datepicker/ – jonas Dec 06 '12 at 12:46
It doesn't seem that jquery ui supports selecting multiple dates. But why reinvent the wheel, a lot of people have already made a solution for this. For instance take a look at http://multidatespickr.sourceforge.net/ – jonas Dec 06 '12 at 12:50
Thanks for the reply. I am using a plug in for the datepicker I found on http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiple.html, it allows me to select multiple dates and return the list to the text box, however I am trying to change the format of the dates returned from Thur Jan 03 2013 00:00:00 GMT +0000 Fri Jan 03 2013 00:00:00 GMT +0000 Sat Jan 04 2013 00:00:00 GMT +0000, to dd/mm/yy, dd/mm/yy, dd/mm/yy – John Dec 06 '12 at 13:33
Did you see that I updated my comment? Did you understand it? – jonas Dec 07 '12 at 14:30
Yes jonas I understood the comment, everything is now working, thanks for all the help – John Dec 10 '12 at 11:05

JQuery datePicker SelectMultiple format dd/mm/yy

2 Answers2