js日期 layDate.js插件

laydate 显示结束时间不小于开始时间的实例

jsp：

?

1 2 3 4 5

< div class = "form-group" >    < label >交易时间:</ label >      < input placeholder = "开始日期" class = "form-control layer-date" id = "startDate" name = "startDate" >      < input placeholder = "结束日期" class = "form-control layer-date" id = "endDate" name = "endDate" > </ div >

js：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

< script type = "text/javascript" > var start = {        elem: '#startDate',        format: 'YYYY-MM-DD',        max: laydate.now(),        istime: false,        istoday: false,        choose: function (datas) {          end.min = datas; //开始日选好后，重置结束日的最小日期          end.start = datas //将结束日的初始值设定为开始日        }      };      var end = {        elem: '#endDate',        format: 'YYYY-MM-DD',        max: laydate.now(),        istime: false, //是否开启时间选择        istoday: false,        isclear: true, //是否显示清空        issure: true, //是否显示确认        choose: function (datas) {          start.max = datas; //结束日选好后，重置开始日的最大日期        }      };      laydate(start);      laydate(end);      //给input赋值      $('#startDate').val(laydate.now(-30, 'YYYY-MM-DD'));       $('#endDate').val(laydate.now(0, 'YYYY-MM-DD')); </ script >

layDate.js的使用避免了我们在写万年历等日历的操作，只需引入layDate.js即可

//引入layDate.js
<script type="text/javascript" src="laydate/laydate.js"></script>//src要改为自己的路径

html代码

<input type="text" id="test1" placeholder="请选择日期">

js代码

<script>
//type 控件选择器  默认值为date
// year 年份选择器 只提供年列表选择
// month（年月选择器）只提供年、月选择
// date（日期选择器）可选择：年、月、日。type默认值，一般可不填
// time （时间选择器）只提供时、分、秒选择
// datetime（日期时间选择器）可选择：年、月、日、时、分、秒
laydate.render({
    elem:'#test1'
    ,type:'date'//默认为date
    ,trigger:'click'//默认为click，即点击后出现日历框
})
</script>

date.png

<script>
//format 自定义格式
//默认格式 yyyy-MM-dd
laydate.render({
    elem:'#test1'
    ,type:'date'//默认为date
    ,format:'yyyy年MM月dd日'
})
</script>

�format.png

<script>
//value 初始值
//默认值 new Date()
laydate.render({
    elem:'#test1'
    ,type:'date'//默认为date
    //,value:new Date(2555677741)//括号中的为毫秒数
    ,value:2019-08-13' //value 的格式必须与设置的format的格式相同
})
</script>

valuepng

// range - 开启左右面板范围选择,一般默认为false
//当设置为true时，可以选择范围
laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义分割字符
  ,min:-7
  ,max:7
});

A05FA884-837F-4CF0-B924-252ED0998239.png

//min/max 设置选择日期的最小值和最大值
// 类型：string，默认值：min: '1900-1-1'、max: '2099-12-31'
// 设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：
// 1.  如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
// 2.  如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
// 3.  如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义分割字符
  ,min:-7//当前日期的过去七天
  ,max:7//当前日期的未来七天
});

min/max.png

// trigger - 自定义弹出控件的事件
// 类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click
laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义
  ,trigger:'mouseenter'//鼠标移入日历表出现
});

//lang 语言
// 类型：String，默认值：cn
// 我们内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。这里并没有开放自定义文字，是为了避免繁琐的配置。
laydate.render({
  elem: '#test1'
  ,lang:'en'
});

cn.png

en.png

//mark 标记
//可以标出特殊日子，建立备忘录
laydate.render({
  elem: '#test1'
  ,lang:'en'
  ,mark:{
      ,'0-6-1':'儿童节'
      ,'0-11-11':'光棍节'
}
});

67D32D78-B588-4519-9F88-F7B4F3A83F11.png

//theme  �主题
//类型：String，默认值：default
//theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
laydate.render({
  elem: '#test1'
  ,lang:'en'
  ,theme:'molv'
});