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 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
js模块加载方式浅析
Aug 12 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
layui复选框限制选择个数的方法
Sep 18 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
7个JS基础知识总结
2014/03/05 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
总经理助理职责
2014/02/04 职场文书
委托公证书
2014/04/08 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
三好学生事迹材料
2014/12/24 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android