Display multiple date in a input text

[GoogleCodeExporter]

I'd like to do multiple date selection and display it to an input text field.

For example : if i select 17 Nov 2010 and 18 Nov 2010, the input text will 
display 17 Nov 2010, 18 Nov 2010. But what i saw was, the input text only 
displayed the last-clicked date.

How do i solve this ?

Original issue reported on code.google.com by Siwan1...@gmail.com on 18 Nov 2010 at 10:14

[GoogleCodeExporter]

You will need to hook it up to the input field yourself and listen to the 
dpClosed event as in this example:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiple.ht
ml

You can then loop over the selectedDates array and add the string 
representation of all the dates to your input field...

Original comment by kelvin.l...@gmail.com on 18 Nov 2010 at 10:17

[GoogleCodeExporter]

Where can i find those selectedDates array and How can i do it ?
Sorry for disturbing you...

Original comment by Siwan1...@gmail.com on 18 Nov 2010 at 10:29

[GoogleCodeExporter]

Hi Kelvin,
I've successfully add the selectedDates array to my textarea.
And the result is : Thu Dec 02 2010 00:00:00 GMT+0700 (SE Asia Standard 
Time),Fri Dec 03 2010 00:00:00 GMT+0700 (SE Asia Standard Time)

I wonder if i can customize the result into : Dec 02 2010, Dec 03 2010 only
do you have any ideas ?

Thanks

Original comment by Siwan1...@gmail.com on 19 Nov 2010 at 1:37

[GoogleCodeExporter]

You need to convert the date objects into strings. The way you are doing it is 
calling their default toString method which as you can see gives a very long 
representation of the date.

Try something like:

var dateStrings = []
$.each(
  selectedDates,
  function(i, d)
  {
    dateStrings.push(d.asString('M dd yyyy');
  }
);
$('#input').val(dateStrings.join(','));

Original comment by kelvin.l...@gmail.com on 19 Nov 2010 at 8:20

[GoogleCodeExporter]

I want to define my own startdate (server side), but it still shows me my 
client side date, here is my code :

$(function()
{
    $('.date-pick')
        .dpSetStartDate('01/01/2000')
        .datePicker(
        {
            displayClose:true,
            closeOnSelect:false,
            selectMultiple:true,
            numSelectable:3,
            renderCallback:function($td, thisDate, month, year)
            {
                if (thisDate.isWeekend()) {
                    $td.addClass('weekend');
                    $td.addClass('disabled');
                }
            }
        })
        .bind(
            'click',
            function()
            {
                $(this).dpDisplay();
                this.blur();
                return false;
            }
        )
        .bind(
            'dpClosed',
            function(e, selectedDates)
            {
                var date1 = [];
                for (var i=0;i<selectedDates.length;i++) {
                    var tgl = selectedDates[i].getDate().toString();
                    if (tgl.length == 1) tgl = "0" + tgl;
                    var bln = (selectedDates[i].getMonth()+1).toString();
                    if (bln.length == 1) bln = "0" + bln;
                    var thn = selectedDates[i].getFullYear().toString();
                    date1[i] = tgl + "/" + bln + "/" + thn;
                }
                $('#text1').val(date1.join(" "));
            }
        );
});

Do i miss a thing ?

Original comment by Siwan1...@gmail.com on 13 Dec 2010 at 1:25

[GoogleCodeExporter]

You need to call dpSetStartDate after you have called datePicker otherwise it 
can't work.

However, in this case it is easier to pass the startDate parameter:

    $('.date-pick')
        .dpSetStartDate('01/01/2000')
        .datePicker(
        {
            displayClose:true,
            closeOnSelect:false,
            selectMultiple:true,
            numSelectable:3,
            startDate: '01/01/2000',
            renderCallback:function($td, thisDate, month, year)
            {
                if (thisDate.isWeekend()) {
                    $td.addClass('weekend');
                    $td.addClass('disabled');
                }
            }
        })
        ....

Original comment by kelvin.l...@gmail.com on 13 Dec 2010 at 8:40

[GoogleCodeExporter]

Sorry - copy paste error! Here is the correct code:

    $('.date-pick')
        .datePicker(
        {
            displayClose:true,
            closeOnSelect:false,
            selectMultiple:true,
            numSelectable:3,
            startDate: '01/01/2000',
            renderCallback:function($td, thisDate, month, year)
            {
                if (thisDate.isWeekend()) {
                    $td.addClass('weekend');
                    $td.addClass('disabled');
                }
            }
        })
        ....

Original comment by kelvin.l...@gmail.com on 13 Dec 2010 at 8:40

[GoogleCodeExporter]

Hi Kelvin,

Thanks for picking me up the solution, it works like charm :)

Original comment by Siwan1...@gmail.com on 14 Dec 2010 at 1:38

[GoogleCodeExporter]

Hi Kelvin,

Here comes another issue.
Can i define my own holiday date so that it couldn't be picked by user just 
like date that classified as weekend ?

I'm looking forward to your reply. Thanks.

Original comment by Siwan1...@gmail.com on 11 Jan 2011 at 10:38

[GoogleCodeExporter]

These two demos should help you out:

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCustomCellR
ender.html

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/renderCalendarBankHol
idays.html

Original comment by kelvin.l...@gmail.com on 11 Jan 2011 at 2:02

• Changed state: Done

[GoogleCodeExporter]

    $('.date-pick')
        .datePicker(
        {
            displayClose:true,
            closeOnSelect:false,
            selectMultiple:true,
            numSelectable:3,
            startDate: '01/01/2000',
            renderCallback:function($td, thisDate, month, year)
            {
                if (thisDate.isWeekend()) {
                    $td.addClass('weekend');
                    $td.addClass('disabled');
                }
                                if (thisDate == '2010/01/14') {
                    $td.addClass('disabled');
                }
                                if (thisDate == '2010/06/27') {
                    $td.addClass('disabled');
                }
            }
        })
        ....

I'm adding some holiday dates in order to make them unselectable, but i can't 
do it right.

Do you have any ideas ?

I can't figure it out where to put "var bankHolidays" and its "markBankHolidays 
function" into my code.

Original comment by Siwan1...@gmail.com on 12 Jan 2011 at 5:12

[GoogleCodeExporter]

In this line:

   if (thisDate == '2010/01/14') {

You are comparing a Date object to a string. They will never equal. Try instead:

   if (thisDate.asString() == '2010/01/14') {

(presuming that you set Date.format to 'yyyy/mm/dd')

Original comment by kelvin.l...@gmail.com on 12 Jan 2011 at 9:03

[GoogleCodeExporter]

Dear Kelvin,

What a marvelous solution, it goes smoothly !!
Sorry for disturbing you all the time...

Original comment by Siwan1...@gmail.com on 13 Jan 2011 at 1:27

[GoogleCodeExporter]

Hello,
i have seen this example of multiple selection in datepicker
 $('#multimonth')
        .datePicker(
            {
                createButton: false,
                inline: true,
                closeOnSelect: false,
                selectMultiple: true,
                numSelectable: 3
            }
        )
it works fine. what i need is to change numSelectable parameter as value in my 
textbox changes. How can i do it. 
Thanks
Adeel 

Original comment by zahidmad...@gmail.com on 4 Mar 2011 at 5:03

[GoogleCodeExporter]

@Comment 14 - someone answered your question on Stack Overflow:
http://stackoverflow.com/questions/5189805/kelvinluck-jquery-datepicker-multiple
-select

Original comment by kelvin.l...@gmail.com on 4 Mar 2011 at 10:16