基于javascript的日期时间滑动选择器; 支持date,time,datetime,diy模式.
博客教程:
在线演示地址:
##预览.
###全部效果
##示例
###基本使用
- 添加样式文件到页面
<link rel="stylesheet" href="../dest/datetime.min.css"> - 添加脚本文件到页面
<script src="../dest/datetime.min.js"></script> - 在页面添加
<div class="ui-datetime" id="datetime"></div> - 添加如下代码.
var datetime = new DateTime(document.getElementById("datetime"), null);
datetime.init();###jQuery插件使用
- 添加jQuery依赖.
- 添加样式文件到页面
<link rel="stylesheet" href="../dest/datetime.min.css"> - 添加脚本文件到页面
<script src="../dest/JQuery.datetime.min.js"></script> - 在页面添加
<div class="ui-datetime" id="datetime"></div> - 添加如下代码.
$("#datetime2").datetime({
type: 'date',
date: new Date(),
minDate: new Date(),
maxDate: new Date(),
onChange: function (data) {
console.log("call back", data);
}
});##配置选项
###默认配置
{
type: 'date',
date: new Date(),
minDate: new Date(),
maxDate: new Date(),
data: [{
key: 'day',
resource: ["上午", "下午"],
value: "上午",
unit: ''
}, {
key: 'hour',
resource: ["21", "22", "23", "01", "02", "03", "04", "05", "06", "07"],
value: "22",
unit: ''
}, {
key: 'minute',
resource: ["00", "30"],
value: "00",
unit: ''
}],
onChange: function (data) {
console.log("call back", data);
}
};###type
String. 默认值:date.
DateTimePicker显示的类型.
接受的值:
- date
- time
- datetime
- diy
###date
Date.默认值:当前日期.
当前选中的值.
###minDate
Date.默认值:当前日期.
开始时间.
###maxDate
Date.默认值:当前日期.
结束时间.
###data
Object.
{
key: 'day',
resource: ["上午", "下午"],
value: "上午",
unit: ''
}- key.
- resource.显示的项
- value. 选中的值
- unit. 单位
###onChange
Function.
回调函数.
当DateTimePicker的选择的值改变时回调此函数.
onChange: function (data) {
console.log("call back", data);
}##方法
###1. constructor
DateTime(ele,options)
- ele:DOM节点
- options: 配置信息
var datetime = new DateTime(ele,options);###2. init
初始化DateTimePicker.
var datetime = new DateTime(...);
datetime.init();###3. refreshEventBinder
为DateTimePicker绑定滑动事件.
通常不需要调用此方法;因为在DateTimePicker内部已经调用.
主要用于组件隐藏或者显示后可能出现事件不响应问题时重新绑定事件.新版本暂未发现此问题.
var datetime = new DateTime(...);
datetime.refreshEventBinder();###4. hide
隐藏 DateTimePicker
var datetime = new DateTime(...);
datetime.hide();###5. show
显示 DateTimePicker
var datetime = new DateTime(...);
datetime.show();##日志
###打开日志
LogUtils.enable()
###关闭日志
LogUtils.disable()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent