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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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 curl 并发最佳实践代码分享
2012/09/05 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
JS快速实现简单计算器
2020/04/08 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
班组长安全职责
2014/01/05 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Mysql Show Profile
2021/04/05 MySQL
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android