Updated jQuery Calendar to jQuery DatePicker
A couple of months ago I posted an ASP.NET wrapper around Marc Garbanski's Calendar control. Just so was my luck that a couple of weeks after I created the control Marc rev'd the jQuery control, renamed it and basically overhauled the control for it's inclusion as part of the jQuery UI suite (which as of V1 is pretty sketchy).
Anyway, the new release of Marc's jQuery UI Datepicker control is now at V3.2 and there are a number of nice enhancements such as auto-positioning when the control is near page edges and would normally scroll off, keyboard navigation, a cleaner and more .NET compatible date format, keyboard constraining for date formats and a few name adjustments to various properties for consistency.
I spent a little time last night updating the ASP.NET control wrapper I built to work with the new client control:
The changes from the original control are fairly minor, but I changed the name of the control to jQueryDatepicker to match the client library. Otherwise the control is compatible with the old version with one exception: The date format has changed in this version. You can now specify date formats using more common .NET date format options (at least for month day year). The default automatic formatting will default to the servers default locale setting, which is the same as the old control. If you set the date format explicitly with the old control you'll potentially have to make a small change.
The control wraps jQuery, the datepicker client library js and css into resources by default so the control is self contained by default. Each of the resources can also be explicitly referenced or be left blank and then manually be included as part of the page.
Other Posts you might also like
The Voices of Reason
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
the calender does not seem to work well with asp:validators in IE. Javascript error saying "length is null or not an object" is raised on click of dates.
# re: Updated jQuery Calendar to jQuery DatePicker
protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
if (((jQueryCalendar)FormView1.FindControl("DatePicker1")).SelectedDate.HasValue == false)
args.IsValid = false;
}
The simple validators have issues with things like Ajax and jQuery.
# re: Updated jQuery Calendar to jQuery DatePicker
original:
else {
inst._input.trigger('change'); // fire the change event
}
becomes:
else {
if (!$.browser.msie) {
inst._input.trigger('change'); // fire the change event
}
}
# re: Updated jQuery Calendar to jQuery DatePicker
The jQuery Calendar control has been changed substantially with version 3.3. Would you consider updating your control to use the 3.3 version?
There is a compatibility section that shows the migration path from 3.2 to 3.3:
http://marcgrabanski.com/code/ui-datepicker/
# re: Updated jQuery Calendar to jQuery DatePicker
This is a fantastic control. Thank you for taking the time to make it more accessible to .NET programmers.
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
I think you'll want the onSelect event:
http://docs.jquery.com/UI/Datepicker/datepicker#options
In the event you can trigger an auto-postback by submitting the form (or alternately firing a custom event generated GetPostbackEventReference() from the server).
# re: Updated jQuery Calendar to jQuery DatePicker
how to call javascript function after selecting date, along with passing the selected date to that javascript function
# re: Updated jQuery Calendar to jQuery DatePicker
txtInline.Attributes.Add("onclick", "alert('hello');");
but this is not working ..
Also i hav tried calling javascript function in "OnClientSelect" and "OnTextChanged" as shown below..but no result :(
<ww:jQueryDatePicker runat="server" id="txtInline" width='80px' DisplayMode="Inline"
OnClientSelect="javascript:alert('hello');" OnTextChanged="javascript:alert('hello');">
</ww:jQueryDatePicker>
----------
[i want to call javascript function instead of alert('hello')]
# re: Updated jQuery Calendar to jQuery DatePicker
the ImageButton of the second occurence jQueryDatePicker doesn't appear ?
What can i do ?
Thanks.
Stéphane ROKKANEN
# re: Updated jQuery Calendar to jQuery DatePicker
Jquery datepicker is a nice control which i am using in my project.Actually i am facing a problem that if the security level of the IE7 is high then the control is not working.
Can you please suggest me with the solution.
Thanks
Vijay Kumar
# re: Updated jQuery Calendar to jQuery DatePicker
the ImageButton of the second occurence jQueryDatePicker doesn't appear ?
What can i do ?
Thanks.
Stéphane ROKKANEN "
Something similar is occurring with me as well. If I have two of this control on a page, they both work, but if I bundle them in another user control and put two (or more) instances of that control on a page, only the first one gets the jQuery DatePicker, the others become simple text boxes.
Suggestions?
# DatePicker is not accessible
May I suggest to incorporate this into the next version?
Cheers!
# re: Updated jQuery Calendar to jQuery DatePicker
# dropdownlist with Years has not been bounding :(
I have got jQueryDatePicker, build and run it, and I have a problem.
When i set MinDate & MaxDate properties, for example
this.txtImageButton.MinDate = DateTime.Now.AddDays(-1); this.txtImageButton.MaxDate = DateTime.Now.AddDays(1);
dropdownlist with Years has not been bounding :(
And dates over MaxDate and MinDate are not disabled, as I expect.
What can be reason of this?
# re: Updated jQuery Calendar to jQuery DatePicker
wwWebUtils.cs, internal class wwWebUtils, line 199
public static string EncodeJsDate(DateTime date) { return "new Date(\"" + date.ToString("U", new CultureInfo("en-US")) +" UTC" + "\")"; }
# re: Updated jQuery Calendar to jQuery DatePicker
I want to add the range of year from 1990 to 2008 ..how it is possible please help me in this matter.
Thank you.
# re: Updated jQuery Calendar to jQuery DatePicker
When you call the datepicker() function, you can pass in an onselect function like this:
$(".datefield input").datepicker({ onSelect: function(dateText) { document.all ? $(this).get(0).fireEvent("onchange") : $(this).change(); } });
That fixes it.
# re: Updated jQuery Calendar to jQuery DatePicker
well,I have read your posts 4 quit a long time,though much content I can't understand as a green hand.
Thanks 4 your works. It help me a lot. sorry 4 bad english.
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
I would like to have Time also in the date picker.
http://plugins.jquery.com/project/DateTimepicker
The above plugin has that solution. Can you please provide me the DLL for DateTimePicker.
Another URL: http://razum.si/jQuery-calendar/TimeCalendar.html
I am having trouble in building the solution. I do not have VS 2005.
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
Here is better way to handle the event trigger in jQuery that also works. Great find!
$("#dateField input").datepicker({ onSelect: function() { $(this).trigger("onchange", null); } });
Maybe future jQuery versions will fix this. Someone should submit the jQuery team this bug.
EnableClientScript="false" works also, but sometimes it's good to prevent the roundtrip to the server to verify a fields' correctness. I would rather have the client capture the invalidity first.
# re: Updated jQuery Calendar to jQuery DatePicker
To fix it, I replaced:
// *** Register Calendar CSS 'manually' string css = @"<link href=""" + script + @""" type=""text/css"" rel=""stylesheet"" />"; scriptProxy.RegisterClientScriptBlock(this.Page, typeof(ControlResources), "_calcss", css, false);
With the following:
System.Web.UI.HtmlControls.HtmlLink cssLink = new System.Web.UI.HtmlControls.HtmlLink(); cssLink.Href = script; cssLink.Attributes.Add("rel", "stylesheet"); cssLink.Attributes.Add("type", "text/css"); this.Page.Header.Controls.Add(cssLink);
Seems to work, though I haven't tested it in anger...
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
I want something like:
lblSelectedDate.Text = txtInlineCalendar.SelectedDate.Value;
Many thanks in advanced...
Regards,
Fajar
# re: Updated jQuery Calendar to jQuery DatePicker
Now i want to do some changes accroding to my requirements.
User should select only available dates from calendar, means in the db we have dates
like product vice, for example one product i have dates from 06/01/2009 to 08/09/2009
another products 08/25/2009 to 09/25/2009. This will get vary depends upon the products.
So i have to pass the available dates as input parameter to the script and only these dates should be selectable.
Please give me some idea where i have to do the changes and what are all the files.
Please help me..
Regards,
Vimal
# re: Updated jQuery Calendar to jQuery DatePicker
This is very nice control. Could you please let us know how can we format the date to dd/mm/yyyy?
thanks
vamshi
# Problem with IE8 (KB927917). Parsing error.
# re: Updated jQuery Calendar to jQuery DatePicker
@SilverNinja: This works, but then you also cancel other methods called in the onchange event, if you have any.
# re: Updated jQuery Calendar to jQuery DatePicker
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
very nice control.
But how to display the month and year in dropdown in jquery with french culture. I need to display the french calander with two dropdownlist one for month and another for year..
thanks
r.e
# re: Updated jQuery Calendar to jQuery DatePicker
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
# re: Updated jQuery Calendar to jQuery DatePicker
OnClientSelect="function() {}"
# re: Updated jQuery Calendar to jQuery DatePicker
I add a DatePicker in aspx file:
<ww:jQueryDatePicker ID="jQueryDatePicker1" Enabled=false runat="server" ></ww:jQueryDatePicker>
Set Enabled=false
But when run in browser, a buttonImage still enable to choose a date. (TextBox was disable)
is there any bug on it with Enable properties?
# re: Updated jQuery Calendar to jQuery DatePicker
<ww:jQueryDatePicker ID="jQueryDatePicker1" Enabled=true runat="server" ></ww:jQueryDatePicker>
The error show at "inst._input[0].focus();":
_updateDatepicker: function(inst) {
inst._datepickerDiv.empty().append(inst._generateDatepicker());
if (inst._get('numberOfMonths') != 1) {
inst._datepickerDiv.addClass('datepicker_multi');
}
else {
inst._datepickerDiv.removeClass('datepicker_multi');
}
if (inst._input && inst._input[0].type != 'hidden') {
inst._input[0].focus();
}
Info: htmlfile: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus.
# re: Updated jQuery Calendar to jQuery DatePicker
I have put the datepicker on my aspx page and it works fine in english.
I need to make the datepicker switch language (english or chinese) based on the current UI culture.
Could someone please explain in simple steps how to do this.
Thank you
# re: Updated jQuery Calendar to jQuery DatePicker
I setup the date format to "dd/MM/yy" and it shows ok at starup, but it change to "dd/MM/yyyy" when the user selects a date.
Any idea how to fix it to return the years in two digits as the format say?
Thanks in advance!
# re: Updated jQuery Calendar to jQuery DatePicker
Sorry for my bad english. I have the IE problem mentionned above : length is null or not an object. But, i don't use ASP (just JavaScript, PHP and HTML).
This is my code :
$("#datepicker").datepicker({ dateFormat: 'yymmdd', minDate: '0', maxDate: '+1Y', onSelect: function(dateText) { document.getElementById('post_date_braderies').value = dateText; } });
post_date_braderies -> it's an hidden input, because the DatePicker is a part of search form.
This code work fine with Chrome and FF, but with IE :o(
I'm a newbie in jQuery (and JavaScript) and i don't have understand the solution with this code :
onSelect: function(dateText) { document.all ? $(this).get(0).fireEvent("onchange") : $(this).change(); }
Where is the place for the value from my input ?
Thank you very much for your help.
# re: Updated jQuery Calendar to jQuery DatePicker
How to set detault start date to todays date ?
# re: Updated jQuery Calendar to jQuery DatePicker
great work about the datepicker. i was a java-developer (struts, jsf) for 15 years and now, cahnging the company, a am doing .net (especially as.net). i am working with asp.net since 6 month. that's not a long time, but step-by-step i figure it out, who to work with this new language.
to my problem:
--------------
i tried to implement the datepicker with using jQuery by myself, using a UserControl. that's all working, maybe not the best solution, but it's working ;-)
but now i come to the point, using ajax and therefor the UpdatePanel. when i update my own DatePicker UserControl, all options for my jQuery DatePicker are lost. So i used the "function pageLoad(sender, args)" method (directly in the UserControl to re-init all after partial submit. but what if i have more than one of my UserControl on my .aspx page. The "function pageLoad(sender, args)" comes from the UserControl and doesn't know about other UserControls. And there can be only one "function pageLoad(sender, args)" (there could be also 2, but the last one is called).
Maybe my german-english is confusing, so i put my code her http://dl.dropbox.com/u/6492614/WebShowcase.zip. Maybe with the code its more understandable.
The main-goal what i want is writting own UserControls, using jQuery and using them on other .aspx Pages without take care of the java-script init of these components.
Thanks in advance
chris
# re: Updated jQuery Calendar to jQuery DatePicker
me again ;-)
i managed it to finish my implementation ... maybe someone do me a favour and validate my solution. download it here: http://dl.dropbox.com/u/6492614/WebShowcase_2.zip
as i told you, i was a java-developer for over 15 years and now doing .net for only 6 month. maybe my solution is not the best - waiting for corrections ...
greetings
chris
# re: Updated jQuery Calendar to jQuery DatePicker
How do we set the datapicker to allow weekend selection and highlight?
If I click on a sat / sun, the date is selected fine and I can use it, but the highlight goes away.
Could you please advice.
thanks
# re: Updated jQuery Calendar to jQuery DatePicker
very handy! Thanks for sharing. I love that jQuery stuff.
Merry Xmas from Germany to Hawaii!