Eonasdan datetime picker是一个常用的日期时间选择器插件,用于在前端页面中选择日期和时间。根据输入的另一个日期设置时间输入的mindate,可以通过以下步骤实现:
以下是一个示例代码,演示如何根据Eonasdan datetime picker中输入的另一个日期设置时间输入的mindate:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div class="container">
<div class="form-group">
<label for="date-input">日期:</label>
<input type="text" id="date-input" class="form-control">
</div>
<div class="form-group">
<label for="time-input">时间:</label>
<input type="text" id="time-input" class="form-control">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
// 初始化日期时间选择器
$('#date-input').datetimepicker({
format: 'YYYY-MM-DD',
// 设置时间输入的mindate属性
minDate: moment().subtract(1, 'days') // 示例:设置mindate为前一天
});
// 监听日期输入框的值变化
$('#date-input').on('dp.change', function(e) {
var selectedDate = e.date;
var minTime = moment(selectedDate).startOf('day'); // 设置mindate为选中日期的开始时间
$('#time-input').data('DateTimePicker').minDate(minTime);
});
// 初始化时间选择器
$('#time-input').datetimepicker({
format: 'HH:mm:ss'
});
});
</script>
</body>
</html>
在上述示例中,我们使用了Bootstrap、jQuery、moment.js和Eonasdan datetime picker插件。通过设置minDate
属性和监听日期输入框的值变化事件,实现了根据另一个日期设置时间输入的mindate。
请注意,示例中的代码仅供参考,具体实现可能需要根据具体情况进行调整。另外,腾讯云提供了一系列云计算相关产品,如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。具体产品介绍和文档可以在腾讯云官方网站上找到。
领取专属 10元无门槛券
手把手带您无忧上云