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)配置
如果每個(gè)控件都按照上述js的寫(xiě)法,是不是很痛苦。所以可以將您認(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這個(gè)地方.

現(xiàn)在您只需要即可實(shí)現(xiàn)效果。
$("#birthdayGroup .input-group.date").datepicker();
6 時(shí)間段的日期
jsp頁(yè)面重點(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">入庫(kù)日期:</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的配置也相對(duì)簡(jiǎn)單,在初始化的時(shí)候做一下配置,這樣就可以了
$(".input-daterange").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});
從下圖實(shí)例可以看出,日歷中有個(gè)選中的日期,前后兩個(gè)日期的前后大小,由控件本身完成,不需要人為做什么操作了.

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決layer彈出層的內(nèi)容頁(yè)點(diǎn)擊按鈕跳轉(zhuǎn)到新的頁(yè)面問(wèn)題
今天小編就為大家分享一篇解決layer彈出層的內(nèi)容頁(yè)點(diǎn)擊按鈕跳轉(zhuǎn)到新的頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連
這篇文章主要介紹了詳解微信小程序?qū)崿F(xiàn)WebSocket心跳重連,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模仿微博發(fā)布效果實(shí)例代碼,有需要的朋友可以參考一下2013-12-12
react-router-dom?v6?通過(guò)outlet實(shí)現(xiàn)keepAlive?功能的實(shí)現(xiàn)
本文主要介紹了react-router-dom?v6?通過(guò)outlet實(shí)現(xiàn)keepAlive功能,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇js style.display=block顯示布局錯(cuò)亂問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
JavaScript?新提案optional?chaining可選鏈屬性原理詳解
這篇文章主要為大家介紹了JavaScript?新提案optional?chaining可選鏈屬性原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
如何利用js實(shí)時(shí)監(jiān)聽(tīng)input輸入框值的變化
在做web開(kāi)發(fā)時(shí)候很多時(shí)候都需要即時(shí)監(jiān)聽(tīng)輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感,這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)時(shí)監(jiān)聽(tīng)input輸入框值的變化,需要的朋友可以參考下2024-02-02

