[Solved] Formatting issue with Date control when postback

[Patrick]

Here is the line of code :

@Html.Telerik().DatePickerFor(model => model.Date).Min(DateTime.Today).Value(Model.Date > DateTime.MinValue ? Model.Date : DateTime.Today).Format("D")

It's straight forward and it display correctly the case of if the date is set or if it's minimum to display the current date.

The problem is when we call with Ajax this function and try to set the content of this view into the Telerik window. The code is exactly the same, but since  the user did a mistake in the form (somewhere else) we do not close the  window but simply go get the view and display it back. I think it's pretty standard and I if I use break point to this line everything is fine with the Value(.....) I see a real date. But in the display, the format is not respected.

Two things you have to know:
1) I always have when I debug with VS the exception File not found on the calendar control "Specified file does not exist: "~/Scripts/jquery-1.7.1.js"." At first I thought that it wasn't a problem since it load correctly the first time (even with this error at the first time also).
2) The format is not good I receive in fact : "2012-04-05T04:00:00.000Z" which is the good date but not formatted.

Why does the formatting work only the first time and not  on rexecuting the call on Ajax?

[Patrick]

If I check the inner exception of JQuery I have in the stack : 

   at Telerik.Web.Mvc.Infrastructure.Implementation.WebAssetLocator.ProbePath(String virtualPath, String version, IEnumerable`1 extensions) in f:\114\Griffin\Trunk Full\Sources\Source\Telerik.Web.Mvc\Infrastructure\Implementation\WebAsset\WebAssetLocator.cs:line 80

Don't know if it can help one of you...

[Patrick]

I have solve the problem JQuery which was that we had custom path for the Javascript file. I have put back the
Html.Telerik().ScriptRegistrar() instead of using the Group() with a custom path.
I have also change the path of /Scripts/telerik/ to /Scripts/2012.1.214 and I do not have any more the
error message.

BUT, I still do have the formatting problem.

[Patrick]

The problem is not on the model/controller side cause if we debug we can clearly see that the model is well passed to the DatePickerFor extension but this one produce in the string of the resulting PartialView an erroneous output in the value which is not the case in other circumstance like in normal view. From here, I have not found the latest build source code for the Asp MVC so it's not possible to know what's wrong with the DatePicker extension.

Any one or some one at Telerik know what to do? (I cannot reproduce the problem in a smaller project, sorry).

[Patrick]

For the curious, this is the code generated by Telerik for the DatePicker in Google Chrome (without having any formatting property used in the extension).

<div class="editor-field-container">
                        <div class="t-widget t-datepicker" style="width:226px;"><div class="t-picker-wrap"><input class="t-input text-box-required" id="Date" name="Date" type="text" value="2012-04-12T04:00:00.000Z" /><span class="t-select"><span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span></span></div></div><script type="text/javascript">
                if(!jQuery.telerik){
                jQuery.ajax({
                url:"/Scripts/2012.1.214/telerik.common.js",
                dataType:"script",
                cache:false,
                success:function(){
                jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'M/d/yyyy', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); });
                }});}else{
                jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'M/d/yyyy', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); });
                }
</script>
</div>

This is the source code of FireFox (which work if no .Min() and/or .Format() is used) :

<div class="editor-field-container"> <div class="t-widget t-datepicker" style="width:226px;"><div class="t-picker-wrap"><input class="t-input text-box-required" id="Date" name="Date" type="text" value="2012-04-10T04:00:00.000Z" /><span class="t-select"><span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span></span></div></div><script type="text/javascript"> if(!jQuery.telerik){ jQuery.ajax({ url:"/Scripts/2012.1.214/telerik.common.js", dataType:"script", cache:false, success:function(){ jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'yyyy-MM-dd', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); }); }});}else{ jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'yyyy-MM-dd', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); }); } </script> </div>

And this is the source code generated in FireFox that doesn't work (I added .Format("D")).

<div class="editor-field-container"> <div class="t-widget t-datepicker" style="width:226px;"><div class="t-picker-wrap"><input class="t-input text-box-required" id="Date" name="Date" type="text" value="2012-04-10T04:00:00.000Z" /><span class="t-select"><span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span></span></div></div><script type="text/javascript"> if(!jQuery.telerik){ jQuery.ajax({ url:"/Scripts/2012.1.214/telerik.common.js", dataType:"script", cache:false, success:function(){ jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'D', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); }); }});}else{ jQuery.telerik.load(["/Scripts/2012.1.214/jquery-1.7.1.js","/Scripts/2012.1.214/telerik.common.js","/Scripts/2012.1.214/telerik.calendar.js","/Scripts/2012.1.214/telerik.datepicker.js"],function(){ jQuery('#Date').tDatePicker({format:'D', minValue:new Date(1899,11,31), maxValue:new Date(2100,0,1)}); }); } </script> </div>

I have no clue what's wrong. The value seems to always be with the TZ format and some Javascript is loaded afterward. Why does it works sometime in Firefox but never on Chrome... no clue...yet...