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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
vue2 设置router-view默认路径的实例
Sep 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连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Django中Middleware中的函数详解
2019/07/18 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
八一演出活动方案
2014/02/03 职场文书
中学教师教育感言
2014/02/21 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
后备干部培训方案
2014/05/22 职场文书
清明节演讲稿
2014/05/27 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
先进个人评语大全
2015/01/04 职场文书
开网店计划分析
2019/07/30 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python