Dateinput : HowTo Parse a string like 151525 automatically to a HH:mm:ss format on input

[Fabian]

Hello,
I have a problem with automatic Time parsing on  the Telerik RadDateInput.
I need to use it as a timeinput coolumn  in a editable Grid. I want to work only with time input in format HH:mm:ss.

If I type in  a letters like 1215  it is parsed correct to 12:15:00, but if i want to type in a Time with seconds  for example 121525 I get the Parse error Symbol.

Only if I type in 12:15:25  with all signs... it works... but this is not a good usability...
Is there a way to allow automatic parsing from letters like 121525 to 12:15:25?

<telerik:RadGrid ID="rdgStoppzeitenSummenkorrektur" runat="server" AutoGenerateColumns="False"
       Height="100%"  AllowSorting="false" AllowMultiRowSelection="False" AllowMultiRowEdit="true" AllowPaging="false"
       EnableLinqExpressions="false" AutoGenerateEditColumn="false"
       GridLines="None" ShowStatusBar="true">
               <ClientSettings AllowExpandCollapse="false" EnablePostBackOnRowClick="false" Resizing-AllowColumnResize="false"
           EnableRowHoverStyle="true">
           <Selecting AllowRowSelect="false" EnableDragToSelectRows="false" />
           <Scrolling UseStaticHeaders="true" AllowScroll="true" SaveScrollPosition="true" />
       </ClientSettings>
       <MasterTableView Width="100%" EditMode="InPlace" >
           <Columns>
               <telerik:GridBoundColumn SortExpression="Sponsor" ReadOnly="true"
               HeaderText="Sponsor" HeaderButtonType="TextButton" ItemStyle-Width="100" HeaderStyle-Width="100"
                   DataField="Sponsor" UniqueName="ColumnSponsor">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn SortExpression="Werbemittel" ReadOnly="true" HeaderText="Werbemittel"
                   HeaderButtonType="TextButton" DataField="Werbemittel" UniqueName="ColumnWerbemittel"
                   ItemStyle-Width="100" HeaderStyle-Width="100">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn SortExpression="UWerbemittel" ReadOnly="true" HeaderText="UWerbemittel"
                   HeaderButtonType="TextButton" DataField="UWerbemittel" UniqueName="ColumnUWerbemittel"
                   ItemStyle-Width="40" HeaderStyle-Width="40">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn SortExpression="Werbebotschaft" ReadOnly="true" HeaderText="Werbebotschaft"
                   HeaderButtonType="TextButton" DataField="Werbebotschaft" UniqueName="ColumnWerbebotschaft"
                   ItemStyle-Width="100" HeaderStyle-Width="100">
               </telerik:GridBoundColumn >
               <telerik:GridBoundColumn SortExpression="Wettbewerb" ReadOnly="true" HeaderText="Wettbewerbe"
                   HeaderButtonType="TextButton" DataField="Wettbewerb" UniqueName="ColumnWettbewerb"
                   ItemStyle-Width="100" HeaderStyle-Width="100">
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn SortExpression="Person" ReadOnly="true" HeaderText="Spieler"
                   HeaderButtonType="TextButton" DataField="Person" UniqueName="ColumnPerson">
               </telerik:GridBoundColumn>
               <telerik:GridNumericColumn SortExpression="SequenzKlar" ItemStyle-Width="30" HeaderStyle-Width="30"
                   ReadOnly="true" HeaderText="Seq/K" HeaderButtonType="TextButton" DataField="SequenzKlar"
                   UniqueName="ColumnSequenzKlar">
               </telerik:GridNumericColumn>
               <telerik:GridDateTimeColumn SortExpression="TimeKlar" ReadOnly="true" DataType="System.DateTime"
                   DataFormatString="{0:HH:mm:ss}" HeaderText="Klar" HeaderButtonType="TextButton"
                   ItemStyle-Width="50" HeaderStyle-Width="50" DataField="TimeKlar" UniqueName="ColumnTimeKlar">
               </telerik:GridDateTimeColumn>
               <telerik:GridNumericColumn SortExpression="SequenzAssozierbar" ItemStyle-Width="30" HeaderStyle-Width="30" ReadOnly="true" HeaderText="Seq/A"
                   HeaderButtonType="TextButton" DataField="SequenzAssozierbar" UniqueName="ColumnSequenzAssozierbar">
               </telerik:GridNumericColumn>
               <telerik:GridDateTimeColumn SortExpression="TimeAssozierbar" ReadOnly="true" DataType="System.DateTime"
                   DataFormatString="{0:HH:mm:ss}" HeaderText="Assoz" HeaderButtonType="TextButton"
                   DataField="TimeAssozierbar" UniqueName="ColumnTimeAssozierbar" ItemStyle-Width="50"
                   HeaderStyle-Width="50">
               </telerik:GridDateTimeColumn>
               <telerik:GridNumericColumn SortExpression="SequenzKlar_Neu" ItemStyle-Width="45"
                   HeaderStyle-Width="45" HeaderText="Seq/K" HeaderButtonType="TextButton" DataField="SequenzKlar_Neu"
                   UniqueName="ColumnSequenzKlar_Neu">
               </telerik:GridNumericColumn>
               <telerik:GridDateTimeColumn SortExpression="TimeKlar_Neu" DataType="System.DateTime"
                   PickerType="None" ItemStyle-Width="100" HeaderStyle-Width="100" DataFormatString="HH:mm:ss"
                   EditDataFormatString="HH:mm:ss" HeaderText="Klar" HeaderButtonType="TextButton"
                   DataField="TimeKlar_Neu" UniqueName="ColumnTimeKlar_Neu">
               </telerik:GridDateTimeColumn>
               <telerik:GridNumericColumn SortExpression="SequenzAssozierbar_Neu" ItemStyle-Width="45"
                   HeaderStyle-Width="45" HeaderText="Seq/A" HeaderButtonType="TextButton" DataField="SequenzAssozierbar_Neu"
                   UniqueName="ColumnSequenzAssozierbar_Neu">
               </telerik:GridNumericColumn>
               <telerik:GridDateTimeColumn SortExpression="TimeAssozierbar_Neu" DataType="System.DateTime"
                   DataFormatString="HH:mm:ss" EditDataFormatString="HH:mm:ss" HeaderText="Assoz"
                   HeaderButtonType="TextButton" PickerType="None" DataField="TimeAssozierbar_Neu"
                   UniqueName="ColumnTimeAssozierbar_Neu" ItemStyle-Width="100" HeaderStyle-Width="100">
               </telerik:GridDateTimeColumn>
           </Columns>
       </MasterTableView>
   </telerik:RadGrid>

