JS控件bootstrap datepicker使用方法詳解
bootstrap-datepicker沙箱環(huán)境:
bootstrap-datepicker沙箱環(huán)境:
1、requirejs配置
requirejs.config({ baseUrl: '../pages/modules', // urlArgs: "v=" + (new Date()).getTime(),//禁止緩存,生產(chǎn)環(huán)境去除 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 效果
5 更改默認(rèn)配置
如果每個控件都按照上述js的寫法,是不是很痛苦。所以可以將您認(rèn)為常用的配置設(shè)置到
設(shè)置完畢后,要做的是日期的格式,因?yàn)閎ootstrap-datepicker.zh-CN.min.js將格式設(shè)置為了yyyy年mm月dd日,所以如果您想默認(rèn)格式為'yyyy-mm-dd',還得改bootstrap-datepicker.zh-CN.min.js這個地方.
現(xiàn)在您只需要即可實(shí)現(xiàn)效果。
$("#birthdayGroup .input-group.date").datepicker();
6 時間段的日期
jsp頁面重點(diǎn)是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});
從下圖實(shí)例可以看出,日歷中有個選中的日期,前后兩個日期的前后大小,由控件本身完成,不需要人為做什么操作了.
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 驗(yàn)證碼生成代碼 推薦學(xué)習(xí)
非常不錯的用javascript實(shí)現(xiàn)的驗(yàn)證碼實(shí)現(xiàn)代碼。2009-07-07javascript針對不確定函數(shù)的執(zhí)行方法
這篇文章主要介紹了javascript針對不確定函數(shù)的執(zhí)行方法,實(shí)例分析了eval函數(shù)及符號屬性兩種執(zhí)行方式,需要的朋友可以參考下2015-12-12js數(shù)組相減簡單示例【刪除a數(shù)組所有與b數(shù)組相同元素】
這篇文章主要介紹了js數(shù)組相減,結(jié)合簡單示例形式分析了JavaScript刪除a數(shù)組所有與b數(shù)組相同元素相關(guān)個遍歷、判斷、刪除等相關(guān)操作技巧,需要的朋友可以參考下2020-03-03使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對象參數(shù)
該函數(shù)兼容ie,firefox。并且可以使用clearSetTimeOut和clearInterval清除,比原setTimeout,setInterval方便很多,并且參數(shù)可以是object。2009-04-04詳解webpack-dev-server 設(shè)置反向代理解決跨域問題
后端只負(fù)責(zé)接口,前端負(fù)責(zé)數(shù)據(jù)展示、邏輯處理。那么如何跨域?這篇文章主要介紹了webpack-dev-server 設(shè)置反向代理解決跨域問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04js中opener與parent的區(qū)別詳細(xì)解析
本篇文章主要是對js中opener與parent的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)
我們開發(fā)的人來說經(jīng)常要加個判斷,要不可能某些功能沒法正常使用。要是沒加個判斷就會給大家?guī)硇┞闊?/div> 2013-11-11解析利用javascript如何判斷一個數(shù)為素?cái)?shù)
本文主要分享了利用javascript如何判斷一個數(shù)為素?cái)?shù)的具體實(shí)例代碼,有需要的朋友可以作為參考看下2016-12-12最新評論