layDate时间组件的运用（附下载layDate-v5.3.1）

下面编程教程网小编给大家介绍一下关于layDate时间组件的运用方法（附下载layDate-v5.3.1）。

1、下载layDate-v5.3.1，引入laydate.js

下载layDate-v5.3.1：点击下载

2、input组件：

<input type="text" id="test1">

3、调用方法：

//初始赋值
laydate.render({
  elem: '#test1'
  ,value: '1989-10-14'
});
//选中后的回调
laydate.render({
  elem: '#test2'
  ,done: function(value, date){
    alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
  }
});
//日期切换的回调
laydate.render({
  elem: '#test3'
  ,change: function(value, date){
    alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));
  }
});
//不出现底部栏
laydate.render({
  elem: '#test4'
  ,showBottom: false
});
//只出现确定按钮
laydate.render({
  elem: '#test5'
  ,btns: ['confirm']
});
//自定义事件
laydate.render({
  elem: '#test6'
  ,trigger: 'mousedown'
});
//点我触发
laydate.render({
  elem: '#test7'
  ,eventElem: '#test7-1'
  ,trigger: 'click'
});
//双击我触发
lay('#test8-1').on('dblclick', function(){
  laydate.render({
    elem: '#test8'
    ,show: true
    ,closeStop: '#test8-1'
  });
});
//日期只读
laydate.render({
  elem: '#test9'
  ,trigger: 'click'
});
//非input元素
laydate.render({
  elem: '#test10'
});

以上是编程学习网小编为您介绍的“layDate时间组件的运用（附下载layDate-v5.3.1）”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。