Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

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:

jqueryCalendar

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.

Make Donation
Posted in ASP.NET  jQuery  


Feedback for this Post

 
# re: Updated jQuery Calendar to jQuery DatePicker
by Joe Maier December 22, 2007 @ 8:48am
Hi Rick,
very handy! Thanks for sharing. I love that jQuery stuff.
Merry Xmas from Germany to Hawaii!
# re: Updated jQuery Calendar to jQuery DatePicker
by syuko December 24, 2007 @ 4:52am
i like your posts.I am using JQuery Now.i have readed "Learning JQuery".
# re: Updated jQuery Calendar to jQuery DatePicker
by Marc December 28, 2007 @ 4:33am
Great work! I updated the project page with a link to it.
# re: Updated jQuery Calendar to jQuery DatePicker
by Pawan January 06, 2008 @ 8:49pm
HI Rick,
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
by Jeff January 09, 2008 @ 3:54pm
I use a server validator with code like:

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
by wolfgang January 15, 2008 @ 6:02am
while it effectively breaks your upgrade path, simple addin an if condition to avoid triggering the change-event in IE solves the problem: (located somewhere around line 700 in ui.datepicker.js)
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
by Tim Gebhardt February 11, 2008 @ 11:14am
Rick,

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
by Jeremy July 30, 2008 @ 7:37am
Rick,

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
by Anny September 09, 2008 @ 11:37pm
Gr8 work Done. i have one query :: i need the inline calendar and on selecting date the postback must occur and call one function , where i can take the selected date and redirect to another page. Any way out ???
# re: Updated jQuery Calendar to jQuery DatePicker
by Rick Strahl September 10, 2008 @ 12:52am
@Anny - you'll have to hook a client side event from the date picker to make this happen. Unfortunately the docs for the date picker are pretty crappy so this is harder than it should be - I had to look at the source code to figure out what to hook.

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
by Anny September 10, 2008 @ 1:34am
Glad to see ur quick reply. one more thing i need to ask
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
by Anny September 10, 2008 @ 2:19am
I have tried calling javascript function this way,
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
by ROKKANEN October 20, 2008 @ 2:45am
I tried to integrate your compenent. Its work welll except in a ASP.NET Datalist :
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
by vijay October 30, 2008 @ 4:33am
Hi
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
by Jeff October 31, 2008 @ 1:09pm
"I tried to integrate your compenent. Its work welll except in a ASP.NET Datalist :
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
by Jens November 04, 2008 @ 5:21pm
This is a great plugin, but I was looking for a date picker which is also accessible to keyboard users.

May I suggest to incorporate this into the next version?

Cheers!
# re: Updated jQuery Calendar to jQuery DatePicker
by Jeff November 11, 2008 @ 8:04am
Just wanted to say I found the fix. In the script registration, replacing this.ID with this.ClientId worked for me, now multiple controls can render.
# dropdownlist with Years has not been bounding :(
by Andrew November 17, 2008 @ 7:59am
Hi!
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
by Andrew November 18, 2008 @ 1:31am
I conducted investigation about this problem. Bug is : control need only en-US Culture. So fix is:
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
by Tarun December 03, 2008 @ 7:33am
Hi,

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
by Tim C December 10, 2008 @ 9:30am
With regards to the issue of IE and the "length is null or not an object".

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
by PoorGreenHand December 18, 2008 @ 1:31am
Hi,Rick:
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
by Dylan Copeland December 30, 2008 @ 8:14am
If you are receiving the JavaScript error saying "length is null or not an object" when you click your date in IE, you need to change the "EnableClientScript" property on your CustomValidator to false. This will prevent your web application from running the client-side JavaScript validation on your jQueryDatePicker control.
# re: Updated jQuery Calendar to jQuery DatePicker
by david January 02, 2009 @ 4:20am
Hi Rick,

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
by chris January 06, 2009 @ 5:08pm
I am trying to set option numberOfMonths to 2 but one calendar appears directly below the other calendar. How can I get the calendards to appear side by side instead?
# re: Updated jQuery Calendar to jQuery DatePicker
by SliverNinja February 25, 2009 @ 8:59am
In response to Tim C's IE bug...

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
by Ben March 06, 2009 @ 5:13am
I had an error when I used the control in an Ajax UpdatePanel, specifically: "the script tag registered for type 'Westwind.Web.Controls.ControlResources' and key '_calcss' has invalid characters outside of the script tags"

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
by Alex April 03, 2009 @ 7:33am
btw.. if you use a custom validator on the date field along with the datepicker, remember to set "EnableClientScript=false" for the validator. Otherwise "length is null or not an object" is guaranteed
# re: Updated jQuery Calendar to jQuery DatePicker
by Fajar Ramadhany April 30, 2009 @ 1:15am
Can someone tell me how to get the selecteddate value when user selected a date (on change event). I use the control to show calendar in the Inline mode.

