Search jQuery

jQuery Forum

jQuery Datepicker - pick multiple dates

in Using jQuery UI • 2 years ago

Hi ,

is it possible to pick more dates with datepicker in one instance?

I would like to select round about 5-10 dates in the datepicker.

I've found a solution with a different picker plugin: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMultiple.html

But could this be achieved with ui datepicker?

Regards,
Axlf

Replies(14)

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

The jQuery UI datepicker only allows the selection of a single date. You could use my datepicker instead, which is similar and does allow the selection of multiple dates.

cronet

Re: jQuery Datepicker - pick multiple dates

2 years ago

Thank you for your reply!

I bookmarked your datepicker. It looks really great. I wanted to avoid loading another datepicker - but yours seems to be very powerful - perhaps I switch completly away from ui datepicker...

Too bad that I just integrated ui datepicker in my website last week :)

One question: I would like to use my own theme rolled style. Is this possible without too much effort? Or do i need to create a seperate style sheet for the datepicker?

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

Yes you can use your ThemeRoller style. Just follow the example on the Layout/Styles tab. You'll probably need to create a small CSS override file along the lines of the ui-xxxx.datepick.css files to set your own colours.

cronet

Re: jQuery Datepicker - pick multiple dates

2 years ago

Hey,

i got a question regarding your awesome datepicker!

Is it possible to change the classes of some rendered elements?

e.g. I use a themeroller style with the extension js. But I would like to change the classes of the div holding the 'back, today next' links.

