在物化日期选择器中使用JavaScript设置两个不同的日期,可以通过以下步骤实现:
Materialize CSS
和Materialize DatePicker
的CDN链接。input
元素来显示日期选择器,并为它们分别设置唯一的id
属性,例如datePicker1
和datePicker2
。input
元素进行关联。可以使用document.getElementById()
方法获取日期选择器元素,并使用M.Datepicker.init()
方法初始化日期选择器。setDefaultDate()
或setDateRange()
方法来设置默认日期或日期范围。具体根据需求来决定使用哪个方法。下面是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<input type="text" id="datePicker1" class="datepicker">
<input type="text" id="datePicker2" class="datepicker">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var datePicker1 = document.getElementById('datePicker1');
var datePicker2 = document.getElementById('datePicker2');
M.Datepicker.init(datePicker1, {
defaultDate: new Date(2022, 0, 1) // 设置第一个日期选择器的默认日期为2022年1月1日
});
M.Datepicker.init(datePicker2, {
defaultDate: new Date(2022, 11, 31) // 设置第二个日期选择器的默认日期为2022年12月31日
});
});
</script>
</body>
</html>
在上面的示例中,通过使用M.Datepicker.init()
方法初始化日期选择器,并通过defaultDate
属性设置了不同的默认日期。你可以根据自己的需求进行修改,设置不同的日期或日期范围。
此外,如果你想了解更多关于物化日期选择器的信息,可以参考腾讯云提供的产品 Datepicker 日期选择器。
领取专属 10元无门槛券
手把手带您无忧上云