快速上手

前言

layDate是Layui团队荣耀出品, 感谢Layui团队.

自我介绍

我们一贯的风格就是拒绝重复发明轮子, 选型layDate作为ag-ui的日期时间选择器的补充, 我们在它基础上优化了样式.

基础用法


//中文版
laydate.render({
  elem: '#chinese-version'
});

//国际版
laydate.render({
  elem: '#internation-version'
  ,lang: 'en'
});
显示代码 隐藏代码

其他选择器


  //年选择器
  laydate.render({
    elem: '#year-selector'
    ,type: 'year'
  });

  //年月选择器
  laydate.render({
    elem: '#year-month-selector'
    ,type: 'month'
  });

  //时间选择器
  laydate.render({
    elem: '#time-selector'
    ,type: 'time'
  });

  //日期时间选择器
  laydate.render({
    elem: '#date-time-selector'
    ,type: 'datetime'
  });
显示代码 隐藏代码

范围选择


  //日期范围
  laydate.render({
    elem: '#date-scope'
    ,range: true
  });

  //年范围
  laydate.render({
    elem: '#year-scope'
    ,type: 'year'
    ,range: true
  });

  //年月范围
  laydate.render({
    elem: '#year-month-scope'
    ,type: 'month'
    ,range: true
  });

  //时间范围
  laydate.render({
    elem: '#time-scope'
    ,type: 'time'
    ,range: true
  });

  //日期时间范围
  laydate.render({
    elem: '#date-time-scope'
    ,type: 'datetime'
    ,range: true
  });
显示代码 隐藏代码

自定义格式


  //选择日期
  laydate.render({
    elem: '#date-select'
    ,format: 'yyyy年MM月dd日'
  });

  //选择日期 自定义格式
  laydate.render({
    elem: '#date-select-1'
    ,format: 'dd/MM/yyyy'
  });

  //选择月份
  laydate.render({
    elem: '#month-select'
    ,format: 'yyyyMM'
  });

  //选择时间
  laydate.render({
    elem: '#time-select'
    ,type: 'time'
    ,format: 'H点M分'
  });

  //选择范围
  laydate.render({
    elem: '#scope-select'
    ,type: 'month'
    ,range: '~'
    ,format: 'yyyy-MM'
  });

  //选择范围 带有时间
  laydate.render({
    elem: '#scope-select-1'
    ,type: 'datetime'
    ,range: '到'
    ,format: 'yyyy年M月d日H时m分s秒'
  });
显示代码 隐藏代码

公历节日和自定义重要日子


  //开启公历节日
  laydate.render({
    elem: '#calendar-festival'
    ,calendar: true
  });

  //自定义重要日
  laydate.render({
    elem: '#definition-day'
    ,mark: {
      '0-10-14': '生日'
      ,'0-12-31': '跨年' //每年的日期
      ,'0-0-10': '工资' //每月某天
      ,'0-0-15': '月中'
      ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
      ,'2099-10-14': '呵呵'
    }
    ,done: function(value, date){
      if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
        alert('这一天是：中国人民抗日战争胜利72周年');
      }
    }
  });
显示代码 隐藏代码

控制可选的日期与时间


  //限定可选日期
  var ins22 = laydate.render({
    elem: '#restrict-date'
    ,min: '2016-10-14'
    ,max: '2080-10-14'
    ,ready: function(){
      ins22.hint('日期可选值设定在 
 2016-10-14 到 2080-10-14');
    }
  });

  //前后若干天可选，这里以7天为例
  laydate.render({
    elem: '#some-day'
    ,min: -7
    ,max: 7
  });

  //限定可选时间
  laydate.render({
    elem: '#restrict-time'
    ,type: 'time'
    ,min: '09:30:00'
    ,max: '17:30:00'
    ,btns: ['clear', 'confirm']
  });
显示代码 隐藏代码

同时绑定多个


  //同时绑定多个
  lay('.multiple-bindings').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click'
    });
  });
显示代码 隐藏代码

其它功能示例


  //初始赋值
  laydate.render({
    elem: '#initial-value'
    ,value: '1989-10-14'
  });

  //选中后的回调
  laydate.render({
    elem: '#on-call-back'
    ,done: function(value, date){
      alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
    }
  });

  //日期切换的回调
  laydate.render({
    elem: '#date-call-back'
    ,change: function(value, date){
      alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));
    }
  });

  //不出现底部栏
  laydate.render({
    elem: '#not-bottom'
    ,showBottom: false
  });

  //只出现确定按钮
  laydate.render({
    elem: '#only-affirm'
    ,btns: ['confirm']
  });

  //自定义事件
  laydate.render({
    elem: '#custom-event'
    ,trigger: 'mousedown'
  });

  //点我触发
  laydate.render({
    elem: '#click-trigger'
    ,eventElem: '#click-trigger-1'
    ,trigger: 'click'
  });

  //双击我触发
  lay('#dblclick-trigger-1').on('dblclick', function(){
    laydate.render({
      elem: '#dblclick-trigger'
      ,show: true
      ,closeStop: '#dblclick-trigger-1'
    });
  });

  //日期只读
  laydate.render({
    elem: '#date-readonly'
    ,trigger: 'click'
  });

  //非input元素
  laydate.render({
    elem: '#not-input'
  });
显示代码 隐藏代码

直接嵌套显示


  //中文
  laydate.render({
    elem: '#nest-chinese'
    ,position: 'static'
  });

  //英文
  laydate.render({
    elem: '#nest-english'
    ,position: 'static'
    ,lang: 'en'
  });

  //月份
  laydate.render({
    elem: '#nest-month'
    ,type: 'month'
    ,position: 'static'
  });

  //时间
  laydate.render({
    elem: '#nest-time'
    ,type: 'time'
    ,position: 'static'
  });
显示代码 隐藏代码