jquery text box changes time format

jQuery is an open source framework based on the JavaScript language. It provides a simple, efficient, and time-saving way to process JavaScript code. In the process of web development, the text box is one of the commonly used form elements, and it is usually necessary to limit or convert the time format entered in the text box. This article will introduce how to use jQuery to change the time format in a text box.

First, add a text box element to the HTML page and assign it an id attribute.

<input type="text" id="mydate" />

Then, write code in the JavaScript file to handle the time format in the text box. We can use jQuery's val() function to get the value in the text box, and then use JavaScript's Date object to convert the format. The specific code is as follows:

$(document).ready(function() {
  // 监听文本框改变事件
  $('#mydate').on('change', function() {
    // 获取文本框中的值
    var dateString = $(this).val();
    // 将字符串转换为Date对象
    var dateObj = new Date(dateString);
    // 转换为指定格式的字符串
    var newDateString = dateObj.getFullYear() + '-' + (dateObj.getMonth()+1) + '-' + dateObj.getDate();
    // 在文本框中显示转换后的值
    $(this).val(newDateString);
  });
});

Explain the specific process of the code. First, use jQuery's ready() function to specify what to do after the page has finished loading. Then, listen to the change event of the text box, which is an event triggered when the user enters or changes a value in the text box. In the event handling function, use the val() function to get the value in the text box and convert it to a Date object. What needs to be noted here is that the parameter format of the Date object must be the correct date format, otherwise the conversion will fail. Next, convert the Date object to a string according to the required time format and assign it back to the text box using the val() function.

In actual development, you may encounter many different time formats and requirements. At this time, we can extend the above code and add more format conversion functions. The following is an example to convert the time format into the form of "Year-Month-Day Hour:Minute:Second".

$(document).ready(function() {
  $('#mydate').on('change', function() {
    var dateString = $(this).val();
    var dateObj = new Date(dateString);
    var year = dateObj.getFullYear();
    var month = addLeadingZero(dateObj.getMonth()+1);
    var date = addLeadingZero(dateObj.getDate());
    var hours = addLeadingZero(dateObj.getHours());
    var minutes = addLeadingZero(dateObj.getMinutes());
    var seconds = addLeadingZero(dateObj.getSeconds());
    var newDateString = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
    $(this).val(newDateString);
  });
  
  // 日期、月份、小时、分钟、秒钟前面加0
  function addLeadingZero(num) {
    return (num < 10) ? '0' + num : num;
  }
});

In the above code, we define a function called addLeadingZero, which is used to format numbers into two digits. This function can be used to format months, dates, hours, minutes, and seconds.

To summarize, using jQuery to change the time format in a text box requires the following steps: first listen to the change event of the text box, then get the value in the text box and convert it to a Date object, and then convert the Date object Convert it to a string in the required format, and finally assign the string value back to the text box. If you want to perform more complex format conversion, you can use JavaScript's built-in Date object and some custom functions to complete it.

The above is the detailed content of jquery text box changes time format. For more information, please follow other related articles on the PHP Chinese website!