js前端日歷控件（懸浮、拖拽、自由變形）
更新時(shí)間：2017年03月02日 11:33:52 作者：草根鞋
這篇文章主要為大家詳細(xì)介紹了js前端日歷控件，可根據(jù)日期自定義日歷上某日的顏色，另外可以懸浮，拖拽，自由變形
很少發(fā)現(xiàn)網(wǎng)上有簡潔好用的自定義前端控件的貼子，最近項(xiàng)目中需要，自己YY開始寫前端控件，在此給大家分享
控件是基于jQuery.UI的Widget寫的，寫起來就方便很多，使用起來跟普通jQuery控件一樣$(#id).control(option)，看著眼熟吧，下面就開始了。
首先說下控件的依賴包，加載控件的時(shí)候必須先加載jQuery, jQuqery.UI, 另外jquery-ui.css
這個(gè)包也需要引用，此包主要應(yīng)用了jQuery拖拽和放縮的樣式，控件樣式方面大家自由發(fā)揮，給了個(gè)自己寫的默認(rèn)樣式包 (獻(xiàn)丑了)。
控件本身支持顏色自定義，可根據(jù)日期自定義日歷上某日的顏色，另外可懸浮，拖拽，自由變形算是賣點(diǎn)吧，哈哈
控件包加載是這樣的：
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="../../Content/datePrinter.css" rel="stylesheet" /> <script src="../../Scripts/default/jquery-ui-1.8.20.min.js"></script> <script src="../../Scripts/control/datePrinter.js"></script>
控件中的核心部分就是打印選中月的日歷，是參考網(wǎng)上的代碼，偷懶嘛，歡迎認(rèn)領(lǐng)
例如頁面代碼如下：
<input type="text" id="datepickerInput"/>
調(diào)用的寫法：
var dpCon = $("#datepickerInput").datePrinter({
initDate: "2017-4-5", //初始化日期
language: "EN", //語言
resizable: true, //可自由變形
draggable: true, //可懸浮拖拽
showYearAndMonth: true, //是否顯示年月下拉框
getColor: getColor, //自定義顏色接口
chooseDone: chooseDone //選中日歷某日?qǐng)?zhí)行事件接口
});
//選中日期時(shí)讓日歷消失 當(dāng)然此處可以執(zhí)行比較復(fù)雜的業(yè)務(wù)，如服務(wù)器數(shù)據(jù)請(qǐng)求
function chooseDone(date) {
dpCon.datePrinter("dpHide");
}
//自定義日期顏色
function getColor(day){
if(day == 3 || day==7 || day==15)
return "dpdisabled";
else if(day== 5 || day==18 || day==23)
return "dpyellow";
else
return "dpenable";
}
//獲取當(dāng)前選中的日期 調(diào)用控件提供的API getSelectDate
dpCon.datePrinter("getSelectDate");
這樣子就給上面的input text控件注冊了一個(gè)日歷控件，在點(diǎn)擊input時(shí)，日歷就會(huì)浮出，效果如下
你可能注意到右下角的小三角了，鼠標(biāo)放上去之后可以隨意變化日歷的長寬，另外在日歷上按住鼠標(biāo)左鍵可以隨意移動(dòng)日期控件的位置，不擠占頁面位置
下面這段是打印日歷的代碼，供參考：
//默認(rèn)獲取當(dāng)前日期
var today = option.initDate ? option.initDate : new Date();
this.options.initDate = today;
//獲取日期中的年份
var y = today.getFullYear(),
//獲取日期中的月份(需要注意的是：月份是從0開始計(jì)算，獲取的值比正常月份的值少1)
m = today.getMonth(),
//獲取日期中的日(方便在建立日期表格時(shí)高亮顯示當(dāng)天)
d = today.getDate(),
//獲取當(dāng)月的第一天
firstday = new Date(y, m, 1),
//判斷第一天是星期幾(返回[0-6]中的一個(gè)，0代表星期天，1代表星期一，以此類推)
dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),
//創(chuàng)建月份數(shù)組
days_per_month = new Array(31, 28 + self._isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
//確定日期表格所需的行數(shù)
str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);
//二維數(shù)組創(chuàng)建日期表格
for (i = 0; i < str_nums; i += 1) {
var tr = '<tr>';
for (k = 0; k < 7; k++) {
//為每個(gè)表格創(chuàng)建索引,從0開始
var idx = 7 * i + k;
//將當(dāng)月的1號(hào)與星期進(jìn)行匹配
var day = idx - dayOfWeek +2;
var styleName = self._getColor(day);
if (option.getColor && typeof (option.getColor) == 'function')
styleName = option.getColor(day);
styleName += " dateTD";
(day <= 0 || day > days_per_month[m]) ?
//索引小于等于0或者大于月份最大值就用空表格代替
(day = ' ', styleName = "dpBlank") : (day = idx - dayOfWeek + 2);
day == d ? tr += '<td class="' + styleName + ' today">' + day + '</td>' :
//高亮顯示當(dāng)天
tr += '<td class="' + styleName + '">' + day + '</td>';
}
tr += '</tr>';
self._dpTable.append(tr);
tr = "";
}
以前都是寫后臺(tái)，玩前端的時(shí)間不長，有不對(duì)的地方歡迎指正
datePrinter.js的全部代碼如下：
var _datePrinter_tmpl_CN = "<tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>";
var _datePrinter_tmpl_EN = "<tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>";
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時(shí)
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
$.widget("ui.datePrinter", {
options: {
initDate: null,
language: null, // CN,EN
resizable: false,
draggable: false,
width: "240px",
dateFormat:'yyyy/MM/dd',
getColor: null, //自定義顏色
showYearAndMonth: false,
chooseDone: function (selectDate) { return selectDate }, //選中日期后執(zhí)行的自定義事件
autoId:null //控件Id
},
_dpTable: null,
_dpRoot:null,
_selectDate:null, //選中日期
_create: function () {
var self = this, option = this.options, ele = this.element;
$(ele).after("<div class='dpRoot'></div>");
self._dpRoot = $(ele).parent().find('div.dpRoot');
self._dpRoot.empty();
self._dpRoot.append("<div class='dpTitle' style='text-align:right;background-color:#e8edf4; width:" + option.width +
"'><select class='selYear'></select><select class='selMonth'></select><a style='color:#000;text-decoration:none;font-size:18px;padding-left:10px; padding-right:10px;width:10px;' href='javascript:void(0);'>x</a></div>");
self._dpRoot.append("<table style='width:" + option.width + "' cellspacing='0'></table>");
option.autoId = self._newGuid();
},
_init: function () {
var self = this, option = this.options, ele = this.element;
if (option.initDate && typeof option.initDate == 'string')
option.initDate = new Date(option.initDate.replace("-", "/"));
//初始化日歷
self._initDate();
//點(diǎn)擊事件
self._dpTable.delegate("td", "click", function () {
if (!$(this).hasClass("dpBlank")) {
self._dpTable.find("td").removeClass("today");
$(this).addClass("today");
//控件設(shè)置值
$.proxy(self._setDate($(this).text()), self);
if (option.chooseDone && typeof (option.chooseDone) == 'function')
$.proxy(option.chooseDone(self._selectDate), self);
}
});
if (option.resizable)
self._dpRoot.resizable({
minHeight: self._dpRoot.css("height").replace("px",''),
minWidth:option.width.replace("px",''),
resize: function (event, ui) {
var titleHeight = self._dpRoot.find("div.dpTitle").css("height").replace("px", "");
//最小值時(shí)不再縮小
if (ui.size.width >= Number(option.width.replace("px",''))) {
$(ui.element).find("table").css({ "width": ui.size.width, "height": ui.size.height - titleHeight, "text-align": "center" });
$(ui.element).find("div.dpTitle").css({ "width": ui.size.width });
}
}
});
if(option.draggable)
self._dpRoot.draggable();
//關(guān)閉按鈕事件
self._dpRoot.find("div.dpTitle > a").bind("click", function () {
$.proxy(self.dpHide(), self);
});
if (option.showYearAndMonth) {
self._initSelYear();
self._initSelMonth();
}
$(ele).focus(function () {
self.dpShow();
});
$(ele).click(function () {
self.dpShow();
});
//$(ele).blur(function (e) {
// if ($(e.target).closest('div.dpRoot').length == 0) {
// self.dpHide();
// }
//});
},
_destroy: function () {
var self = this, option = this.options, ele = this.element;
self._dpRoot.empty();
this._prototype._destroy.call(self);
},
_getColor: function (date) {
var styleName = null;
if (date == 3 || date == 5 || date == 12)
styleName = "dpdisabled";
else if (date == 20 || date == 23 || date == 27)
styleName = "dpyellow";
else
styleName = "dpenable";
return styleName;
},
_initSelYear: function () {
var self = this, option = this.options, ele = this.element;
//根據(jù)初始化設(shè)置時(shí)間計(jì)算
var today = option.initDate ? option.initDate : new Date();
this.options.initDate = today;
var y = today.getFullYear(),
m = today.getMonth();
//打印年 + - 10
for (var i = 0; i < 20; i++) {
var varSel = (y == (y + i - 10)) ? "selected='selected'" : "";
self._dpRoot.find("select.selYear").show().append("<option value='" + (y + i - 10) + "' " + varSel + ">" + (y + i - 10) + "</option");
}
//年事件
self._dpRoot.find("select.selYear").bind("change", function () {
option.initDate = new Date(option.initDate.setYear($(this).val()));
self._initDate();
});
},
_initSelMonth: function () {
var self = this, option = this.options, ele = this.element;
//根據(jù)初始化設(shè)置時(shí)間計(jì)算
var today = option.initDate ? option.initDate : new Date();
this.options.initDate = today;
var y = today.getFullYear(),
m = today.getMonth();
//打印月
for (var i = 0; i < 12; i++) {
var varSel = (m == i) ? "selected='selected'" : "";
self._dpRoot.find("select.selMonth").show().append("<option value='" + (i + 1) + "' " + varSel + ">" + (i + 1) + "</option");
}
//月事件
self._dpRoot.find("select.selMonth").bind("change", function () {
var selMon = Number($(this).val()) - 1;
option.initDate = new Date(option.initDate.setMonth(selMon));
self._initDate();
});
},
_initDate: function () {
var self = this, option = this.options, ele = this.element;
self._dpTable = self._dpRoot.find("table");
self._dpTable.empty();
if (option.language == "EN") {
self._dpTable.wrapInner(_datePrinter_tmpl_EN);
}
//默認(rèn)獲取當(dāng)前日期
var today = option.initDate ? option.initDate : new Date();
this.options.initDate = today;
//獲取日期中的年份
var y = today.getFullYear(),
//獲取日期中的月份(需要注意的是：月份是從0開始計(jì)算，獲取的值比正常月份的值少1)
m = today.getMonth(),
//獲取日期中的日(方便在建立日期表格時(shí)高亮顯示當(dāng)天)
d = today.getDate(),
//獲取當(dāng)月的第一天
firstday = new Date(y, m, 1),
//判斷第一天是星期幾(返回[0-6]中的一個(gè)，0代表星期天，1代表星期一，以此類推)
dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),
//創(chuàng)建月份數(shù)組
days_per_month = new Array(31, 28 + self._isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),
//確定日期表格所需的行數(shù)
str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);
//二維數(shù)組創(chuàng)建日期表格
for (i = 0; i < str_nums; i += 1) {
var tr = '<tr>';
for (k = 0; k < 7; k++) {
//為每個(gè)表格創(chuàng)建索引,從0開始
var idx = 7 * i + k;
//將當(dāng)月的1號(hào)與星期進(jìn)行匹配
var day = idx - dayOfWeek +2;
var styleName = self._getColor(day);
if (option.getColor && typeof (option.getColor) == 'function')
styleName = option.getColor(day);
styleName += " dateTD";
(day <= 0 || day > days_per_month[m]) ?
//索引小于等于0或者大于月份最大值就用空表格代替
(day = ' ', styleName = "dpBlank") : (day = idx - dayOfWeek + 2);
day == d ? tr += '<td class="' + styleName + ' today">' + day + '</td>' :
//高亮顯示當(dāng)天
tr += '<td class="' + styleName + '">' + day + '</td>';
}
tr += '</tr>';
self._dpTable.append(tr);
tr = "";
}
},
_isLeap: function (year) {
var self = this, option = this.options, ele = this.element;
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
},
//選中日期時(shí)設(shè)置選中值 day為currentDate當(dāng)月的第幾日
_setDate: function (day) {
var self = this, option = this.options, ele = this.element;
self._selectDate = new Date(option.initDate.getFullYear() + '/' + (option.initDate.getMonth() + 1) + '/' + day);
//設(shè)置輸入框值
$(ele).val(self.getSelectDate(), self);
},
//獲取所選日期
getSelectDate: function () {
var self = this, option = this.options, ele = this.element;
return self._selectDate.Format(option.dateFormat);
},
//顯示
dpShow: function () {
var self = this, option = this.options, ele = this.element;
self._dpRoot.show();
},
//隱藏
dpHide: function () {
var self = this, option = this.options, ele = this.element;
self._dpRoot.hide();
},
//new Guid
_newGuid: function () {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) {
//guid += "-";
}
}
return guid;
}
});
樣式本人是業(yè)余的，勉強(qiáng)看看吧，由于datePrinter.js有依賴css的class名稱，貼出來datePrinter.css文件代碼如下
.dpBlank {
background-color: white;
cursor: not-allowed;
}
.dpRoot {
width: 240px;
position:absolute;
display:none;
}
.today {
border: 2px double #FF9900 !important;
}
.dpenable {
background-color: #AABBFF;
}
.dpyellow {
background-color: #FFC266;
}
.dpdisabled {
background-color: #B0AEA4;
}
.dpRoot table {
font-size: 13px;
width: inherit;
}
.dpRoot table th {
font-size: 12px;
border: solid 2px #e8eef4;
padding: 2px 3px;
background-color: #e8eef4;
border-collapse:initial;
text-align: center;
width: 22px;
}
.dpRoot table td {
color: white;
padding: 4px 5px;
border: solid 2px #e8eef4;
}
.dpTitle {
padding: 3px 0 0 0;
}
.dateTD {
cursor: pointer;
}
.selYear {
margin-right: 5%;
display: none;
font-size:14px;
}
.selMonth {
margin-right: 5%;
display: none;
font-size:14px;
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
async/await?讓異步代碼變成同步的方式，從而使代碼更具表現(xiàn)力和可讀性；還統(tǒng)一了異步編程的經(jīng)驗(yàn)；以及提供了更好的錯(cuò)誤堆棧跟蹤。本文就來講講async/await的使用，需要的可以參考一下2022-09-09
JavaScript數(shù)字和字符串轉(zhuǎn)換示例
這篇文章主要介紹了JavaScript數(shù)字和字符串轉(zhuǎn)換的應(yīng)用,需要的朋友可以參考下2014-03-03
uni-app實(shí)現(xiàn)web-view圖片長按下載解決方案
uniapp的web-view中圖片無法長按保存，IOS下是正常的，但是Android下長按無反應(yīng)，這篇文章主要介紹了uni-app實(shí)現(xiàn)web-view圖片長按下載解決方案,需要的朋友可以參考下2023-09-09
JavaScript判斷兩個(gè)對(duì)象是否相等的方法總結(jié)
判斷兩個(gè)對(duì)象是否相等是js中的一個(gè)很常見的內(nèi)容,不同的編程語言和環(huán)境可能會(huì)有不同的方式來實(shí)現(xiàn)這一目標(biāo),在 JavaScript 中,判斷兩個(gè)對(duì)象是否相等主要有以下幾種方法,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
JavaScript中for與forEach分別如何跳出循環(huán)
forEach的優(yōu)勢一個(gè)是它的回調(diào)函數(shù)形成了一個(gè)作用域,它的curItem和i不會(huì)像for循環(huán)一樣污染全局變量,這篇文章主要給大家介紹了關(guān)于JavaScript中for與forEach分別如何跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了javascript里使用php代碼的方法,以實(shí)例形式展示了javascript與php代碼混編的應(yīng)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
layui前端時(shí)間戳轉(zhuǎn)化實(shí)例
今天小編就為大家分享一篇layui前端時(shí)間戳轉(zhuǎn)化實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在大家日常網(wǎng)站開發(fā)和web應(yīng)用開發(fā)中，我們往往需要有效的調(diào)用Javascript處理日期和時(shí)間格式相關(guān)的函數(shù)，在Javascript中已經(jīng)包含了部分最基本的內(nèi)建處理方法2012-04-04
這篇文章主要給大家簡單介紹了JavaScript聲明變量名的語法規(guī)則，非常有助于大家學(xué)習(xí)javascript，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了微信小程序 select 下拉框組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09