Bootstrapdatetimepicker日期插件美化

时间：2023-03-30 13:43:09 CSS

需求：（1）日期面板默认展开（2）可以根据点击的日期进行附加信息处理，比如记录这一天的一些信息等。日期插件日期面板大部分是隐藏的，日期单击输入时显示面板。如果在div元素上实例化基于bootstrap的datetimepicker日期插件，显示面板，在input上隐藏面板。感觉这个插件不是很漂亮，默认样式如下：现在我们把样式改成如下完整代码html

星期一

上午9:30的销售会议

上午10:30学习业务知识

11am:30组织合同

增加保存

css.calendar{width:1000px;margin:0auto;overflow:hidden;font-family:"微软雅黑";font-size:16px;background:#fffbef;border:1pxsolid#d6c5bd;border-radius:4px}.datetimepicker{padding:5px15px15px;}.form-control{border-radius:4px;}.tfoot{display:none;}.calendar.form_date{width:70%;float:left;background:#fffbef;}.datetimepicker-inline{width:100%;}.datetimepicker-inlinetable{width:100%;}.datetimepicker-inlinetabletbodytr,.datetimepicker-inlinetabletheadtr{height:50px;}.datetimepicker-inlinetabletrtd{border:1pxsolid#ddd;}.datetimepicker-inlinetabletheadtr:first-child{border-bottom:1pxsolid#ccc;}.datetimepicker表trtd.old，.datetimepicker表trtd.new{指针事件：无；}.datetimepicker表trtd.today,.datetimepicker表trtd.today:hover,.datetimepicker表trtd.today.disabled,.datetimepicker表trtd.today.disabled:hover{background:#fc9348;}.datetimepicker表trtd.today.active,.datetimepicker表trtd.today.active:hover,.datetimepicker表trtd.today.active:focus,.datetimepicker表trtd.today{background:#fc9348;颜色：#fff}.datetimepicker表trtd.today:hover,.datetimepicker表trtd.today:hover:hover{背景：#fc9348;颜色：#fff}.datetimepicker表trtd.active:active,.datetimepicker表trtd.active:hover:active,.datetimepicker表trtd.active.disabled:active,.datetimepicker表trtd.active.disabled:hover:active,.datetimepicker表trtd.active.active,.datetimepicker表trtd.active:hover.active,.datetimepicker表trtd.active.disabled.active,.datetimepicker表trtd.active.disabled:hover.活动{背景：#00ada7；}.calendar.calendarInfor{宽度：30%；高度：423px；背景：#ff9161;浮动：对；}.calendarInfor{padding:15px;position:relative;}.calendarInfor_title{color:#fff;height:40px;line-height:40px;background:#fe7e46;border-bottom:2pxsolid#df6e3c;border-radius:5px;padding:0px15px;margin-bottom:30px;}.calendarInfor_content{height:202px;overflow:auto;color:#fff;border:1pxsolid#ffccb6;padding:10px15px;border-radius:5px;margin-bottom:25px;}.calendarInfor_contentli{height:40px;line-height:40px;border-bottom:1pxsolid#ffb08d;}.calendarBtn{position:absolute;bottom:30px;left:15px;right:15px;}.calendarBtn.btn-add{边框颜色:#fdbc9f;background:#fcaf60;color:#fff;outline:none;box-shadow:none;}.calendarBtn.btn-add:focus:active{color:#fff;border-color:#fdbc9f;background:#fcaf60;大纲:0;box-shadow:inset01px5pxrgba(0,0,0,.05);}.calendarBtn.btn-add:hover{background:#fdb66d;}.calendarBtn.btn-save{border-color:#e65769；背景：#f76375；颜色：#fff；轮廓：无；框阴影：无；}.calendarBtn.btn-save:focus:active{color:#fff;border-color:#e65769;背景：#f76375;outline:0;box-shadow:inset01px5pxrgba(0,0,0,.05);}.calendarBtn.btn-save:hover{background:#ee6172;}.add_input{box-shadow:none;border:1pxsolid#fff}.add_input:focus{box-shadow:none;border-color:#fee3bf;}js$(document).ready(function(){//初始化时间varmyDate=newDate();getWeek(myDate,1);//选项设置$('.form_date').datetimepicker({language:'zh-CN',locale:"hu",dayViewHeaderFormat:"YYYY.MMMM",format:"YYYY.MM.DD.dddd-hh:mm:ssa",weekStart:1,//todayBtn:1,//autoclose:1,todayHighlight:1,startView:2,//必须，否则点击会显示小时minView:2,//forceParse:0});functiongetWeek(date,label){varY=date.getFullYear();varM=date.getMonth()+1;varD=date.getDate();varW;varfullTime;varw=date.getDay();switch(w){case1:W="Monday";break;case2:W="Tuesday";break;case3:W="Wednesday";break;case4:W="Thursday";break;case5:W="Friday";break;case6:W="Saturday";休息;case0:W="星期天";break}if(label==1){fullTime=Y+"年"+M+"月"+D+"日";$(".time").html(全职);$(".week").html(W);}elseif(label==2){fullTime=Y+"年"+M+"月";$(".time").html(全职);$(".week").html("");}elseif(label==3){M=M+1;fullTime=Y+"年"+M+"月";$(".time").html(全职);$(".week").html("");}否则{Y=Y+1;fullTime=Y+"年"$(".time").html(fullTime);$(".week").html("");}}$('.form_date').datetimepicker().on("changeDate",function(ev){getWeek(ev.date,1);})$('.form_date').datetimepicker().on(“changeMonth”，有趣动作（ev）{getWeek（ev.date，2）;})$("#add").click(function(){varinputText=$("

").html('')$(".calendarInfor_content").append(inputText);})functiongetTitleMonthTime(){varcontent=$(".datetimepicker-days.switch").html();content=content.split("").reverse();内容[0]=内容[0]+"年";content.join("");$(".time").html(内容);$(".week").html("");}functiongetTitleYearTime(){varcontent=$(".datetimepicker-months.switch").html();content=content+"年"$(".time").html(content);$(".week").html("");}$(".datetimepicker-days.next").click(function(){setTimeout(getTitleMonthTime,200)})$(".datetimepicker-days.prev").click(function(){setTimeout(getTitleMonthTime,200)})$(".datetimepicker-months.next").click(function(){setTimeout(getTitleYearTime,200)})$(".datetimepicker-months.prev").click(函数(){setTimeout(getTitleYearTime,200)})})微信公众号：前端之攻略

上一篇：短标题自动两端对齐

下一篇：前端面试日常3+1——Day375

Bootstrapdatetimepicker日期插件美化相关文章