Would this be possible? I searched the docs but overseeing the right direction :(

regards

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

It's possible. You need to customise the $.datepick.themeRollerRenderer.

var myRenderer = $.extend({}, $.datepick.themeRollerRenderer,
{picker: '<div{popup:start} id="ui-datepicker-div"{popup:end} class="ui-datepicker ui-widget ' +
'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
'<div class="myHeader ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">' +
'{link:prev}{link:today}{link:next}</div>{months}' +
'{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
'ui-corner-all">{button:clear}{button:close}</div>{popup:end}' +
'<div class="ui-helper-clearfix"></div></div>'});
$('#datepicker').datepick({renderer: myRenderer});

xtypedesi..

Re: jQuery Datepicker - pick multiple dates

2 years ago

Hello Keith,
I just found your date picker, and I love it.

I too am trying to select multiple dates, which is working great.
However, Is there a way to access the datepicker with a text box?

For example: Every Friday (within the mindate and maxdate)

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

You would need to calculate the dates yourself and could then assign them to the datepicker with the setDate command:

var dates = [new Date(...), new Date(), ...];
$('#datepicker').datepick('setDate', dates);

Have a look at Date.js for converting text descriptions to dates.

xtypedesi..

Re: jQuery Datepicker - pick multiple dates

2 years ago

Thanks, I have been killing myself with this. I can't seem to even get the example to work.

$('#setDates').click(function() {
var dates = $('#getSetValue').value().split(',');
$('#' + $('#choose_dates').val()).datepick('setDate', dates);
});

<input type="text" value="09-01-2010,09-12-2010,09-15-2010,09-21-2010,09-29-2010" id="getSetValue" />
<button type="button" id="setDates">Set</button>

<div id="choose_dates"></div>

I will give Date.js a look, but it seems as though I have already made myself crazy.

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

You need to initialise the datepicker before you can use any commands on it. Also, the dates in string form need to match the current dateFormat:

$('#choose_dates').datepick({dateFormat: 'mm-dd-yyyy', multiSelect: 5});
$('#setDates').click(function() {
var dates = $('#getSetValue').val().split(',');
$('#choose_dates').datepick('setDate', dates);
});

xtypedesi..

Re: jQuery Datepicker - pick multiple dates

2 years ago

Thanks again. I am back on this task, but now I am pulling from a database instead.

And still having some trouble.

$(function() {
	$('#choose_dates').datepick({ 
          multiSelect: 999, 
		  monthsToShow: 3,
		  dateFormat: 'yyyy-mm-dd',
	      minDate: "2010-09-17", // The minimum selectable date 
          maxDate: "2010-10-03",// The maximum selectable date 
          onSelect: function(dates) { ar value = ''; 
	});
});
var dates = [new Date('2010-09-17'),new Date('2010-09-18'),

new Date('2010-09-19'),new Date('2010-09-23'),new Date('2010-09-24'),

new Date('2010-09-25'),new Date('2010-09-26'),new Date('2010-09-30'),

new Date('2010-10-01'),new Date('2010-10-02'),new Date('2010-10-03')];
$('#choose_dates').datepick('setDate', dates);

I am assuming that my syntax is bad for new Date, but I have tried several options.
No '' or ' Results in a firebug error:

Warning: 09 is not a legal ECMA-262 octal constant
Source File: /frm_edit_dates.php?show_id=1
Line: 13, Column: 174
Source Code:
var dates = [new Date(2010-09-17),new Date(2010-09-18),new Date(2010-09-19),new Date(2010-09-23),new Date(2010-09-24),new Date(2010-09-25),new Date(2010-09-26),new Date(2010-09-30),new Date(2010-10-01),new Date(2010-10-02),new Date(2010-10-03)];

I also tried to use:

var seldates = [new Date(2010,9-1,17),new Date(2010,9-1,18),new Date(2010,9-1,19),

new Date(2010,9-1,23),new Date(2010,9-1,24),new Date(2010,9-1,25),

new Date(2010,9-1,26),new Date(2010,9-1,3),new Date(2010,1-1,1),new Date(2010,1-1,2),

```
new Date(2010,1-1,3)];
```

kbwood.au

Re: jQuery Datepicker - pick multiple dates

2 years ago

The setDate command needs to be run within the document.ready callback too. Your last version of creating Date objects is correct.

$(function() {
var dates = [new Date(2010,09-1,17),new Date(2010,09-1,18),
new Date(2010,09-1,19),new Date(2010,09-1,23),new Date(2010,09-1,24),
new Date(2010,09-1,25),new Date(2010,09-1,26),new Date(2010,09-1,30),
new Date(2010,10-1,01),new Date(2010,10-1,02),new Date(2010,10-1,03)];
$('#choose_dates').datepick({
multiSelect: 999,
monthsToShow: 3,
dateFormat: 'yyyy-mm-dd',
minDate: '2010-09-17', // The minimum selectable date
maxDate: '2010-10-03', // The maximum selectable date
onSelect: function(dates) { alert(dates); }}).
datepick('setDate', dates);
});

xtypedesi..

Re: jQuery Datepicker - pick multiple dates

2 years ago

I think I love you.

Thanks for coming to my rescue!

samshi

Re: jQuery Datepicker - pick multiple dates

1 year ago

I want a datepicker just like google analytics has, multiple select .Does this tool support that?

abctimtan

jQuery Datepicker - 2 dates in 1 textbox

6 months ago

Dear kbwood.au,

I have read your my datepicker and it is very informative. It is very useful for me. However I am a stranger to Jquery and it is very hard for me to plugin my html file.

Refer to http://keith-wood.name/calendarsPicker.html, ie my datepicker, tab multiple, there is a "two separate dates" input text box. When you click the input box, a calendar appears. You can click the date on the calendar twice and result is e.g. 09/11/2012, 10/11/2012.

Is it possible to have a simple html file with 1 html textbox ? That is similar to http://jqueryui.com/datepicker/, you can view source to see a simple html file after you select one of the examples.

jack.tyle..

Re: jQuery Datepicker - pick multiple dates

3 months ago

Hi Keith,

Is there any function to disable the specific dates?

example.. The user can't select that dates if there are somebody who already reserved that dates.

Thanks.

Top Reply

Response title

Attachments

jQuery Forum

jQuery Datepicker - pick multiple dates

Replies(14)

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

Re: jQuery Datepicker - pick multiple dates

jQuery Datepicker - 2 dates in 1 textbox

Dear kbwood.au,

I have read your my datepicker and it is very informative. It is very useful for me. However I am a stranger to Jquery and it is very hard for me to plugin my html file.

Refer to http://keith-wood.name/calendarsPicker.html, ie my datepicker, tab multiple, there is a "two separate dates" input text box. When you click the input box, a calendar appears. You can click the date on the calendar twice and result is e.g. 09/11/2012, 10/11/2012.

Is it possible to have a simple html file with 1 html textbox ? That is similar to http://jqueryui.com/datepicker/, you can view source to see a simple html file after you select one of the examples.

Re: jQuery Datepicker - pick multiple dates

Statistics

Tags

Actions

Related Posts