【Bootstrap】Bootstrap Datepicker使用
1、添加样式和引用JS文件
<link href="CSS/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>
如果使用汉化版,引入汉化版,这个JS也在那个下载的文件夹里,并把language设置为“zh-CN”:
<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
2、设置
format日期格式:(这个和一般的不一样,开始我就设错了,后来查了才知道)
- yyyy-mm-dd
- yyyy-mm-dd hh:ii
- yyyy-mm-ddThh:ii
- yyyy-mm-dd hh:ii:ss
- yyyy-mm-ddThh:ii:ssZ
maskInput: true, // disables the text input mask
pickDate: true, // disables the date picker
pickTime: true, // disables de time picker
pick12HourFormat: false, // enables the 12-hour format time picker
pickSeconds: true, // disables seconds in the time picker
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximum date
hourStep: 小时的间隔
minuteStep:分钟的间隔
secondStep:
laguage:'en' //zh-CN
autoclose:是否选择完后自动关闭
format
String. 默认值: 'mm/dd/yyyy' 日期格式, p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。
p : meridian in lower case ('am' or 'pm') - according to locale file
P : meridian in upper case ('AM' or 'PM') - according to locale file
s : seconds without leading zeros
ss : seconds, 2 digits with leading zeros
i : minutes without leading zeros
ii : minutes, 2 digits with leading zeros
h : hour without leading zeros - 24-hour format
hh : hour, 2 digits with leading zeros - 24-hour format
H : hour without leading zeros - 12-hour format
HH : hour, 2 digits with leading zeros - 12-hour format
d : day of the month without leading zeros
dd : day of the month, 2 digits with leading zeros
m : numeric representation of month without leading zeros
mm : numeric representation of the month, 2 digits with leading zeros
M : short textual representation of a month, three letters
MM : full textual representation of a month, such as January or March
yy : two digit representation of a year
yyyy : full numeric representation of a year, 4 digits
weekStart
Integer. 默认值:0 一周从哪一天开始。0(星期日)到6(星期六) startDate
Date. 默认值:开始时间 The earliest date that may be selected; all earlier dates will be disabled. endDate
Date. 默认值:结束时间 The latest date that may be selected; all later dates will be disabled. daysOfWeekDisabled
String, Array. 默认值: '', [] Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6' or [0,6]. autoclose
Boolean. 默认值:false 当选择一个日期之后是否立即关闭此日期时间选择器。 startView
Number, String. 默认值:2, 'month' 日期时间选择器打开之后首先显示的视图。 可接受的值: 0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
minView
Number, String. 默认值:0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图。 maxView
Number, String. 默认值:4, 'decade' 日期时间选择器最高能展示的选择范围视图。 todayBtn
Boolean, "linked". 默认值: false 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。 todayHighlight
Boolean. 默认值: false 如果为true, 高亮当前日期。 keyboardNavigation
Boolean. 默认值: true 是否允许通过方向键改变日期。 language
String. 默认值: 'en' The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used. forceParse
Boolean. 默认值: true 当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。 minuteStep
Number. 默认值: 5 此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间(分钟)用于选择。 pickerReferer : 不建议使用
String. 默认值: 'default' (other value available : 'input') The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input. pickerPosition
String. 默认值: 'bottom-right' (还支持 : 'bottom-left') 此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。 viewSelect
Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour') With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated. showMeridian
Boolean. 默认值: false This option will enable meridian views for day and hour views. initialDate
Date or String. 默认值: new Date() You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...
设置
3、例子
<input id="txtDtbegin" name="dtBegin" value="<%=dt2 %>" type="text" class="form-control">
$('#txtDtbegin').datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
language: 'zh-CN',
pickDate: true,
pickTime: true,
inputMask: true,
pickerPosition: "bottom-left",
autoclose: true
});
在下载的文件里有部分实例。
【Bootstrap】Bootstrap Datepicker使用的更多相关文章
- bootstrap的datepicker在选择日期后调用某个方法
bootstrap的datepicker在选择日期后调用某个方法 2016-11-08 15:14 1311人阅读 评论(0) 收藏 举报 首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在 ...
- bootstrap的datepicker使用(1.将默认的英文设置为中文2.选择日月年的时候记录之前的操作)
参考网页 bootstrap datepicker 属性设置 以及方法和事件 1.如何将bootstrap的datepicker默认的英文设置为中文 第一步,新建一个js文件(bootstrap ...
- Bootstrap 3 Datepicker 使用过程
最近在创建记录的时候,需要用到日历的功能.本身是使用的bootstrap布局的,所以就找到Datepicker,看了一下用起来还是挺方便的.下面就是使用过程. 依赖的资源 jQuery Moment. ...
- 关于bootstrap的datepicker在meteor应用中的使用(不包含bootstrap框架)
1.安装bootstrap3-datepicker包 meteor add rajit:bootstrap3-datepicker 2.使用方法 Example In your handlebars ...
- 基于bootstrap的datepicker
<script src="<%=path %>/js/bootstrap-datepicker.min.js"/> <script src=" ...
- Bootstrap的datepicker控件
为input 控件的text 添加datepicker()方法后,原本的控件change事件无法正常触发.原因是项目中同时使用了用了jquery ui,碰巧它里面也有一个datepicker,名字一模 ...
- 关于bootstrap插件datepicker
<input readonly size="16" type="text" name="time" id="time&q ...
- [bootstrap] bootstrap 简介和相关网址
Bootstrap 来自 Twitter,是目前很受欢迎的前端框架. 基于 HTML.CSS.JAVASCRIPT ,简洁灵活,使 Web 开发更加快捷. Bootstrap提供了优雅的HTML和CS ...
- [Bootstrap] Bootstrap学习笔记
1.因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上<!DOCTYPE html> 2.Bootstrap需要JQuery才能正常工作,所以需要导入jquery ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
随机推荐
- eclipse 组态xdebug
1.打开浏览器打开phpinfo页面视图PHP版本号.TS(线程安全)版本NTS(非线程安全)版本.以及VC6版本号是VC9版本号 2.和上面版本号相应的xdebug:http://xdebug.or ...
- spring4.2完整web项目(使用html视图解析器)
完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建议很多还是不能用的,可能还会有很多人会遇到 ...
- ORACLE union order by
select * from ( select a.id,a.oacode,a.custid,a.custname,a.xsz,a.salename,a.communicationtheme,a.com ...
- Android微信道共用,没有反应
研究2日,寻找良好的比较完整的文章一天.发送链接:http://www.apkbus.com/android-138326-1-1.html 然而,按照上面的教程一步一步做.结果点击分享或无反应. 出 ...
- 【Leetcode】Remove Duplicates from Sorted List in JAVA
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- vi使用高级
下面的命令在vi命令模式被激活 h 光标左移一个字符 l 光标向右移动一个字符 j 光标下移一行 k 移动光标线 一.对整行操作 1.复制光标所在行 yy 2.删除光标所在行 dd 3.选中光标所在行 ...
- MVC验证06-自定义错误信息
原文:MVC验证06-自定义错误信息 本文体验自定义错误信息. 系统默认的错误信息 在"MVC验证02-自定义验证规则.邮件验证"中,我们自定义了一个验证Email的类.如果输 ...
- 使用IntelliLock加密授权你的.Net程序
原文:使用IntelliLock加密授权你的.Net程序 转自:http://www.nsoff.com/post/2012/05/23/%E4%BD%BF%E7%94%A8IntelliLock%E ...
- 从.net复制源代码中国农历阵列,必要做日历
从.net复制源代码中国农历阵列,必要做日历 const { 闰月的月份.春节的阳历日期(农历正月初一).农历的每一个月天数 } c_arrLunarInfo: array [1900 .. 2100 ...
- VMware Workstation 无法与 Windows XP \ Windows 7 \ Windows 8 进行共享文件夹。
1.这是一个小Bug,做法很简单. ----①.如果安装了VMware Tools,先卸载VMware Tools,重启虚拟机,再安装VMware Tools,重启虚拟机,就行了. ----②.如果没 ...