I want something like:

lblSelectedDate.Text = txtInlineCalendar.SelectedDate.Value;

Many thanks in advanced...

Regards,

Fajar
# re: Updated jQuery Calendar to jQuery DatePicker
by Vimal May 27, 2009 @ 3:46am
This is a great plugin. I have read your posts & code and i understood very clearly.
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
by vamshi June 11, 2009 @ 7:31pm
Hi,
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.
by Fred July 19, 2009 @ 11:22am
Hi Rick, Super work. But, I get the following error with IE8 (works perfectly on FF) : "HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)"... the Jquery scripts used are probably not compatible with IE8 DOM.... see :http://support.microsoft.com/kb/927917 Hope you can update this... Regards, Fred (France).
# re: Updated jQuery Calendar to jQuery DatePicker
by Knut Hamang August 21, 2009 @ 1:47am
@Tim C: Great fix for the javascript error problem. I works like a charm!

@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
by Praveen September 16, 2009 @ 3:30am
# re: Updated jQuery Calendar to jQuery DatePicker
by niu November 04, 2009 @ 6:29pm
will show a blank for IE 6.0 in the bottom
# re: Updated jQuery Calendar to jQuery DatePicker
by eswaran November 11, 2009 @ 5:17am
hi,

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
by Steve November 16, 2009 @ 12:51pm
for those having issues with the asp.net validation controls:

http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html
# re: Updated jQuery Calendar to jQuery DatePicker
by Tauqeer December 03, 2009 @ 4:24am
@SliverNinja & @Tim C: Great Fix for IE, that saved me lot of time. Thanks, Tauqeer.....
# re: Updated jQuery Calendar to jQuery DatePicker
by Toby February 22, 2010 @ 3:00pm
What is the syntax for changing the date format? For example, I need dates in "dd-MMM-yyyy", or 1-Jan-2010. Please advise.
# re: Updated jQuery Calendar to jQuery DatePicker
by Haris March 10, 2010 @ 2:11am
Not working with Datalist, Calendar popup appears only for the first instance and not for any other.
# re: Updated jQuery Calendar to jQuery DatePicker
by Lane March 12, 2010 @ 3:05pm
For those who've reported the problem with ASP.NET validators and the error message "Error: 'length' is null or not an object," I found a lot of comments in the blogosphere about how to adjust the javascript code. But a simple solution that I implemented was just to include this when I declare the control on my aspx page:

OnClientSelect="function() {}"
# re: Updated jQuery Calendar to jQuery DatePicker
by Truong Le Khanh March 17, 2010 @ 1:17am
Hi all.

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
by Truong Le Khanh March 17, 2010 @ 7:50pm
If i set Enabled=true
<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
by Dave March 30, 2010 @ 5:32am
Can anyone help please.
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
by Sybaseman April 15, 2010 @ 12:57pm
Hi. I put the DatePicker and it's working but I have a little bug.
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
by IE problem June 08, 2010 @ 4:42pm
Hello,

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
by amar October 07, 2010 @ 10:47pm
Hi


How to set detault start date to todays date ?
# re: Updated jQuery Calendar to jQuery DatePicker
by Chris October 26, 2010 @ 3:53am
Hi

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
by Chris October 27, 2010 @ 4:59am
hi,

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
by Param January 28, 2011 @ 11:50pm
Hello Rick,

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
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014