smalot-bootstrap-datetimepicker 使用心得

使用参考：http://www.bootcdn.cn/smalot-bootstrap-datetimepicker/readme/

定义控件类型：

    $(':text[data-ride="datetime"], input[type="datetime"]').datetimepicker({language: 'zh-CN',format: 'yyyy/mm/dd hh:ii',autoclose: true,clearBtn: true,todayBtn: true,todayHighlight: true,bootcssVer: 3,fontAwesome: true});

页面改变控件类型：

//改变日期的类型
function changeType() {var type = $('#dateType').val();var myDate = new Date();if (type !== $('#dateStart').attr('data-ride') || type !== $('#dateEnd').attr('data-ride')) {$('#dateStart').datetimepicker('remove');$('#dateEnd').datetimepicker('remove');$('#dateStart').attr('data-ride', type);$('#dateEnd').attr('data-ride', type);}if (type === "year") {$('#dateStart,#dateEnd').datetimepicker({language: 'zh-CN',format: 'yyyy',autoclose: true,bootcssVer: 3,fontAwesome: true,startView: 4,minView: 4,maxView: 4,minuteStep: 1});$('#dateStart').val(myDate.getFullYear());$('#dateEnd').val(myDate.getFullYear());$('#dateEnd').attr('disabled', true);}if (type === "month") {$('#dateStart,#dateEnd').datetimepicker({language: 'zh-CN',format: 'yyyy/mm',autoclose: true,bootcssVer: 3,fontAwesome: true,startView: 3,minView: 3,maxView: 4,minuteStep: 1});$('#dateStart').val(myDate.getFullYear() + "/" + (myDate.getMonth()+1));$('#dateEnd').val(myDate.getFullYear() + "/" + (myDate.getMonth() + 1));$('#dateStart').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1));$('#dateEnd').datetimepicker('setEndDate', myDate.getFullYear() + "/" + (myDate.getMonth() + 1));$('#dateEnd').removeAttr('disabled');}if (type === "day") {$('#dateEnd,#dateStart').datetimepicker({language: 'zh-CN',format: 'yyyy/mm/dd',autoclose: true,bootcssVer: 3,fontAwesome: true,startView: 2,minView: 2,maxView: 4,minuteStep: 1});$('#dateStart').val(myDate.toLocaleDateString());$('#dateEnd').val(myDate.toLocaleDateString());$('#dateStart').datetimepicker('setEndDate', myDate.toLocaleDateString());$('#dateEnd').datetimepicker('setEndDate', myDate.toLocaleDateString());$('#dateEnd').removeAttr('disabled');}
}

　　在做控件类型变更的时候遇到了几个问题：

　　1、如何变更定义不同类型的时间控件（年、月、日）。

　　　　这个需要通过定义控件类型，实现定义好不同类型的时间控件。然后再页面统计属性调用。

　　2、如何改变时间控件的类型

　　　　这个我则是通过JQ的attr方法改变控件的属性值，从而达到改变控件的类型。

　　3、为什么attr动态改变类型后，datetimepicker依旧不生效

　　　　这个我发现datetimepicker这个控件是在js代码加载后动态生成的页面代码，改变类型无法直间改变生成的代码。只能先移除datetimepicker，然后再添加datetimepicker方能达到效果。

　　4、如何将时间控件的时间设置成当前时间。

　　　　改变类型后，赋值即可。

　　5、如何限制可选时间范围。

　　　　datetimepicker提供了setEndDate这个接口用于设置可选最终时间，调用设置即可。

转载于:https://www.cnblogs.com/Voctor/p/6272744.html

smalot-bootstrap-datetimepicker 使用心得相关推荐

bootstrap datetimepicker的时间变成1899年
bootstrap datetimepicker 重新加载后,日期会变1899年, 这个问题要怎么解决呢?? 先看个小例子: <%@ Page Language="C#" A ...
vue2.0 与 bootstrap datetimepicker的结合使用
vue2.0 与 bootstrap datetimepicker的结合使用 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向 ...
bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"><label class="control- ...
bootstrap datetimepicker 用法+demo案例下载
bootstrap datetimepicker 用法+demo案例下载官网文档地址是:http://www.bootcss.com/p/bootstrap-datetimepicker/ date ...
bootstrap datetimepicker
效果预览我们先来看一下效果可以看到这款插件的功能很强大,涵盖了十年视图,年视图,月视图,甚至小时视图,分钟视图都有,几乎能够满足大部分人的需要.不仅如此,还有完善的文档,方便我们个性化设置噢,我们 ...
bootstrap datetimepicker 复选可删除，可规定指定日期不可选
可实现类似于酒店预订的功能.支持日期多选,日期重复选择取消等功能. datetimepicker去网上下载很多, 只需要取到 bootstrap-datetimepicker.min.js boot ...
使用Bootstrap DateTimePicker显示1899年的问题
时间框js和css引入之所以会出现1899年,是因为输入框与初始化的时间格式不一致导致的,只要在Input框中加入:data-date-format='yyyy-mm-dd hh:ii:ss',初始 ...
bootstrap datetimepicker 开始时间，结束时间
// 时间选择器初始化 $('#beginTime, #endTime').datetimepicker({language: 'zh-CN',autoclose: true,todayBtn: tr ...
bootstrap datetimepicker的一些小总结
关于日历控件我真的就是一直就研究.我分享我自己遇到的几个问题 1.点击日历比如这种情况间距的高度小于日历的高度,那我们应该让日历直接显示在左上方解决办法:修改插件库 var一个当前文本的一个高 ...
日历插件：Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...

smalot-bootstrap-datetimepicker 使用心得

smalot-bootstrap-datetimepicker 使用心得相关推荐

最新文章

热门文章