一款形似Win10日历风格的日期时间选择器
Datetimepicker
一款形似Win10日历风格的日期时间选择器,基于jQuery插件实现,使用简单,灵活,支持多种参数设置。
Github地址: https://github.com/iHearty/datetimepicker
具体介绍如下:
演示动画
支持三种视图模式
- 月视图
- 年视图
- 十年视图
如何使用?
-
基础用法
html代码 <div class="input-wrapper"> <input class="datetime" type="text" placeholder="请选择时间日期"> </div> Javascript代码 $(".datetime").datetimepicker();
-
使用参数
html代码 <div class="input-wrapper"> <input class="datetime" type="text" placeholder="请选择时间日期"> </div> Javascript代码 $(".datetime").datetimepicker({ date: new Date('2016/05/30 12:00:00'), useTime: true, dtpView: 1, min: new Date('2016/03/01 00:00:00'), max: new Date('2016/11/01 00:00:00'), autoClose: false }); ****** 参数说明: date: [Date] 初始时间日期,默认: new Date() useTime: [Boolean] 是否显示时间选择器,默认: false dtpView: [1, 2, 3] 初始视图类型,默认: 1。解释:1-月视图,2-年视图,3-十年视图 min: 初始最小可选日期(此值可选), 默认: 无 min: 初始最大可选日期(此值可选), 默认: 无 autoClose: [Boolean] 是否再选择日期后自动关闭,默认: true
- 事件监听
只有一个监听事件: datetime
$(".datetime").datetimepicker().on("datetime", function(evt) { $(this).val(evt.datetime); });
- 动态修改参数
$(".datetime").datetimepicker({ useTime: true, autoClose: false }).on("datetime", function(evt) { $(this).val(evt.datetime); // 获取当前Datetimepicker对象 var dtp = $(this).data('datetimepicker'); dtp.min = evt.datetime; dtp.dtpViewRender(true); dtp.toggle(false); });
- 使用手册
- 时间选择: 鼠标悬放在时间上之后,滚动鼠标滚轮,选择时间。或是,点击获取焦点后,使用键盘上下键选择时间,左右方向键切换时、分、秒。
- 点击时间下方的日期,可快速返回到今天。
- 点击‘上’,‘下’切换上/下一月/年/十年。
- 点击‘上’之前的日期,可切换显示的视图,顺序为月视图->年视图->十年视图。
- 事件监听
点击查看更多内容
61人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