【bootstrap-datetimepicker】

  datetimepicker是一个比较方便的日期时间插件。有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能。官方文档:【http://www.bootcss.com/p/bootstrap-datetimepicker/】

  要使用datetimepicker组件,首先引入一些文件:

<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">

<script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

  同样这里没有写出来bootstrap的css和js以及jquery,但都是也要包含的。

  ■  典型应用:

  HTML写成这样:

<div class="input-group date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

  然后在js中这样写:

var today = new Date();
var format_td = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
$('.input-group.date').datetimepicker({
format: 'yyyy-mm-dd hh:00',
language: 'zh-CN',
todayBtn: 'linked',
maxView: 3,
minView: 1,
autoClose: true,
minuteStep: 30,
startDate: format_td,
pickerPosition: 'bottom-right'
});

  我们就可以在页面上得到一个输入框(type还是text的,不是date或者datetime),然后这个输入框右边会带有一个日历图标(input-group-addon),然后点击输入框或日历时会跳出一个日历来供用户选择具体的日期时间。选择完成后输入框中会出现特定格式的时间字符串,供表单提取数据或其他用。

  下面来解释一下在这个初始化过程中,各个参数的含义:

  format  指出了最后在输入框中的字符串的样式,上面这个yyyy-mm-dd hh都是格式化字符串,对应于类似"2017-01-01 08"(2017年1月1日上午8时)这样子。而:00是我固定写死的。更多的还有hh:ii:ss表示精确到秒的时间格式等,至于两位年份,一位小时数等等可以去官方文档看格式化字符串的写法。

  language  国际化显示适应,需要引入bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js才可顺利显示中文。

  todayBtn  可以设置为true,false或者'linked'。让日历组件下方有一个“今天”按钮。说是“今天”,其实应该是“现在”,如果是true则点击后跳转到当前日期;如果是'linked'则点击时自动选中当前时间日期并且写入输入框

  maxView,minView  日历组件可以根据需要分成好多不同的维度来看,这两个参数用来控制用户能够到达的最宏观和最微观的维度。值的各个数字的含义是:0-小时;1-天;2-月;3-年;4-十年。其默认值分别是0和4。另外还有startView参数用来指出点击调用日历控件时默认显示的维度。默认值是2

  autoClose  当选择一个日期后关闭此日历控件

  minuteStep  控制分钟选择的粒度。在时间下面,我们还可以选择具体到多少分钟。比如点击14:00,这个值是30的话,我们能够点击14:00和14:30

  startDate,endDate  分别指出该日历能够选择的最早和最晚日期。从上面的代码中也可以看出来其取值是个yyyy-mm-dd格式的字符串。实际上也可以是个Date对象,也就是说这里写new Date()也完全可以。另外提一下,Date对象getMonth的值是从0开始到11的,getFullYear才是获取4位数年份的方法。

  pickerPosition  指出日历控件出现相对于输入框的位置,默认值就是bottom-right,也可以top-left之类的

  daysOfWeekDisabled  一个数组,指出一个星期的星期X不能被选择。需要注意的是这里day是西方那一套,也就是如果值是[0,6]就可以把周末都disabled掉,而非[6,7]。

  初始化参数就说这么多吧,更多的可以参考文档

  ■  编程控制和方法

  datetimepicker方法不仅可以用于初始化控件,还可以在初始化完成之后,传入不同的参数来实现不同的编程控制。比如:

$('#testdp').datetimepicker('show')  //显示日历
$('#testdp').datetimepicker('hide') //隐藏日历
$('#testdp').datetimepicker('update') //将输入框中的日期字符串解析并反映到日历汇总 $('#testdp').datetimepicker('setStartDate','2017-01-01') //或者null,用来设置日历最早可选日期
/*类似的很多参数也可以这么设置
比如
setEndDate
setDaysOfWeekDisabled
...
*/

  ■  事件

  datetimepicker留出了一些事件的接口供我们调用比如

  show , hide , changeDate,changeYear,changeMonth这些都一目了然

  outOfRange  当用户试图在日历上选择超出了我们设置的范围(由startDate,endDate,daysOfWeekDisabled等决定)的日期时触发的事件

  嗯 datetimepicker基本上就是这样了,没有什么很复杂的地方

【Bootstrap】bootstrap-datetimepicker日期时间插件的更多相关文章

  1. dateTimePicker日期时间插件-----限定节假日调休的可选择性

    需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...

  2. Mint-UI 的 DatetimePicker 日期时间插件的安装与使用

    简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...

  3. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

  4. Bootstrap中datetimepicker日期控件1899年问题解决

    Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一个很尴尬的问题.我们项目一直采用的是angular+bootstrap,日期控件用的是boot ...

  5. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. 日期时间插件flatpickr.js使用方法

    今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...

  8. jquery datetimepicker 日期时间控件的使用及参数说明

    首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...

  9. jquery仿ios日期时间插件

    Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...

随机推荐

  1. TI Davinci DM6446开发攻略——根文件系统的裁剪和移植

    一.补充文件系统知识 Linux根文件系统是存放tool软件.lib文件.script(脚本).配置文件.其他特殊文件.自己开发的应用程序的地方.嵌入式linux的根文件系统rootfs就像windo ...

  2. php学习笔记upset函数。

    如果在函数中我们不希望再使用某个变量.可以使用unset()销毁函数, ②在php函数中,我们可以给某些参数赋一个默认初值. ③可以传一个默认的参数. ④php在传递变量的时候,默认是传递值传递,如果 ...

  3. Oracle 子程序参数模式,IN,OUT,IN OUT

    IN :用于传入参数. 在调用过程的时候,实参传到该过程中. 在过程内部,形参只读且不能更改. 在过程执行完毕,返回调用环境时候,实参到的值也不会改变 --带IN参数的过程,赋值. create or ...

  4. java.sql.SQLException: Access denied for user 'sa'@'localhost' (using password: YES)

    1.错误描述 ERROR:2015-05-01 23:43:04[localhost-startStop-1] - HHH000319: Could not get database metadata ...

  5. org.hibernate.TransientObjectException:The given object has a null identifier

    1.错误描述 org.hibernate.TransientObjectException:The given object has a null identifier:com.you.model.U ...

  6. 远程块存储iSCSI

    /* Border styles */ #table-2 thead, #table-2 tr { border-top-width: 1px; border-top-style: solid; bo ...

  7. js 函数中的 return+匿名函数

    今天一个刚学js的朋友给了我一段代码问为什么方法不执行,代码如下: 代码如下: function makefunc(x) {  return function (){   return x;  } } ...

  8. IDM使用入门

    IDM使用入门 Software IDM介绍 基本使用 浏览器集成 选项设置 进阶使用 IDM+百度云外链 IDM介绍 Internet Download Manager(IDM) is a tool ...

  9. 【Luogu3455】【POI2007】ZAP-Queries(莫比乌斯反演)

    [Luogu3455][POI2007]ZAP-Queries(莫比乌斯反演) 题面 题目描述 FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x ...

  10. [Luogu3345][ZJOI2015]幻想乡战略游戏

    Luogu 题意: 动态维护带权重心. sol 这是一道写起来很舒服的动态点分治.(不像某些毒瘤题) 我们考虑,如果你选择的补给点不是当前的带权重心,那么带权重心就在补给点的一个子树中(你把补给点当做 ...