jQuery input 无论选选择哪个日期永远都是默认早上8:00|极客教程

jQuery input 无论选选择哪个日期永远都是默认早上8:00

在网页开发中，经常会遇到需要用户输入日期和时间的需求。对于一些日程安排或预约系统，我们希望用户选择日期之后，时间默认显示为早上8点。本文将介绍如何利用jQuery实现这一功能。

HTML结构

首先，我们需要在HTML中定义一个日期选择器和一个时间选择器的输入框，以及一个用于显示最终结果的div元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default Time Selection</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label for="date">Choose a date: </label>
<input type="date" id="date">

<label for="time">Choose a time: </label>
<input type="time" id="time">

<div id="result"></div>

<script src="script.js"></script>
</body>
</html>

jQuery实现

接下来，我们编写JavaScript代码来实现日期选择后时间默认为早上8点的功能。

$(document).ready(function() {
  $('#date').change(function() {
    var date = $(this).val(); // 获取选择的日期

    var time = '08:00'; // 默认时间为早上8点

    $('#time').val(time); // 将默认时间设置到时间选择器的输入框

    $('#result').text('You have chosen ' + date + ' at ' + time); // 在div中显示选择的日期和时间
  });
});

在以上代码中，我们使用了jQuery的change事件监听日期选择的变化，当日期选择发生变化时，获取所选的日期并将默认时间设置为早上8点，然后更新时间选择器的输入框和显示选择结果的div。

通过以上方法，我们可以实现在网页中使用jQuery实现日期选择后时间默认为早上8点的功能，为用户提供更便捷的操作体验。