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之对系统的toFixed()方法的修正
May 08 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
浅谈javascript中的闭包
May 13 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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中的登陆login
2007/01/18 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php文件读取方法实例分析
2015/06/20 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
js有序数组的连接问题
2013/10/01 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
消防安全标语
2014/06/07 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
Python实现抖音热搜定时爬取功能
2022/03/16 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python