Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows
advertise here

Updated jQuery Calendar to jQuery DatePicker

December 21, 2007 • from Maui, Hawaii   •   50 comments
:P
On this page:

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.

Posted in ASP.NET  jQuery  

The Voices of Reason

 

Joe Maier
December 22, 2007

# re: Updated jQuery Calendar to jQuery DatePicker

Hi Rick,
very handy! Thanks for sharing. I love that jQuery stuff.
Merry Xmas from Germany to Hawaii!

syuko
December 24, 2007

# re: Updated jQuery Calendar to jQuery DatePicker

i like your posts.I am using JQuery Now.i have readed "Learning JQuery".

Marc
December 28, 2007

# re: Updated jQuery Calendar to jQuery DatePicker

Great work! I updated the project page with a link to it.

Pawan
January 06, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Jeff
January 09, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

wolfgang
January 15, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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
}
}

Tim Gebhardt
February 11, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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/

Jeremy
July 30, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

Rick,

This is a fantastic control. Thank you for taking the time to make it more accessible to .NET programmers.

Anny
September 09, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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 ???

Rick Strahl
September 10, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

@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).

Anny
September 10, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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

Anny
September 10, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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')]

ROKKANEN
October 20, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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

vijay
October 30, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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

Jeff
October 31, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

"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?

Jens
November 04, 2008

# DatePicker is not accessible

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!

Jeff
November 11, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Andrew
November 17, 2008

# dropdownlist with Years has not been bounding :(

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?

Andrew
November 18, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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" + "\")";
        }

Tarun
December 03, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Tim C
December 10, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

PoorGreenHand
December 18, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Dylan Copeland
December 30, 2008

# re: Updated jQuery Calendar to jQuery DatePicker

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.

david
January 02, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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.

chris
January 06, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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?

SliverNinja
February 25, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Ben
March 06, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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...

Alex
April 03, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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

Fajar Ramadhany
April 30, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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

Vimal
May 27, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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

vamshi
June 11, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

Hi,
This is very nice control. Could you please let us know how can we format the date to dd/mm/yyyy?

thanks
vamshi

Fred
July 19, 2009

# Problem with IE8 (KB927917). Parsing error.

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).

Knut Hamang
August 21, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

@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.

Praveen
September 16, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

See solution for it here.
http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html

niu
November 04, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

will show a blank for IE 6.0 in the bottom

eswaran
November 11, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

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

Steve
November 16, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

for those having issues with the asp.net validation controls:

http://praveenbattula.blogspot.com/2009/09/jquery-datepicker-problem-on-date.html

Tauqeer
December 03, 2009

# re: Updated jQuery Calendar to jQuery DatePicker

@SliverNinja & @Tim C: Great Fix for IE, that saved me lot of time. Thanks, Tauqeer.....

Toby
February 22, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

What is the syntax for changing the date format? For example, I need dates in "dd-MMM-yyyy", or 1-Jan-2010. Please advise.

Haris
March 10, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

Not working with Datalist, Calendar popup appears only for the first instance and not for any other.

Lane
March 12, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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() {}"

Truong Le Khanh
March 17, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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?

Truong Le Khanh
March 17, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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.

Dave
March 30, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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

Sybaseman
April 15, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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!

IE problem
June 08, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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.

amar
October 07, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

Hi


How to set detault start date to todays date ?

Chris
October 26, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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

Chris
October 27, 2010

# re: Updated jQuery Calendar to jQuery DatePicker

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

Param
January 28, 2011

# re: Updated jQuery Calendar to jQuery DatePicker

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 - 2024