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 08 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
Element MessageBox弹框的具体使用
Jul 27 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之Smarty入门
2007/01/04 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python删除不需要的python文件方法
2018/04/24 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python实现结构体代码实例
2020/02/10 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
小学清明节活动方案
2014/03/08 职场文书
婚礼主持词开场白
2014/03/13 职场文书
我的理想演讲稿
2014/04/30 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
家长会后的感想
2015/08/11 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书