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

Answer 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)