IMPORTANT NOTE: I'm not having much time in these days to finish documenting, but I've released a demo for you: http://multidatespickr.sourceforge.net/
All the documentation will be moved, little by little, to the sourceforge page.
Please consider that I've already done important bug fixes but had no chance to upload anything to sourceforge as my job's IP is banned :s
I'll upload the new version this weekend, so check it out :)
I love jQuery UI because it allows me to quickly create administration interfaces without the hassle of writing code for animations and common widgets.
By the way there are times when I find myself in need for a feature that jQuery UI's widgets don't cover, like -for example- the ability to pick multiple dates using the jQuery UI DatePicker calendar widget.
This time I really needed this functionality and thought that it would be easier to learn how to write a jQuery plug-in to extend DatePicker, instead of adopting another javascript tool.
The result is this multiDatesPicker I made. I spent one day to do it, trying to understand how to develop the plugin using best practices and trying to make it work.
It seems stable now, makes just what I needed it to, and mantains all the datepicker events, methods and options, exception made for the "beforeShowDay" event that had to be sacrified in the name of multiple selections (I still hope I can find a way to make it available, but I have to investigate more).
To download it just click here: jquery.ui.multidatespicker.js
How to use it?
Being an extension to jQuery UI DatePicker you need to include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker.
To apply it to an element, do it the same way as you would do with jQuery UI datepicker, but write multiDatesPicker instead of datepicker:
$(element-or-selector).multiDatesPicker(options-to-initialize-datepicker-and-multidatepicker);
MultiDatesPicker specific options:
- addDates
Adds an array of dates specified in a string or javascript date object format.
NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it.
Available methods:
- compareDates( date1, date2 )
Compares two dates returning 1, 0 or -1 if date2 is greater, equal or smaller than date1 respectively. - gotDate( date )
Returns the index of the date in the dates array, or false in case that date is not found. - addDates( dates )
Adds one or more dates to the calendar.
The parameter dates can be a string or an array (of strings or javascript date objects). - removeDates( indexes )
Removes one or more dates from the dates array using their indexes.
The parameter indexes can be an integer or an array of integers. - toggleDate( date )
Adds/removes a single date from the calendar. - getDates( format )
Retrives the array of dates associated with the multiDatesPicker in the specified format: "string" (default) for localized string format, or "object" for javascript date object format.
Please comment if you think this plugin is useful for you, or if you have ideas on how to make it better.
36 commenti:
Demo?
demo?
I'm not having much time in these days to finish documenting, but I've released a demo for you:
http://sourceforge.net/projects/multidatespickr/
Please consider that I've already done important bug fixes but had no chance to upload anything to sourceforge as my job's IP is banned :s
I'll upload the new version this weekend, so check it out :)
Hi
You have not mentioned how to make a callback, like I want a js alert to popout with my selected date.
Hi,
I have been using your multidatespicker but and have been unsuccessful using the removeDates method. I have used an integer to remove a day, or an array of integers. Nothing has worked.
I'm trying to use this plugin. I need to get all dates selected by user. The method getDates does that? How can I use it? I was trying:
$('.multidate-datepick ').multiDatesPicker({ getDates: 'string' });
But doesn't work
@Dani: Thanks for your feedback.
I've now updated the documentation on: http://multidatespickr.sourceforge.net/#method-getDates
I've included a simple example of how to use it.
Does the date picker, allow all the old options from UI datepicker as well?
Does it allow you to do year and year range?
> Does the date picker, allow all the old options from UI datepicker as well?
Yes, MDP it's made to maintain all the UI datepicker options, actually it uses UI datepicker internally.
> Does it allow you to do year and year range?
I'm not sure what you mean, but it allows you to do selections of ranges of days, so you can do a range of 365 days obtaining a year range selection.
hi,
time zone problem in multidatepicker jquery ui, set pecific time zone in windows 7, and select date march 13th 2011 it automatically selects march 14th 2011 and vice a varsa, can you give me fix urgent please
Awesome! Thank you so much! This is exactly what I needed for my project.
Hello, please tell me how can i addDates if i have a string, not an object?
the string is like:
23.05.2011,24.05.2011
Hi,
Nice plugin.
Just wanted to let you know that there is bug when you specify dateFormat parameter that is not default. For example:
$("#datepicker").multiDatesPicker({dateFormat: 'dd/mm/yy'});
This will throw an error "uncaught exception: Invalid date" because you are trying to convert the date from $.datepicker._defaults.dateFormat which is 'mm/dd/yy' rather than reading what the user had passed in the options.
Is there anyway you could fix this?
Also, with standard date picker you can specify onSelect event.
onSelect: function(dateText, inst) {
$("#dates").val(dateText);
}
How can you do the same but return selected dates?
Thanks
@Anonimo
it supports the on select event.
$("#calendar").multiDatesPicker({
onSelect: function() {
var dates = $("#calendar").multiDatesPicker('getDates','string');
alert(dates);
}
});
why it does not support the beforeShowDay function of jquery ui calendar? It works for a couple of days then it triggers an error and everything breaks :(
Hi, Nice plugin!!!
Sorry my English :)
I have a problem:(
The noWeekends function don't work!
$("#calendar").multiDatesPicker({
beforeShowDay: $.datepicker.noWeekends,
.......
Please tell me how can I disable weekends date?
Thanks: Hcqc
Hi, congratulations dubrox! Very nice plugin! I'm using it into my project and I also need to detect an unselect date. Could you help me? How can I detect a date which was unselected?
Thanks,this is good.
But I have two questions can help me answer?
1.
DIV selected date bgcolor is obvious,
How set bgcolor of INPUT selected date(2nd date,3rd date,4th date)?
2.
How set not blinking for INPUT select date?
hi,
i found fix for the problem "time zone problem in jquery ui multidatepicker set specified to the time zone in Windows 7, and select date march 13th 2011 march 14th 2011 it automatically selects and vice varsa"
fix is :
in
compareDates : function(date1, date2) {
}
replace line
var diff = (o_dates[0].getTime() - o_dates[1].getTime()) / one_day;
with
var diff = Math.round((o_dates[0].getTime() - o_dates[1].getTime()) / one_day);
Hi! Nice work...
I would like to know what i have to do to use the multidatepicker next to prototype.js or other js frameworks?
With Jquery I am able to call jQuery.noConflict() following this doc:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
...and it is working, but with your plugin, not... any ideas?
regards, chris
Hi! Thanks for the great work! Are you planning to find a solution for "beforeShowDay" anytime soon ?
Regards, Claus
Thanks a lot, this plugin helped me a lot :)
Cheers
thank you very much for this plug-in!
you saved me... LoL
Cheers
Thanks a lot for this plugin!
Please help me to find a method to destroy the multiDatesPicker object like it works with .datepicker("destroy")
Well... "http://sourceforge.net/projects/multidatespickr/" => "We are unable to display the page you requested."
Please reupload it !
Thanks in advance
Awesome plug-in.
It took me a while to realise that we need to override the CSS selector ".ui-datepicker .ui-datepicker-calendar .ui-state-highlight a" in order to visually recognise what dates we're selecting.
I like the design in that it is a clean extension of an already proven jQuery module.
thanx for great plugin/mod.
i have 1 problem tho, when form with mdp auto-submits after selecting 2 dates, server side get only 2nd selected date. is it fixable? heres my mdp setup:
$("#mdp").multiDatesPicker({
dateFormat: "yy-mm-dd",
maxPicks: 2,
onClose: function(date) {
var dates=$('#mdp').multiDatesPicker('getDates');
if(dates.length == 2) {
$("#searchbox").submit();
}
}
});
Your plugin rocks. One thing i'd like to change is the jumping around behavior when clicking into another month than the current. It should not set this month to be the default month, but simply silently push the selected date into dates collection and thats it. The ordering of the widget should NOT change.
How to prevent this whithout waiting for another release?
How to combine the daysRange mode with maxPicks? I would like to have numerous week selections possible. How to achive this?
Also, when initialising the instance with a bunch of default dates using addDates, then, after selecting other date(s), the previously added default dates disappear. How to prevent this?
How to unselect single days from a datesRange collection?
There is no any example of how to deselect day or how to select another one instead of previous(which was selected by 'addDates'). Please, can you give these exaples?
Hi, is it possible to have time added to the calendar. I neeed to select date & time at once.
hi,is it possible for selecting only one date in multidatespicker
I read this content really awesome.You provided another one great article.I hope this information may change my business carrier.I can remember these things whenever taking the decision.read what he said
School website design uk
Posta un commento