datetimepicker —— 日期选择控件
一、依赖
<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 —— 日期选择控件的更多相关文章
- C# 中带有中国农历的日期选择控件
开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...
- ExtJS6.0扩展日期选择控件为也可以选择时间
PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
- JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
- Swift - 日期选择控件(UIDatePicker)的用法
1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...
- Android自定义View(RollWeekView-炫酷的星期日期选择控件)
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...
- 取消layUI中日期选择控件默认填充日期
input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...
随机推荐
- json字符串和对象的相互转换
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式. 同时,JSON是 JavaScript 原生格式,这 ...
- JS面向对象--你真的理解闭包了吗?
JS中的闭包,可能在实际开发中我们用的很少,但是面试的时候是必问的.所以今儿个总结一下什么是闭包. 首先,我们定义一个变量.会分为两种情况,1是定义在全局中,我们关闭程序的时候变量会从内存中释放.2是 ...
- 读书笔记--Head First Ajax 目录
1.使用Ajax 2.设计Ajax 3.javascripte事件 4.多个事件处理程序 5.异步应用 6.文档对象模型 7.管理DOM 8.框架与工具包 9.xml请求与响应 10.json 11. ...
- Markdown文档使用
Markdown使用 一.markdown标题:1级-6级 一级 #空格 二级 ##空格 三级 ###空格 ... 六级 ######空格 二.代码块 print("hello world! ...
- 从默认的index.jsp页面跳转或转发到其他页面
使用forward还是redirect都可以完成跳转 forward:浏览器地址不变,所以存在重复提交的问题 <% pageContext.forward("student/list ...
- python邮件发送:普通文本、html、添加附件
# -*- coding: utf-8 -*- # @Time : 2019/9/19 13:46 # @Author : HuangWenjun # @Email : 350920551@qq.co ...
- 初探Druid
说到连接池,最常见的就是dbcp和c3p0,关于druid,官方定义是为监控而生的数据库连接池. 官方中文文档地址:https://github.com/alibaba/druid/wiki/%E5% ...
- js 正则去除html代码
function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html标记 }
- 关于rss的内容(转载)
转载自: https://blog.csdn.net/zhao1949/article/details/52806123 (本文对读者有帮助的话请移步支持原作者) 内容记录: 在C++技术网开通了RS ...
- html5之本地数据库
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...