jQuery Input 当前日期的实现方法

在前端开发中，我们经常需要使用到日期输入框，而jQuery作为一个强大的JavaScript库，提供了丰富的API来帮助我们实现这一功能，本文将详细介绍如何使用jQuery来实现一个可以显示当前日期的输入框。

我们需要引入jQuery库，在HTML文件中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们在HTML文件中创建一个输入框，并为其添加一个id，以便后续使用jQuery进行操作：

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

我们可以使用jQuery的ready函数来确保页面加载完成后再执行我们的代码，在这个函数中，我们将获取当前日期，并将其设置为输入框的值：

$(document).ready(function() {
  var currentDate = new Date();
  $('#dateInput').val(currentDate);
});

以上代码实现了一个简单的功能，即在页面加载完成后，将当前日期设置为输入框的值，这只是一个基本的功能，实际应用中可能需要更复杂的日期选择器，为了实现这个功能，我们可以使用jQuery UI库中的datepicker插件。

我们需要引入jQuery UI库和datepicker插件，在HTML文件中添加以下代码：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

接下来，我们在HTML文件中创建一个输入框，并为其添加一个id和一个class，以便后续使用jQuery UI进行操作：

<input type="text" id="dateInput" class="date-picker">

我们在JavaScript文件中编写如下代码，以初始化日期选择器：

$(document).ready(function() {
  $('.date-picker').datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText) {
      console.log('Selected date: ' + dateText);
    }
  });
});

以上代码实现了一个日期选择器，用户可以通过点击输入框来选择一个日期，当用户选择一个日期后，onSelect事件会被触发，我们可以在这个事件的回调函数中处理选中的日期，我们可以将选中的日期显示在控制台中：

console.log('Selected date: ' + $(this).val());

通过以上步骤，我们实现了一个可以使用jQuery和jQuery UI库实现的当前日期输入框，在实际开发中，我们还可以根据需求对日期选择器进行更多的定制，例如设置最小可选日期、最大可选日期等，希望本文能对您在前端开发中实现日期输入框的功能提供帮助。