JS控件bootstrap datepicker使用方法详解


Posted in Javascript onMarch 25, 2017

bootstrap-datepicker沙箱环境:
bootstrap-datepicker沙箱环境:

1、requirejs配置

requirejs.config({
  baseUrl: '../pages/modules',
//  urlArgs: "v=" + (new Date()).getTime(),//禁止缓存,生产环境去除
  urlArgs:'v=2016110701',
  paths: {
    jquery: ["../../plugins/jquery/jquery"],
    bootstrap: ["../../plugins/bootstrap/dist/js/bootstrap.min"],
    datepicker:["../../plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min"],
    datepicker_zh:["../../plugins/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min"]
  },
  shim: {
    bootstrap: {deps: ["jquery"],exports: 'bootstrap'},
    datepicker:{deps:["jquery"],exports:"datepicker"},
    datepicker_zh:{deps:["jquery","datepicker"],exports:"datepicker_zh"}
  }
});
require(['jquery', 'bootstrap']);

2 html

<div class="form-group col col-sm-3 padding no-margin-bottom" id="birthdayGroup">
        <label class="col col-sm-4 text-right form-label no-padding-left">出生日期:</label>
        <div class="col col-sm-8 no-padding-left no-padding-left input-group date">
          <span class="input-group-addon">
            <i class="fa fa-calendar"></i>
          </span>
          <input id="birthday" type="text" class="form-control" placeholder="出生日期"/>
        </div>
      </div>

3 js

var $ = require('jquery');
require('datepicker_zh');
$("#birthdayGroup .input-group.date").datepicker({todayHighlight:true,todayBtn: 'linked'
      ,keyboardNavigation:true,autoclose:true,language:'zh-CN',format:'yyyy-mm-dd'
      ,daysOfWeekHighlighted:'0,6'});

4 效果

JS控件bootstrap datepicker使用方法详解

5 更改默认配置

如果每个控件都按照上述js的写法,是不是很痛苦。所以可以将您认为常用的配置设置到

JS控件bootstrap datepicker使用方法详解

设置完毕后,要做的是日期的格式,因为bootstrap-datepicker.zh-CN.min.js将格式设置为了yyyy年mm月dd日,所以如果您想默认格式为'yyyy-mm-dd',还得改bootstrap-datepicker.zh-CN.min.js这个地方.

JS控件bootstrap datepicker使用方法详解

现在您只需要即可实现效果。
$("#birthdayGroup .input-group.date").datepicker();

6 时间段的日期
jsp页面重点是input-daterange input-group的样式

<div class="form-group col col-sm-4 padding no-margin-bottom">
   <label class="col col-sm-4 text-right form-label no-padding-left">入库日期:</label>
   <div class="col col-sm-8 col-xs-6 no-padding-left input-daterange input-group">
   <input type="text" class="input-sm form-control" name="filter_ged_instockDate__FontalInstockExample" value="<fmt:formatDate value='${filter_ged_instockDate}' pattern='yyyy-MM-dd'/>" />
    <span class="input-group-addon">到</span>
    <input type="text" class="input-sm form-control" name="filter_led_instockDate__FontalInstockExample" value="<fmt:formatDate value='${filter_led_instockDate}' pattern='yyyy-MM-dd'/>"/>
    </div>
</div>

js的配置也相对简单,在初始化的时候做一下配置,这样就可以了

$(".input-daterange").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});

从下图实例可以看出,日历中有个选中的日期,前后两个日期的前后大小,由控件本身完成,不需要人为做什么操作了.

JS控件bootstrap datepicker使用方法详解

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

Javascript 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
javascript的键盘控制事件说明
Apr 15 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 #Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 #Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 #Javascript
JS实现列表页面隔行变色效果
Mar 25 #Javascript
angular仿支付宝密码框输入效果
Mar 25 #Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
axios基本入门用法教程
Mar 25 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
Angular 如何使用第三方库的方法
2018/04/18 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
简单谈谈Python中的闭包
2016/11/30 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python实现的读写json文件功能示例
2018/06/05 Python
详解Python发送email的三种方式
2018/10/18 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
python实现的web监控系统
2021/04/27 Python