jQuery实现简单的日期输入格式化控件

实现简单的日期输入格式化控件可以让用户输入日期时更加方便和准确，下面我将介绍如何使用jQuery实现这一功能的完整攻略。

步骤1：引入jQuery库

首先，需要在html文件中引入jQuery库，可以通过以下代码获取最新版的jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤2：定义日期输入框

在html文件中定义一个input标签，用于用户输入日期：

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

步骤3：编写jQuery代码

使用jQuery编写代码，实现格式化日期输入框的功能。具体步骤如下：

1. 选择日期输入框

var dateInput = $('#dateInput');

1. 绑定事件处理函数

dateInput.on('keyup', function() {
  // ...
});

1. 获取输入框中的值

var value = dateInput.val();

1. 格式化输入框中的值

var formattedValue = formatValue(value);

1. 更新输入框中的值

dateInput.val(formattedValue);

1. 编写格式化函数

function formatValue(value) {
  // ...
}

格式化函数实现的功能是将用户输入的日期格式化成标准的日期格式，比如将"20211001"格式化成"2021-10-01"。

下面是一个完整的示例代码，实现将用户输入的日期格式化成"YYYY-MM-DD"的格式：

$(function () {
  var dateInput = $('#dateInput');
  dateInput.on('keyup', function() {
    var value = dateInput.val();
    var formattedValue = formatValue(value);
    dateInput.val(formattedValue);
  });

  function formatValue(value) {
    // 使用正则表达式匹配输入框中的数字
    var date = value.match(/^(\d{4})(\d{2})(\d{2})$/);
    // 如果匹配成功，则返回格式化后的日期
    if (date) {
      return date[1] + '-' + date[2] + '-' + date[3];
    }
    return value;
  }
});

示例1：限制日期范围

下面是一个示例代码，限制用户只能输入当天之前的日期：

$(function () {
  var dateInput = $('#dateInput');
  dateInput.on('keyup', function() {
    var value = dateInput.val();
    var formattedValue = formatValue(value);
    dateInput.val(formattedValue);
  });

  function formatValue(value) {
    var date = value.match(/^(\d{4})(\d{2})(\d{2})$/);
    if (date) {
      // 获取当前日期
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      var day = today.getDate();
      if (day < 10) {
        day = '0' + day;
      }
      var currentDate = year + '' + month + '' + day;
      // 获取输入日期
      var inputDate = date[1] + '' + date[2] + '' + date[3];
      // 如果输入日期大于当前日期，则返回空字符串
      if (inputDate > currentDate) {
        return '';
      }
      // 格式化日期
      return date[1] + '-' + date[2] + '-' + date[3];
    }
    return value;
  }
});

示例2：自动添加分隔符

下面是一个示例代码，实现在用户输入日期时自动添加分隔符：

$(function () {
  var dateInput = $('#dateInput');
  dateInput.on('keyup', function() {
    var value = dateInput.val();
    var formattedValue = formatValue(value);
    dateInput.val(formattedValue);
  });

  function formatValue(value) {
    // 匹配输入框中的数字
    var date = value.match(/\d{1,4}/g);
    // 如果匹配成功
    if (date) {
      // 使用分隔符(“-”或“/”)
      var separator = '-';
      // 如果输入框中已经有分隔符，则使用相同的分隔符
      var oldSeparator = value.match(/-|\//);
      if (oldSeparator) {
        separator = oldSeparator[0];
      }
      // 组装日期字符串
      var dateStr = '';
      for (var i = 0; i < date.length; i++) {
        dateStr += date[i];
        if (i < date.length - 1) {
          dateStr += separator;
        }
      }
      return dateStr;
    }
    return value;
  }
});

通过上述两个示例代码可以看到，使用jQuery实现简单的日期输入格式化控件可以方便地实现日期格式化、日期限制等功能，优化用户输入体验，提升网站的易用性。