如何使用Javascript在物化日期选择器中设置两个不同的日期？
在物化日期选择器中使用JavaScript设置两个不同的日期，可以通过以下步骤实现：
- 引入物化日期选择器库：首先需要在HTML文件中引入物化日期选择器的相关库文件，比如引入
Materialize CSS和Materialize DatePicker的CDN链接。 - 创建日期选择器的HTML元素：在HTML文件中，创建两个
input元素来显示日期选择器，并为它们分别设置唯一的id属性，例如datePicker1和datePicker2。 - 初始化日期选择器：使用JavaScript代码，在页面加载完成后，初始化日期选择器，将日期选择器与相应的
input元素进行关联。可以使用document.getElementById()方法获取日期选择器元素，并使用M.Datepicker.init()方法初始化日期选择器。 - 设置不同的日期：通过JavaScript代码，为不同的日期选择器设置不同的默认日期或范围。可以使用
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 日期选择器。
相关·内容
我用了两个物化的内裤。打开日期选择器后，我希望日期选择器显示/使用已经在html输入字段中的日期。我想到了onOpen回调，那里使用本机.setDate()函数。但是我得到了两个日期选择器，但是没有发现onOpen是否接受任何参数。document.querySelectorAll('.da
浏览 1提问于2021-05-06得票数 7
回答已采纳
我正在使用Materialize模板，我正在尝试创建2个不同的默认日期，这是今天和2天前的javascript如下： ? 但是，materialize使用defaultDate只允许一个默认日期，使用： var elems = document.querySelectorAll('.datepicker');
varinstances = M.Datepicker.init(elems, {defau
浏览 22提问于2020-10-07得票数 1
3回答
对于物化数据报警器，我已经找到了实现datepicker的min和max选项，但不知道如何设置两个相互关联使用的数据启动器，如下所示：
如果用户首先选择结束日期，他/她就不能在该结束日期之后选择一个开始日期。我不是一个javascript</
浏览 0提问于2016-04-11得票数 0
回答已采纳
3回答
我一直在用以下问题打破我的头.我有一个基本的和功能性的rails应用程序来记录事件，我使用脚手架来构建模型，用户可以用他们的日期时间记录事件，一切正常。然而，一旦我将“物化”添加到应用程序中，就会破坏表单中的所有日期时间、日期和时间选择器。在物化之后，Rails以我的形式生成的datetime
浏览 9提问于2015-10-06得票数 1
我已经创建了一个类，在这个类中我想为日期选择器设置两个不同的微调器。我想要这个是因为我想设置开始事件日期和结束事件日期，那么如何在一个类中使用日期选择器设置两个不同的微调器？提前谢谢。
浏览 1提问于2013-03-21得票数 0
我正在尝试使用物化CSS中的日期选择器，但是我得到了这个错误我的jquery:^3.3.1角度: 7.0.0
对于日期选择器和时间选择器，我都得到了相同的错误。但是我可以使用Jquery代码的其余部分，但这
浏览 0提问于2018-12-10得票数 0
回答已采纳
1回答
我正在为日期选择器使用物化css，并使用量角器测试它，如所示。当我尝试element(by.model('newPatReports.reportDate')).sendKeys('14 January, 2016');时，我无法设置值，而是打开日期选择器--这只发生在火狐上但是在chrome中，它说不能聚焦，element...What可能是与我的模型绑定<
浏览 3提问于2016-01-19得票数 1
回答已采纳
将类型日期添加到输入字段现在会产生一个基于浏览器的日期选择器。(如获支持)。
不过，这对触觉异常来说是一种幻想.当浏览市场的肉:火狐和互联网浏览器，类型日期是不支持的。
当不提供支持时，如何使用输入type="date"和javascript日期
浏览 3提问于2014-01-24得票数 11
回答已采纳
嗨，下面我显示了两个日期选择器，一个是从日期开始的，另一个是到date.but的，因为我采取了两种不同的方法，我是calling.but，使用单个函数，如何显示两个不同的日期选择器预期产出
浏览 2提问于2015-04-23得票数 0
回答已采纳
我正在使用jQuery日期选择器()。我尝试让用户从两个不同的日期范围中选择一个日期。我在文档中找不到该功能，我想知道如何使其成为可能。$("#rush_needed_by_english").datepick({
minDat
浏览 0提问于2010-03-08得票数 0
回答已采纳
5回答
我对web开发真的很陌生，在我的web中我需要有日期时间选择器，而我正在尝试使用的日期时间选择器，不幸的是我不能让它工作。这是我的javascript。<script> $( "#datepicker" ).datetimepicker();</script>
浏览 1提问于2012-02-03得票数 0
回答已采纳
目前我正在一个项目中使用来自的DateTimePicker。我有两个日期字段(开始日期和结束日期)，我希望以当前用户区域设置的格式显示日期。在Chrome中，我使用了一个插件，它允许我指定Accept-Language头文件，我将其设置为en-GB。Javascript内核可以很好地识别这一点，但是如果我在我的
浏览 6提问于2019-07-10得票数 0
我的页面中有两个jquery ui日期选择器，我想为每一个都应用一种特定的语言(假设德语表示一个日期选择器，意大利语表示另一个日期选择器)
现在问题来了:最后一个名为将其设置应用于所有日期选择器的语言文件(在本例中，意大利语应用于两个输入)。我正在使用下面的代码，我应该修改什么来将特定
浏览 0提问于2012-03-25得票数 5
回答已采纳
我在向具有bootstrap-datepicker字段的服务器提交表单时遇到错误。我现在该怎么做？Data missing$table->timestamp('dob'); // dob is date of birthprotected $dates =
浏览 1提问于2016-07-20得票数 1
嗨，所以我现在正在为我的项目使用物化和反应库。我真的很想使用他们的日期选择器，它必须用下面的javascript初始化。dropdown of 15 years to control year其中html由以下内容表示：
我将如何将此纳入我的反应项目
浏览 2提问于2016-09-04得票数 1
我已经在这里和其他网站上查看了一堆不同的帖子，以便将两个日期添加到一起，但出于某种原因，每个人都想使用'Now‘。
我想知道如何将两个不同的日期添加在一起，而这两个日期现在都不是！同样值得注意的是，我在页面上将它设置为dateTime选择器的值。如果不明显，我的页面
浏览 0提问于2013-01-28得票数 1
回答已采纳
我有一个根据卖家的语言偏好进行本地化的jQuery日期选择器。每个datepicker定制都有不同的日期格式，但我希望表单提交时的输入采用特定的格式进行解析。我尝试在日期选择器上使用altFormat将其设置为'mm/dd/yy‘，但我不希望日期以显示给用户的格式显示。有没有办法做
浏览 0提问于2013-05-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
