摘要:需求日期面板默認(rèn)展開可以根據(jù)點(diǎn)擊的日期,處理額外的信息,如在這天記錄一些信息等大部分的日期插件日期面板是隱藏的,點(diǎn)擊的時(shí)候日期面板顯示,基于的日期插件如果是在元素上實(shí)例化插件的情況,面板是顯示的,在上面板則是隱藏的。
需求:
(1)日期面板默認(rèn)展開
(2)可以根據(jù)點(diǎn)擊的日期,處理額外的信息,如在這天記錄一些信息等
大部分的日期插件日期面板是隱藏的,點(diǎn)擊input的時(shí)候日期面板顯示,基于bootstrap的datetimepicker日期插件如果是在div元素上實(shí)例化插件的情況,面板是顯示的,在input 上面板則是隱藏的。感覺此插件不是太美觀,默認(rèn)樣式如下:
現(xiàn)我們把樣式風(fēng)格更改成下面的
完整的代碼
html
星期一
- 上午9:30 開銷售會議
- 上午10:30 學(xué)習(xí)業(yè)務(wù)知識
- 上午11:30 整理合同
css
.calendar { width: 1000px; margin: 0 auto; overflow: hidden; font-family: "微軟雅黑"; font-size: 16px; background:#fffbef; border:1px solid #d6c5bd; border-radius:4px } .datetimepicker{padding:5px 15px 15px;} .form-control{border-radius:4px;} .tfoot { display: none; } .calendar .form_date { width: 70%; float: left; background: #fffbef; } .datetimepicker-inline { width: 100%; } .datetimepicker-inline table { width: 100%; } .datetimepicker-inline table tbody tr, .datetimepicker-inline table thead tr { height: 50px; } .datetimepicker-inline table tr td { border: 1px solid #ffffd; } .datetimepicker-inline table thead tr:first-child { border-bottom: 1px solid #ccc; } .datetimepicker table tr td.old, .datetimepicker table tr td.new { pointer-events: none; } .datetimepicker table tr td.today, .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today.disabled, .datetimepicker table tr td.today.disabled:hover { background: #fc9348; } .datetimepicker table tr td.today.active, .datetimepicker table tr td.today.active:hover, .datetimepicker table tr td.today.active:focus, .datetimepicker table tr td.today { background: #fc9348; color: #fff } .datetimepicker table tr td.today:hover, .datetimepicker table tr td.today:hover:hover { background: #fc9348; color: #fff } .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active { background: #00ada7; } .calendar .calendarInfor { width: 30%; height: 423px; background:#ff9161; float: right; } .calendarInfor{padding:15px;position:relative;} .calendarInfor_title{color:#fff;height:40px;line-height:40px;background:#fe7e46;border-bottom:2px solid #df6e3c;border-radius:5px;padding:0px 15px;margin-bottom:30px;} .calendarInfor_content{height:202px;overflow:auto;color:#fff;border:1px solid #ffccb6;padding:10px 15px;border-radius:5px;margin-bottom:25px;} .calendarInfor_content li{height:40px;line-height:40px;border-bottom:1px solid #ffb08d;} .calendarBtn{position:absolute;bottom:30px;left:15px;right:15px;} .calendarBtn .btn-add{border-color:#fdbc9f;background:#fcaf60;color:#fff;outline:none;box-shadow:none;} .calendarBtn .btn-add:focus:active{color:#fff;border-color:#fdbc9f;background:#fcaf60;outline:0;box-shadow:inset 0 1px 5px rgba(0,0,0,.05);} .calendarBtn .btn-add:hover{background:#fdb66d;} .calendarBtn .btn-save{border-color:#e65769;background:#f76375;color:#fff;outline:none;box-shadow:none;} .calendarBtn .btn-save:focus:active{color:#fff;border-color:#e65769;background:#f76375;outline:0;box-shadow:inset 0 1px 5px rgba(0,0,0,.05);} .calendarBtn .btn-save:hover{background:#ee6172;} .add_input{box-shadow:none;border:1px solid #fff} .add_input:focus{box-shadow:none;border-color:#fee3bf;}
js
$(document).ready(function() { //初始化時(shí)間 var myDate = new Date(); getWeek(myDate, 1); //option設(shè)置 $(".form_date").datetimepicker({ language: "zh-CN", locale: "hu", dayViewHeaderFormat: "YYYY. MMMM", format: "YYYY.MM.DD. ffffdd - hh:mm:ss a", weekStart: 1, //todayBtn: 1, //autoclose: 1, todayHighlight: 1, startView: 2, //需要,否則點(diǎn)擊會顯示小時(shí) minView: 2, //forceParse: 0 }); function getWeek(date, label) { var Y = date.getFullYear(); var M = date.getMonth() + 1; var D = date.getDate(); var W; var fullTime; var w = date.getDay(); switch (w) { case 1: W = "星期一"; break; case 2: W = "星期二"; break; case 3: W = "星期三"; break; case 4: W = "星期四"; break; case 5: W = "星期五"; break; case 6: W = "星期六"; break; case 0: W = "星期天"; break } if (label == 1) { fullTime = Y + "年" + M + "月" + D + "日"; $(".time").html(fullTime); $(".week").html(W); } else if (label == 2) { fullTime = Y + "年" + M + "月"; $(".time").html(fullTime); $(".week").html(""); } else if (label == 3) { M = M + 1; fullTime = Y + "年" + M + "月"; $(".time").html(fullTime); $(".week").html(""); } else { 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", function(ev) { getWeek(ev.date, 2); }) $("#add").click(function() { var inputText = $("").html("") $(".calendarInfor_content").append(inputText); }) function getTitleMonthTime() { var content = $(".datetimepicker-days .switch").html(); content = content.split(" ").reverse(); content[0] = content[0] + "年"; content.join(" "); $(".time").html(content); $(".week").html(""); } function getTitleYearTime() { var content = $(".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(function() { setTimeout(getTitleYearTime, 200) }) })
微信公眾號:前端之攻略
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/98402.html
摘要:需求日期面板默認(rèn)展開可以根據(jù)點(diǎn)擊的日期,處理額外的信息,如在這天記錄一些信息等大部分的日期插件日期面板是隱藏的,點(diǎn)擊的時(shí)候日期面板顯示,基于的日期插件如果是在元素上實(shí)例化插件的情況,面板是顯示的,在上面板則是隱藏的。 需求: (1)日期面板默認(rèn)展開 (2)可以根據(jù)點(diǎn)擊的日期,處理額外的信息,如在這天記錄一些信息等 大部分的日期插件日期面板是隱藏的,點(diǎn)擊input的時(shí)候日期面板顯示,基于...
摘要:但是反過來,開始日期輸入框中的可選結(jié)束月份卻沒有問題。初步判斷是在設(shè)置開始月份的語句上有問題。看了一下源碼,找到了原因,是行的代碼應(yīng)該是減,而不是加代碼行修改為修改后顯示正常 datetimepicker插件下載地址 代碼如下: //日期輸入框 $(input).datetimepicker({ format: yyyy-mm, //日期格式為年-月 startV...
摘要:接著上次的進(jìn)度,我們已經(jīng)實(shí)現(xiàn)了一個。我們應(yīng)該完成的效果是一個,日期選擇器。好了,到這一步,還不能實(shí)現(xiàn)這個插件。我們還需要添加一個方法,因?yàn)椴]有被執(zhí)行,所以我們需要添加如下代碼好了,這里事件選擇插件就能順利使用了。與的結(jié)合使用實(shí)例 接著上次的進(jìn)度,我們已經(jīng)實(shí)現(xiàn)了一個todo-list。它已經(jīng)具備了基本的功能,可以新建、編輯、刪除任務(wù)。但是美中不足的是,它的時(shí)間設(shè)定上只能通過輸入一段字符...
摘要:先上圖片看效果今天遇到一個需求,需要選擇日期的時(shí)候時(shí)分秒都要為當(dāng)時(shí)這種寫法并不好用自己改了一下插件實(shí)現(xiàn)效果如下需要支持中文的需要修改需要改成下面的效果。 先上圖片(看效果)showImg(https://segmentfault.com/img/bV1wOs?w=1890&h=488);showImg(https://segmentfault.com/img/bV1wOW?w=1858...
摘要:日期時(shí)間選擇器所能夠提供的最精確的時(shí)間選擇視圖。當(dāng)選擇器關(guān)閉的時(shí)候,是否強(qiáng)制解析輸入框中的值。結(jié)束時(shí)間顯示箭頭顯示中文包問題語言包 基于bootstrap的css,jsbootstrap-datetimepicker的css,js // 開始時(shí)間: $(#qBeginTime).datetimepicker({ todayBt...
閱讀 1951·2021-09-07 10:24
閱讀 2087·2019-08-30 15:55
閱讀 2037·2019-08-30 15:43
閱讀 669·2019-08-29 15:25
閱讀 1044·2019-08-29 12:19
閱讀 1927·2019-08-23 18:32
閱讀 1515·2019-08-23 17:59
閱讀 947·2019-08-23 12:22