bootstrap日期控件问题(双日期、清空等问题解决)
bootstrap以它优美的外观和丰富的组件,使它成为目前最流行的前端框架。在项目开发中,我们使用它的日期控件确实遇到了一些问题:
1.日期控件后面两个图标点击触发失效
2.双日期关联问题
3.双日期清空时,之前输入日期关联仍然有效
4.输入年月
5.图标不显示(这个直接在引入图标的文件里搜url地址,修改地址就可以解决)
下面的代码都会一一解决。
bootstrap日期 $(function(){ //输入开始日期和结束日期 //定位div上的id,不是input上id,否则后面两个小图标会失效 $("#startdiv").datetimepicker({ pickerPosition:"bottom-left", language:'zh-CN', format:"yyyy-mm-dd", weekStart:1, todayBtn:1, autoclose:1, todayHighlight:1, startView:2, minView:2, forceParse:0 }); $("#endDiv").datetimepicker({ pickerPosition:"bottom-left", language:'zh-CN', format:"yyyy-mm-dd", weekStart:1, todayBtn:1, autoclose:1, todayHighlight:1, startView:2, minView:2, forceParse:0 }); //输入年月 $("#birthMonth").datetimepicker({ language:'zh-CN', format:'yyyy-mm', autoclose:true, //todayBtn:true,今天提示 startView:'year', minView:'year', maxView:'decade' }); $('#startdiv').unbind("change"); $('#startdiv').change(function(){ $('#endDiv').datetimepicker('setStartDate',$("#start").val()); }); $('#endDiv').unbind("change"); $('#endDiv').change(function(){ $('#startdiv').datetimepicker('setEndDate',$("#end").val()); }); }); functionclearForm(){ $('#start').val(''); $('#end').val(''); //用于解决清空后,前后日期还会关联的问题 $('.input-group-addon:has(span.glyphicon-remove)').click(); } bootstrap日期控件