I am working on a project which includes the technologies like ASP.NET, Jquery, Sql server. I solved so many problems in Jquery and posted on my blog some. Now, I am posting a wonderful post on Jquery datepicker.
Because I am using Jquery in ASP.NET application, I added a regular expression for date to validate whether user entered date is valid or not. Because of adding the validation on the text box, whenever I select a date from datepicker, the datepicker events are firing like onselect, change etc.. So, generally what validation framework is doing, whenever some event fires on the page, validations will execute. The same thing happening here. Whenever I change or select date from the date picker, it will fire some events and at the same time validation framework trying to validate the validations. But, it is not the right event to do validations. So, always we will get the exception at "vals.length" in a for loop of the built-in code. vals is the object of all the validators on the page. It always fails to load in Jquery date picker event trigger, because it is not the right event for validation. And the result is vals is undefined, you always get exception at vals.length as "length is null or not an object". I think now you got very clear idea of why it is happening. Now, move to the next step i.e. solution for it.
Solution is very simple, I read all the documentation of Jquery datepicker and found an event named onSelect. So, whenever I select date this is the event firing. So, there I got a clue and started thinking towards it. And below is the result.
$(".datepicker").datepicker({ onSelect:function(){}});
In your datepicker initialization statement add onSelect event which don't do anything means empty function as shown above. There problem solved. Isn't a good find? Please let me know your thoughts on this.
I am really wonder by reading your posts. Best for the devs this blog. You saved me again lot of time. How is this possible for you to write all about what devs are exactly looking for?
ReplyDeleteyes he is right i got same prob. i also used IE8 i also got same problem....
ReplyDeleteThanks for the post it is very helpful
ReplyDeleteNoticed that by adding the above mentioned, the dateformat doesnt pick up very well like for example
datepicker({ dateFormat: 'dd/mm/yy' });"
it still picks mm/dd/yy version of date into the input box
Of course we can format the date on server side but its still confusing for the users
Thanks
Hi Lakshmi,
ReplyDeleteThanks for your comment.
I know what the problem you are facing now. Here you need to understand one thing that, Jquery objects like datepicker or other plug-ins will initialize only once or they will only set the options which are in the very first initialization. Means whatever you want to assign to a datepicker for example, you should place them at one place as shown below.
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy', minDate: 4, onSelect:function(){}
});
In the above declaration, I mentioned dateFormat, minDate, and onSelect attributes or option in initializing the Jquery datepicker. So, All there will set and execute as expected. Whereas the below code won't run as expected [Only the first statement will run, dateFormat].
$(".datepicker").datepicker({
dateFormat: 'dd/mm/yy'
});
$(".datepicker").datepicker({
minDate: 4
});
$(".datepicker").datepicker({
onSelect:function(){GetDuration();}
});
In above code, I just split them into 3 statements. Now only the first one will work, last two statements won't execute or they won't work. So, check your project code, are there any places the dateFormat already mentioned.
-Praveen.
Hi,
ReplyDeleteThanks for the post its so useful,but i am facing issue with the panels in the application, basically the panels are in invisible mode one of which contains the datepicker controls.But making the other panel visible from the code behind is causing the datepicker to break
I tried disabling this from the code behind using status :disable but that didnt work ,also applied onselect funtion but same issue
Please suugest any on this
Thanks
It works!, spent a lot of time on this one, thanks for the fix.
ReplyDeleteTry using ASP.NET Placeholder tag instead of the Panel tag. The reason behind is, if you are changing the code for visible false, true for a control in c# code means you don't need it on the client side. The best way for doing it is use Placeholder and try it. If you use Panel, code is rendered on the page but, it is in invisible mode. When you use Placeholder the whole code inside of it won't render at all. So, there won't be any problems because of that. Good luck!!!
ReplyDeletePlease let me know, if you have any problems or question on it.
great solution. Thanks!
ReplyDeleteThis doesn't appear to work with CustomValidators that rely on a server side event handler to validate input.
ReplyDeleteThanks!
ReplyDelete@Anonymous // December 9, 2009 8:07 AM
ReplyDeleteHere is a solution to get it to work for Validators etc.
http://stackoverflow.com/questions/1704398/jquery-datepicker-popup-not-closing-on-select-date-in-ie8
Hi,
ReplyDeletethank you very much for the description how to handle the datepicker. It helped me alot.
I am experiencing a similiar problem with timepicker (jQuery UI Timepicker 0.2.4 from Francois Gelinas).
$("input[id$='tbFinishTime']").timepicker();
it works fine as long I don't use a requiredfieldvalidator and regularexpressionvalidator.
As soon I use those two validators I receive that typical error message saying "Microsoft JScript runtime error: 'length' is null or not an object".
$("input[id$='tbFinishTime']").timepicker({ onSelect:function(){}}));
makes no differences.
Can someone help me out please?
Andy
were u able to find the solution ?
DeleteNice! Worked perfectly!
ReplyDeleteThis did the trick.
ReplyDeleteSolution was found on just 1 website in the entire WWW universe. Yours!
thanks, no I can live on...
$('textboxClientID').datepicker({dateFormat: 'dd/mm/yy', onSelect:function(){}
ReplyDeleteWorks perfectly