Bootstrap DateTime Picker日历控件简单应用


Posted in Javascript onMarch 25, 2017

一个日历控件,这是官方说明,,供大家参考,具体内容如下

首先引入css样式

<!--引入bootstrap 和bootstrap-datetimepicker样式表--> 
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" /> 
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" rel="external nofollow" />

html标签

<input class="form-control form_date" type="text" id="dateTime" name="dateTime" />

引入js文件

<!--引入jquery,bootstrap,bootstrap-datetimepicker,bootstrap-datetimepicker.zh-CN--> 
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
  <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> 
  <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script> 
  <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

javascript显示日历

$("#dateTime").datetimepicker({ 
      language: 'zh-CN',//语言 
      format: 'yyyy-mm-dd hh:ii:ss', //String 默认值: 'mm/dd/yyyy'日期转换格式 
      autoclose: true, //Boolean 默认值:false 选择完日期自动关闭 
      //startView: 2,//Number, String. 默认值:2, 'month' 日期时间选择器打开之后首先显示的视图。 
      //minView: 0,//Number, String. 默认值:0, 'hour' 日期时间选择器所能够提供的最精确的时间选择视图 
      weekStart: 1,//默认值:0. 0(星期日)到6(星期六) 
      startDate: new Date("1997/1/1"),//Date类型,默认值:开始时间.不能小于开始时间 
      //endDate: //Date类型,默认值:结束时间.不能大于开始时间 
      //daysOfWeekDisabled: [0,1,2,3,4,5,6] //String,Array类型.默认值:"",[]. 不能被选择的week 
      todayBtn: "linked",//Boolean, "linked". 默认值: false 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。 
      todayHighlight: true,//Boolean. 默认值: false 如果为true, 高亮当前日期。 
      keyboardNavigation: true,//Boolean. 默认值: true 是否允许通过方向键改变日期。 
      forceParse: true,//Boolean. 默认值: true  当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。 
      minuteStep: 10,//Number. 默认值: 5 
      //pickerPosition: //String. 默认值: 'bottom-right' (还支持 : 'bottom-left') 此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方 
      //viewSelect: 2,//不知道 
      initialDate: "2015/5/5",//Date or String. 默认值: new Date() 初始化日期 
      showMeridian: true//Boolean. 默认值: false 以12小时制显示 
    });

效果图:

Bootstrap DateTime Picker日历控件简单应用Bootstrap DateTime Picker日历控件简单应用Bootstrap DateTime Picker日历控件简单应用Bootstrap DateTime Picker日历控件简单应用Bootstrap DateTime Picker日历控件简单应用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
一个网马的tips实现分析
Nov 28 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
Node.js和Express简单入门介绍
Mar 24 #Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 #Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 #Javascript
JS实现向iframe中表单传值的方法
Mar 24 #Javascript
You might like
PHP里的中文变量说明
2011/07/23 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
出租房屋协议书
2014/09/14 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
教你使用TensorFlow2识别验证码
2021/06/11 Python
全新239军机修复记
2022/04/05 无线电
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS