bootstrap datetimepicker日期插件超详细使用方法介绍


Posted in Javascript onFebruary 23, 2017

本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下

首先在文件头部引入必要的文件:

<link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" >
<script src="Js/bootstrap-datetimepicker.js"></script>

想用中文显示,加入bootstrap-datetimepicker.zh-CN.js文件

<script src="Js/bootstrap-datetimepicker.zh-CN.js"></script>

然后调用初始化日期插件方法:

$('.date').datetimepicker({
 language: 'zh-CN',//显示中文
 format: 'yyyy-mm-dd',//显示格式
 minView: "month",//设置只显示到月份
 initialDate: new Date(),//初始化当前日期
 autoclose: true,//选中自动关闭
 todayBtn: true//显示今日按钮
 })

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载:http://www.bootcss.com/p/bootstrap-datetimepicker/

使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。

使用方法

两个时间输入域如图:

bootstrap datetimepicker日期插件超详细使用方法介绍

html代码

<input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

 js代码如下

<script type="text/javascript">
  $("#datetimeStart").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
  });
  $("#datetimeEnd").datetimepicker({
    format: 'yyyy-mm-dd',
    minView:'month',
    language: 'zh-CN',
    autoclose:true,
    startDate:new Date()
  }).on("click",function(){
    $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
  });
</script>

 关于bootstrap插件datepicker,只选择年月;

<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>
$(".form_datetime_2").
datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm',
autoclose: true,
todayBtn: true,
startView: 'year',
minView:'year',
maxView:'decade'
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js验证上传图片的方法
May 12 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Three.js基础学习教程
Nov 16 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
js实现时间日期校验
May 26 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 #Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 #Javascript
高效的jQuery代码编写技巧总结
Feb 22 #Javascript
JS拉起或下载app的实现代码
Feb 22 #Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
You might like
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php函数连续调用实例分析
2015/07/30 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python标准库itertools的使用方法
2020/01/17 Python
4s客服专员岗位职责
2013/12/01 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
赢在执行观后感
2015/06/16 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
中学教代会开幕词
2016/03/04 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis