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 类
Nov 07 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
ES6 解构赋值的原理及运用
May 25 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开发文件系统实例讲解
2006/10/09 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
js实现开关灯效果
2020/03/30 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python实现五子棋小游戏
2020/03/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Django使用rest_framework写出API
2020/05/21 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
班主任工作经验材料
2014/02/02 职场文书
军训口号
2014/06/13 职场文书
应届大学生自荐书
2014/06/17 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python