建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS日历插件laydate.js

来源:易助科技网浏览量:15收藏

简介


ayDate是一款JS日历插件,除了包含日期范围限制、开始日期设定、时分秒选择、智能响应、自动纠错、节日识别,快捷键操作等常规功能外,还拥有更多趋近完美的解决方案。


JS日历插件laydate.js-示例图


它具有以下特定:


1)科学的接口设计

她并不提倡API的数量性,而是尽可能呈现最人性合理的接口,减少使用成本。

2)一流的代码驱动

layDate完全用原生JavaScript实现,代码采用自由灵活风格,内部封装了众多轻量级的方法引擎,保证了良好的速度体验和接近于零的代码冗余。

3)人性的皮肤体系

她非常注重外观设计,因此她提供了非常强大的皮肤选择支持,不仅官方会提供海量的皮肤下载,您还可以很方便地按照喜好去自定义皮肤,我们非常欢迎您能够贡献皮肤包,具体操作事宜请查看皮肤库页面。


参数说明:


options是一个对象,它包含了以下key: 
\'默认值\'
elem: \'#id\',
// 日期显示元素选择器,laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式
\'#id .class\'
event: \'click\',
// 触发事件。如果没有传入event,则按照默认的click
format: \'YYYY-MM-DD hh:mm:ss\', 
// 日期格式
istime: false,
// 是否开启时间选择
isclear: true,
// 是否显示清空
istoday: true,
// 是否显示今天
issure: true,
// 是否显示确认
festival: true,
// 是否显示节日
min: \'1900-01-01 00:00:00\',
// 最小日期
max: \'2099-12-31 23:59:59\',
// 最大日期
start: \'2014-6-15 23:00:00\',
// 开始日期
fixed: false,
// 是否固定在可视区域
zIndex: 99999999,
// css z-index
choose: function(dates){  // 选择好日期的回调}


(下载的附件中包含有多种皮肤和DEMO)



使用


1.  引入 laydate.js 文件


2.  简单使用


// 开始时间
var start = laydate.render({
  elem: '#startTime',
  theme: 'molv',
  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',
  theme: 'molv',
  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
    }; 
    //结束日选好后,重置开始日的最大日期
  }
});



相关链接


GitHub 地址 :https://github.com/lousaibiao/laydate