使用javascript将文本框中的用户输入格式化为HH:mm:ss

问题描述 投票:0回答:3

我只使用javascript,没有JQuery格式化和验证时间字段(asp:textbox)时遇到了问题。我希望用户在文本框中输入6个数字,如果它们有效,则插入冒号,但不允许用户输入无效数字。因此,如果插入的时间是235959,无论是在离开现场还是实时,格式为23:59:59。或者如果输入的数字无效,就像25小时输入一样,用户甚至无法输入25中的5。我根本没有处理时间,我真的很挣扎。

我必须承认,我认为这会更容易。我主要是在网上搜索论坛,并且只能实现解决方案的一部分,比如我能够插入冒号,但也不能验证数字。示例:如果以小时形式输入24,则更改为00.我可以单独轻松完成此操作,但我认为我正在努力让所有部分一起工作。希望我能充分解释自己。我还尝试了一系列if语句来验证时间,但这非常混乱。

我在网上找到了这个冒号插入功能,但无法使用数字验证。

Update1:​​刚尝试在intValidNum中嵌套intFieldLength,所以如果前两个数字小于24,那么执行intFieldLength,但这不起作用。仍然在尝试!

Update2:删除了intFieldLength var只是为了我的可读性。添加了一些代码以尝试强制用户输入正确的小时,​​如果他们以小时形式输入24,它将转换为00.尝试类似于当前的分钟和秒...

Update3:添加切片以选择mm和“<60”条件。试图添加“== 60”条件,这样如果mm为60,则返回00。

<asp:TextBox ID="txtEndTime" runat="server" MaxLength="8" placeholder="HH:MM:SS" onkeypress="formatTime(this)" />

function formatTime(timeInput) {

  intValidNum = timeInput.value;

  if (intValidNum < 24) {
    if (intValidNum.length == 2) {
      timeInput.value = timeInput.value + ":";
      return false;
    }
  }
  if (intValidNum == 24) {
    if (intValidNum.length == 2) {
      timeInput.value = timeInput.value.length - 2 + "0:";
      return false;
    }
  }
  if (intValidNum > 24) {
    if (intValidNum.length == 2) {
      timeInput.value = "";
      return false;
    }
  }

//Here is where I had trouble targeting the
//mm and ss in order to add conditions (see hh above).
//I used slice to assist me.
//Please let me know if any of you have suggestions/enhancements/corrections.

  if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
    timeInput.value = timeInput.value + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":00:";
    return false;
  }


  if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":";
    return false;
  }
  if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":00";
    return false;
  }

} //end function
<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />
javascript asp.net vb.net
3个回答
0
投票

你可能已经看过了。但为了以防万一,我相信这就是你要找的东西。

Enter IN TIME and OUT TIME in HH:MM format

关于你是如何做到这一点需要注意的是,你可能需要读取整数> -1和<240000,将其传递给字符串,然后将字符串切片到你想要的内容。


0
投票

试试这个

String dateString = dateTextBox.Text;
String formats = "MM/dd/yyyy";
DateTime dateValue;

if (DateTime.TryParseExact(dateString, formats, 
                              new CultureInfo("en-US"), 
                              DateTimeStyles.None, 
                              out dateValue))
{
    // That means the value of the date is in the specified format..
}

别忘了使用System.Globalization;


0
投票

看起来我回答了我的问题,但是会喜欢建议/更正/改进!

function formatTime(timeInput) {

  intValidNum = timeInput.value;

  if (intValidNum < 24 && intValidNum.length == 2) {
      timeInput.value = timeInput.value + ":";
      return false;  
  }
  if (intValidNum == 24 && intValidNum.length == 2) {
      timeInput.value = timeInput.value.length - 2 + "0:";
      return false;
  }
  if (intValidNum > 24 && intValidNum.length == 2) {
      timeInput.value = "";
      return false;
  }

  if (intValidNum.length == 5 && intValidNum.slice(-2) < 60) {
    timeInput.value = timeInput.value + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":";
    return false;
  }
  if (intValidNum.length == 5 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 2) + ":00:";
    return false;
  }


  if (intValidNum.length == 8 && intValidNum.slice(-2) > 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":";
    return false;
  }
  if (intValidNum.length == 8 && intValidNum.slice(-2) == 60) {
    timeInput.value = timeInput.value.slice(0, 5) + ":00";
    return false;
  }



} //end function
<input id="txtStartTime" type="text" placeholder="HH:MM:SS" onkeypress="formatTime(this)" MaxLength="8" />
© www.soinside.com 2019 - 2024. All rights reserved.