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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
简单了解JavaScript arguement原理及作用
May 28 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实现telnet功能示例
2014/04/08 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
在python中修改.properties文件的操作
2020/04/08 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
商务英语广告词大全
2014/03/18 职场文书
学习普通话的体会
2014/11/07 职场文书
检讨书范文500字
2015/01/28 职场文书
2015年仓库工作总结
2015/04/09 职场文书
消防演习通知
2015/04/25 职场文书
军训结束新闻稿
2015/07/17 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers