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 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
xajax写的留言本
2006/11/25 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
js转义字符介绍
2013/11/05 Javascript
sails框架的学习指南
2014/12/22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
农救科工作职责
2013/11/27 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
大学生军训感想
2014/02/16 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
养成教育工作总结
2015/08/13 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
MySQL 数据类型详情
2021/11/11 MySQL