datetimepicker 插件使用实例及参数说明

最新推荐文章于 2024-08-27 07:41:03 发布

二苟

最新推荐文章于 2024-08-27 07:41:03 发布

阅读量2.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/aleefang/article/details/106385188

版权

这篇博客介绍了datetimepicker插件的使用，包括各种option参数的设置，如format、weekStart、startDate、endDate等，并通过实例展示了如何创建时间选择组件，特别是限制选择范围和时间步进等功能。

摘要由CSDN通过智能技术生成

借鉴于 https://www.bootcss.com/p/bootstrap-datetimepicker/

本文根据个人在项目使用过程中的经验进行一些总结，比较浅显，暂时不做深入分析。

datetimepicker可以将一个元素包装为时间组件，并设置显示样式、事件回调等。以下主要说明一些option设置，并用实例展示一下效果。

先上一个效果图，单个组件的比较简单，例子展示一下用两个组件拼的timerange。大概逻辑是，选择开始时间(startTime)后，结束时间(endTime)只能选择startTime之后的值，startTime变更后，endTime清空并跟着更新：

图一：选择开始时间图二：结束时间>开始时间图三：结束时间>开始时间并只能选当天时间

附上代码：

图一图二组合代码：
    initTimeRangeWithSinglePicker("#startTime", "#endTime", 'yyyy-mm-dd hh:ii');

        //初始化容器（input）
	function initTimeRangeWithSinglePicker(startE, endE, formatStr){
		$(startE).datetimepicker({
		    autoclose:1,
		    minV