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

2 posts, 0 answers
  1. Fabian
    Fabian  avatar
    15 posts
    Member since:
    Feb 2009

    Posted 04 Jan 2011 Link to this post

    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

  2. Fabian
    Fabian  avatar
    15 posts
    Member since:
    Feb 2009

    Posted 05 Jan 2011 Link to this post

    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






Back to Top