Thanks in Advance

Kind Regards

Fabian

[Fabian]

I found a solution myself, in this Post

http://www.telerik.com/community/forums/aspnet/calendar/how-to-implement-a-custom-javascript-date-time-parser-in-master-content-pages.aspx

i found the needed Example in the SourceCode zip

<telerik:RadScriptBlock ID="radsb1" runat="server">

           <script type="text/javascript">

               function overrideParseDate() {
                   if (typeof (Telerik.Web.UI.RadDateInput) != "undefined") { // if RadDateInput control is on page then override parseDate function
                       Telerik.Web.UI.RadDateInput.prototype.parseDate = function(value, baseDate) {

                           if (value == "") {
                               return;
                           }
                           // regex patterns
                           var dateyyPat = /^(\d{1,2})(\/|-|\.)(\d{1,2})(\/|-|\.)(\d{2})$/;
                           var dateyyyyPat = /^(\d{1,2})(\/|-|\.)(\d{1,2})(\/|-|\.)(\d{4})$/;
                           var time12Pat = /^(1[012]|[1-9])?(:[0-5]\d)?(:[0-5]\d)?(\ )?([AaPp][Mm]?)?$/;
                           var time24Pat = /^(2[0-4]|1\d|0?\d)?(:[0-5]\d)?(:[0-5]\d)?$/;
                           var dateyytimePat = /^(\d{1,2})(\/|-|\.)(\d{1,2})(\/|-|\.)(\d{2})?(\ )(1[012]|[1-9])?(\:)([0-5]\d)?([0-5]\d)?(\ )?([AaPp][Mm]?)?$/;
                           var dateyyyytimePat = /^(\d{1,2})(\/|-|\.)(\d{1,2})(\/|-|\.)(\d{4})?(\ )(1[012]|[1-9])?(\:)([0-5]\d)?([0-5]\d)?(\ )?([AaPp][Mm]?)?$/;

                           var matchArray = null;
                           var dateMatched = false;
                           var timeMatched = false;
                           var dateIsValid = false;
                           var timeIsValid = false;
                           var clearControl = true;
                           var isMil = false;

                           var month = 0;
                           var day = 0;
                           var year = 0;
                           var hours = 0;
                           var minutes = 0;
                           var seconds = 0;
                           var ampm = null;

                           var currentCentury = parseInt((new Date().getFullYear()) / 100) * 100;

                           var ctl = this; // get reference to the instance of the control calling this function

                           var dfi = ctl.get_dateFormatInfo(); //get dateFormatInfoObject from the control
                           var syce = dfi.ShortYearCenturyEnd; //Get ShortYearCenturyEnd date from the control
                           var sycb = syce - 99; //Calculate ShortYearCenturyBegin date from the control

                           if (!matchArray) {
                               matchArray = value.match(dateyyPat); // mm/dd/yy?
                               if (matchArray != null) {
                                   if (parseInt(matchArray[5], 10) < sycb - (parseInt(sycb / 100, 10) * 100)) { // if 2 digit year is < 2 digit ShortYearCenturyBegin date
                                       year = parseInt(matchArray[5], 10) + currentCentury; // use current century
                                   }
                                   else { // if 2 digit year is >= 2 digit ShortYearCenturyBegin date
                                       year = parseInt(matchArray[5], 10) + (currentCentury - 100);  // use previous century
                                   }
                                   month = parseInt(matchArray[1], 10);
                                   day = parseInt(matchArray[3], 10);
                                   dateMatched = true;
                               }
                           }

                           if (!matchArray) {
                               matchArray = value.match(dateyyyyPat); // mm/dd/yyyy?
                               if (matchArray != null) {
                                   year = parseInt(matchArray[5], 10);
                                   month = parseInt(matchArray[1], 10);
                                   day = parseInt(matchArray[3], 10);
                                   dateMatched = true;
                               }
                           }

                           if (!matchArray) {
                               matchArray = value.match(time12Pat); // time 12 hour
                               if (matchArray != null) {
                                   hours = Number(matchArray[1]);
                                   minutes = matchArray[2] ? Number(String(matchArray[2]).replace(':', '')) : 0;
                                   seconds = matchArray[3] ? Number(String(matchArray[3]).replace(':', '')) : 0;
                                   ampm = matchArray[5];
                                   // if PM convert to military
                                   if (ampm.toUpperCase() == "PM") {
                                       hours = hours == 12 ? 12 : hours + 12;
                                   } else if (hours == 12) {
                                       hours = 0;
                                   }

                                   isMil = true;
                                   timeMatched = true;
                               }
                           }

                           if (!matchArray) {
                               matchArray = value.match(time24Pat); // time 24 hour
                               if (matchArray != null) {
                                   hours = Number(matchArray[1]);
                                   minutes = matchArray[2] ? Number(String(matchArray[2]).replace(':', '')) : 0;
                                   seconds = matchArray[3] ? Number(String(matchArray[3]).replace(':', '')) : 0;
                                   ampm = null;
                                   timeMatched = true;
                                   isMil = true;
                               }
                           }

                           if (!matchArray) {
                               matchArray = value.match(dateyytimePat); // mm/dd/yy time 12 hour
                               if (matchArray != null) {
                                   if (parseInt(matchArray[5], 10) < sycb - (parseInt(sycb / 100, 10) * 100)) { // if 2 digit year is < 2 digit ShortYearCenturyBegin date
                                       year = parseInt(matchArray[5], 10) + currentCentury; // use current century
                                   }
                                   else { // if 2 digit year is >= 2 digit ShortYearCenturyBegin date
                                       year = parseInt(matchArray[5], 10) + (currentCentury - 100);  // use previous century
                                   }
                                   month = parseInt(matchArray[1], 10);
                                   day = parseInt(matchArray[3], 10);
                                   hours = Number(matchArray[7]);
                                   minutes = matchArray[2] ? Number(String(matchArray[9]).replace(':', '')) : 0;
                                   seconds = matchArray[3] ? Number(String(matchArray[10]).replace(':', '')) : 0;
                                   ampm = matchArray[12];
                                   // if PM convert to military
                                   if (ampm.toUpperCase() == "PM") {
                                       hours = hours == 12 ? 12 : hours + 12;
                                   } else if (hours == 12) {
                                       hours = 0;
                                   }

                                   isMil = true;
                                   dateMatched = true;
                                   timeMatched = true;
                               }
                           }

                           if (!matchArray) {
                               matchArray = value.match(dateyyyytimePat); // mm/dd/yyyy time 12 hour
                               if (matchArray != null) {
                                   year = parseInt(matchArray[5], 10);
                                   month = parseInt(matchArray[1], 10);
                                   day = parseInt(matchArray[3], 10);
                                   hours = Number(matchArray[7]);
                                   minutes = matchArray[2] ? Number(String(matchArray[9]).replace(':', '')) : 0;
                                   seconds = matchArray[3] ? Number(String(matchArray[10]).replace(':', '')) : 0;
                                   ampm = matchArray[12];
                                   // if PM convert to military
                                   if (ampm.toUpperCase() == "PM") {
                                       hours = hours == 12 ? 12 : hours + 12;
                                   } else if (hours == 12) {
                                       hours = 0;
                                   }

                                   isMil = true;
                                   dateMatched = true;
                                   timeMatched = true;
                               }
                           }

                           // validate the date and time field values
                           if (matchArray != null) {
                               if (dateMatched == true) {
                                   dateIsValid = true;
                                   if (month < 1 || month > 12) { // check month range between 1 and 12
                                       dateIsValid = false;
                                   }

                                   if (day < 1 || day > 31) { // Day must be between 1 and 31
                                       dateIsValid = false;
                                   }

                                   if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) { // months with 30 days
                                       dateIsValid = false;
                                   }

                                   if (month == 2) { // check for february 29th
                                       var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
                                       if (day > 29 || (day == 29 && !isleap)) {
                                           dateIsValid = false;
                                       }
                                   }
                               }

                               if (timeMatched == true) {
                                   timeIsValid = true;
                                   if (isMil == true) {
                                       if (hours > 24) {
                                           timeIsValid = false;
                                       }
                                   }
                                   else {
                                       if (hours > 12) {
                                           timeIsValid = false;
                                       }
                                   }
                               }

                               if ((dateMatched == true && timeMatched == true)) {
                                   if (dateIsValid == true && timeIsValid == true) {
                                       clearControl = false;
                                   }
                               } else if (dateMatched == true) {
                                   if (dateIsValid == true) {
                                       clearControl = false;
                                   }
                               } else {
                                   if (timeMatched == true) {
                                       if (timeIsValid == true) {
                                           clearControl = false;
                                       }
                                   }
                               }
                           }
                           else {
                               dateIsValid = false;
                               timeIsValid = false;
                           }

                           if (dateIsValid == true || timeIsValid == true) {
                               var mydate = null;
                               if (dateIsValid == true && timeIsValid == true) {
                                   mydate = new Date(year, month - 1, day, hours, minutes, seconds);
                               } else if (dateIsValid == true) {
                                   mydate = new Date(year, month - 1, day);
                               } else {
                                   var tmpDate = new Date();
                                   mydate = new Date(tmpDate.getFullYear(), tmpDate.getMonth() - 1, tmpDate.getDay(), hours, minutes, seconds);
                               }

                               if (mydate != "NaN") { // if the date is good and within the min max daterange of the control
                                   if ((mydate >= new Date(ctl.get_minDateStr())) && (mydate <= new Date(ctl.get_maxDateStr()))) {
                                       return mydate;
                                   }
                                   else {
                                       clearControl = true;
                                   }
                               }
                               else {
                                   clearControl = true;
                               }
                           }

                           if (clearControl == true) { //Clear the control's value and set focus
                               if (value != "") {
                                   ctl.set_value("");
                                   ctl.focus();
                               }
                           }
                       }
                   }
               }

               overrideParseDate();  // Call this function on page load

               function ajaxResponseEnd(sender, eventArgs) { // call this function for ajax postbacks
                   overrideParseDate();
               }

           </script>

   </telerik:RadScriptBlock>

removed the 12 h parser and edited the 24 h time parser regex pattern to this

var time24Pat = /^(2[0-4]|1\d|0?\d)?:?([0-5]\d)?:?([0-5]\d)?$/;

now
1512
151212
15:12
15:12:25
etc. are accepted as regular time and always parsed to HH:mm:ss now


Kind Regards

Fabian