bootstrap-datepicker沙箱环境:
bootstrap-datepicker沙箱环境:
1, requirejs配置
requirejs.config ({
baseUrl:“. ./页面/模块”,//urlArgs:“v=" +(新日期()).getTime()//禁止缓存,生产环境去除
urlArgs: v=2016110701,
道路:{
jquery:[" . ./. ./插件/jquery/jquery”),
引导:[" . ./. ./插件/引导/dist/js/bootstrap.min”),
datepicker:(“. ./. ./插件/bootstrap-datepicker/dist/js/bootstrap-datepicker.min”),
datepicker_zh:(“. ./. ./插件/bootstrap-datepicker/dist/地区/bootstrap-datepicker.zh-CN.min”)
},
垫片:{
引导:{deps:(“jquery”),出口:“引导”},
datepicker: {deps:(“jquery”),出口:“datepicker”},
datepicker_zh: {deps:“jquery”、“datepicker”,出口:“datepicker_zh”}
}
});
要求([“jquery”、“引导”]);
之前
html 2
& lt; div class="形式的班级坳col-sm-3填充no-margin-bottom " id=癰irthdayGroup”比;
& lt;标签类="坳col-sm-4 text-right form标签no-padding-left”在出生日期:& lt;/label>
& lt; div class="坳col-sm-8 no-padding-left no-padding-left input-group日期”在
& lt;跨类=癷nput-group-addon”比;
& lt;我类=" fa fa-calendar "祝辞& lt;/i>
& lt;/span>
& lt;输入id=吧铡崩嘈?拔谋尽眂lass=氨淼タ丶闭嘉环?背錾掌凇?比;
& lt;/div>
& lt;/div>
之前
3 js
var=美元需要(“jquery”);
要求(“datepicker_zh”);
$ (" # birthdayGroup .input-group.date”)。datepicker ({todayHighlight:真的,todayBtn:“联系”
keyboardNavigation:真的,autoclose:真的,语言:“应用”,格式:“yyyy-mm-dd”
daysOfWeekHighlighted:“0, 6 '});
之前
4效果
5更改默认配置
如果每个控件都按照上述js的写法,是不是很痛苦,所以可以将您认为常用的配置设置到
设置完毕后,要做的是日期的格式,因为bootstrap-datepicker.zh-CN.min.js将格式设置为了yyyy年mm月dd日,所以如果您想默认格式为“yyyy-mm-dd”,还得改bootstrap-datepicker.zh-CN.min.js这个地方。
现在您只需要即可实现效果。
6时间段的日期
jsp页面重点是input-daterange input-group的样式
& lt; div class="形式的班级坳col-sm-4填充no-margin-bottom”比;
& lt;标签类="坳col-sm-4 text-right form标签no-padding-left”祝辞入库日期:& lt;/label>
& lt; div class="坳col-sm-8 col-xs-6 no-padding-left input-daterange input-group”比;
& lt;输入类型=拔谋尽眂lass=癷nput-sm表单控件“name=" filter_ged_instockDate__FontalInstockExample " value=" https://www.yisu.com/zixun/
& lt;输入类型=拔谋尽眂lass=癷nput-sm表单控件“name=" filter_led_instockDate__FontalInstockExample " value=" https://www.yisu.com/zixun/
$ (" .input-daterange ") .datepicker ({forceParse keyboardNavigation: ! 1: ! 1, autoclose: ! 0});
之前
从下图实例可以看的出,日历中有个选中的日期,前后两个日期的前后大小,由控件本身完成,不需要人为做什么操作了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
