laydate自定义开始日期和结束日期

最新推荐文章于 2022-10-27 14:06:05 发布

咸鱼粑粑

最新推荐文章于 2022-10-27 14:06:05 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：日期控件那些事儿文章标签： laydate 日期控件时间控件开始时间结束时间

本文链接：https://blog.youkuaiyun.com/caottao9527/article/details/79235297

日期控件那些事儿专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何利用laydate这个日期控件来设置并限制输入的开始日期和结束日期，提供了一种在前端开发中解决日期选择范围限制的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于苦于没有找到好用的开始日期和结束日期限制的日历工具，偶然间遇到了这个，感觉很实用，所以记录了下来，方便以后随时查阅使用。

laydate.render({
elem: '#test1',  //指定元素
type:'datetime',  //可选择：年月日时分秒
format: 'yyyy/MM/dd HH:mm:ss',  //时间格式  
min: -0,  //最小日期为当前日期的前一天 
max: '2222-06-16 23:59:59',  //最大日期
theme: '#393D49'  //自定义主题颜色
});

这是基本的样式，type里面的date设置日期，time设置时分秒。

1、我有两个input框，需要限制开始日期和结束日期：

<input placeholder="开始日期" class="" id="beginTime" name="">    
<input placeholder="结束日期" class="" id="endTime" name="">

//开始时间
var start = laydate.render({
elem: '#beginTime',
type:'datetime',  //可选择：年月日时分秒
min: -0,  //最小日期为当前日期的前一天 
max: '2099-6-16 23:59:59',
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
end.config.min = {
year: date.year,
 month: date.month - 1,
 date: date.date,
 hours: date.hours,
 minutes: date.minutes,
 seconds: date.seconds
}; //开始日选好后，重置结束日的最小日期
end.config.value = {
  year: date.year,
  month: date.month - 1,
  date: date.date,
   hours: date.hours,
  minutes: date.minutes,
  seconds: date.seconds
}; //将结束日的初始值设定为开始日
}
});
//结束时间
var end = laydate.render({
elem: '#endTime',
type:'datetime',  //可选择：年月日时分秒
min: -0,  //最小日期为当前日期的前一天 
max: '2099-6-16 23:59:59',
trigger: 'click', //采用click弹出
done: function (value, date, endDate) {
start.config.max = {
 year: date.year,
 month: date.month - 1,
 date: date.date,
 hours: date.hours,
 minutes: date.minutes,
 seconds: date.seconds
 }; //结束日选好后，重置开始日的最大日期
}
 });