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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
js选项卡的实现方法
Feb 09 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 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面向对象之多态
2014/08/20 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
window.open的功能全解析
2006/10/10 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
普通话演讲稿
2014/09/03 职场文书
计划生育工作汇报
2014/10/28 职场文书
举起手来观后感
2015/06/09 职场文书
小学教师教学反思
2016/02/24 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
python分分钟绘制精美地图海报
2022/02/15 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
Nginx安装配置详解
2022/06/25 Servers