一、依赖

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

二、初始化

// html
<input type="text" class="form-control time5" placeholder="年月日"> // 这里要加类名form-control,要不然控件中顶部左右侧箭头会不见 // js
$('.time1').datetimepicker({
// 这里写各个属性
})

三、属性

1、format —— 时间格式

类型:string

默认值: "yyyy-mm-dd hh-ii"

比如我只想要一个可以选择年月日的时间控件。

format: 'yyyy-mm-dd'

根据下面的值,可以自由的定义。

符号 意义
p 12小时制且小写(‘am’ or ‘pm’)
P 12小时制且大写(‘AM’ or ‘PM’)
s 秒,前面不补0
ss 秒,前面补0
i 分,前面不补0
ii 分,前面补0
h 时,24小时制,前面不补0
hh 时,24小时制,前面补0
H 时,12小时制,前面不补0
HH 时,12小时制,前面补0
d 日,前面不补0
dd 日,前面补0
m 月,数字表示,前面不补0 如:4
mm 月,数字表示,前面补0 如:04
M 月,缩写表示,前面补0 如:Apr
MM 月,全称表示,前面补0 如:April
yy 年,后两位 如:16
yyyy 年,全部 如:2016

2、language —— 语言

类型:string

默认值:'en'

要使用中文的话,

// 先在公共js里扩展下
$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
meridiem: ["上午", "下午"],
today: "今天"
}; // 后使用
$('.time1').datetimepicker({
language: 'zh',
format: 'yyyy-mm-dd'
})

3、startView —— 首先出现的视图

日期时间选择器打开之后首先显示的视图。

类型:Number

默认值: 2

可接受的值:

意义
0 首先出现选分钟界面
1 首先出现选小时界面
2 首先出现选天界面
3 首先出现选月界面
4 首先出现选年界面

4、minView —— 最精准的时间

日期时间选择器所能够提供的最精确的时间选择视图。

类型:Number

默认值:0

可接受的值:

意义
0 可选到分
1 可选到小时
2 可选到天
3 可选到月
4 可选到年

5、todayBtn —— 今天按钮

一个快捷按钮,可以直接选择到今天的日期

类型:Boolean

默认值: false

todayBtn: true

6、autoclose —— 是否自动关闭

选完时间后是否自动关闭时间控件。

类型:Boolean

默认值:false

autoclose: true

7、minuteStep —— 步进值

默认分钟是以5分钟为单位,就是可以选0分、5分、10分...,可以更改这个属性选择到以每分钟为单位。

类型: Number

默认值:5

minuteStep: 1

还有好多属性啊,但我觉得平时可能用不到,最后附上几个实际的例子、分别是选择年月日、年月、年、月、日。链接:https://pan.baidu.com/s/1pWEcw6Jy3cYdYPgbykh_pw。

datetimepicker —— 日期选择控件的更多相关文章

  1. C# 中带有中国农历的日期选择控件

    开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...

  2. ExtJS6.0扩展日期选择控件为也可以选择时间

    PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...

  3. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  4. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  5. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  6. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  7. Swift - 日期选择控件(UIDatePicker)的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  8. Android自定义View(RollWeekView-炫酷的星期日期选择控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  9. 取消layUI中日期选择控件默认填充日期

    input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...

随机推荐

  1. Stream的去重排序

    1.List<Integer>排序 List<Integer> list = new ArrayList<>();list.add(50);list.add(25) ...

  2. 【python之路39】Python 正则表达式

    Python 正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. r ...

  3. 整体二分(模板) 求区间第k小

    整体二分,将询问与初值一起放入一个结构体里,然后每次二分判断询问在哪边,树状数组维护,时间复杂度O((n+Q)lognlogMAX_a[i] 代码 #include<iostream> # ...

  4. pc端样式重置以及常用样式规范class

    //reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a ...

  5. Java review-basic1

    1. Dependency Injection Answer: Any application is composed of many objects that collaborate with ea ...

  6. Nginx1.10.2安装配置

    以下操作均在当前用户目录操作(root的目录,截止2016.11.2最新版本) 1.安装常用工具及基础包:yum -y install wget git vim make gcc gcc-c++ op ...

  7. org.hibernate.service.UnknownServiceException: Unknown service requested [org.hibernate.engine.jdbc.connections.spi.ConnectionProvider]

    蜜汁问题? 完全不知道怎么解决啊

  8. c#的DateTime的各种字符串格式

    今天看到工程里有关DateTime的有关知识,之前了解一些用法,比如怎么获取年月日,当前系统时间等等,但是,感觉还是有好多不知道,于是上网搜罗了一下,找到很多有关知识,现在与大家分享下:     Da ...

  9. codevs1214 线段覆盖

    1214 线段覆盖 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold       题目描述 Description 给定x轴上的N(0<N<100)条线段, ...

  10. 助力深度学习!阿里开源可插拔 GPU 共享调度工具

    根据 Gartner 对全球 CIO 的调查结果显示,人工智能将成为 2019 年组织革命的颠覆性力量.对于人工智能来说,算力即正义,成本即能力,利用 Docker 和 Kubernetes 代表云原 ...