js前端日历控件（悬浮、拖拽、自由变形）

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了js前端日历控件（悬浮、拖拽、自由变形），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

很少发现网上有简洁好用的自定义前端控件的贴子，最近项目中需要，自己YY开始写前端控件，在此给大家分享

控件是基于jQuery.UI的Widget写的，写起来就方便很多，使用起来跟普通jQuery控件一样$(#id).control(option)，看着眼熟吧，下面就开始了。

首先说下控件的依赖包，加载控件的时候必须先加载jQuery,jQuqery.UI,另外jquery-ui.css

这个包也需要引用，此包主要应用了jQuery拖拽和放缩的样式，控件样式方面大家自由发挥，给了个自己写的默认样式包 (献丑了)。

控件本身支持颜色自定义，可根据日期自定义日历上某日的颜色，另外可悬浮，拖拽，自由变形算是卖点吧，哈哈

控件包加载是这样的：

<script src="../../Scripts/default/jquery-ui-1.8.20.min.js">
<script src="../../Scripts/control/datePrinter.js">

控件中的核心部分就是打印选中月的日历，是参考网上的代码，偷懒嘛，欢迎认领

例如页面代码如下：

调用的写法：

显示年月下拉框 getColor: getColor,//自定义颜色接口 chooseDone: chooseDone //选中日历某日执行事件接口 }); 
//选中日期时让日历消失 当然此处可以执行比较复杂的业务，如服务器数据请求
function chooseDone(date) {
  dpCon.datePrinter("dpHide");
}

//<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>日期颜色
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";
}

//<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前选中的日期 <a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>控件提供的API getSelectDate
dpCon.datePrinter("getSelectDate");

这样子就给上面的input text控件注册了一个日历控件，在点击input时，日历就会浮出，效果如下

你可能注意到右下角的小三角了，鼠标放上去之后可以随意变化日历的长宽，另外在日历上按住鼠标左键可以随意移动日期控件的位置，不挤占页面位置

代码，供参考：

获取当前日期 var today = option.initDate ? option.initDate : new Date(); this.options.initDate = today; //获取日期中的年份 var y = today.getFullYear(),//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1) m = today.getMonth(),//获取日期中的日(方便在建立日期表格时高亮显示当天) d = today.getDate(),//获取当月的第一天 firstday = new Date(y,m,1),//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推) dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),//创建月份数组 days_per_month = new Array(31,28 + self._isLeap(y),31,30,31),//确定日期表格所需的行数 str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7); //二维数组创建日期表格 for (i = 0; i < str_nums; i += 1) { var tr = ' (day <= 0 || day > days_per_month[m]) ? //索引小于等于0或者大于月份最大值就用空表格代替 (day = ' ',styleName = "dpBlank") : (day = idx - dayOfWeek + 2); day == d ? tr += '<td class="' + styleName + ' today"&gt;' + day + '</td&gt;' : //高亮<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>当天 tr += '<td class="' + styleName + '"&gt;' + day + '</td&gt;'; } tr += '</tr&gt;'; self._dpTable.append(tr); tr = ""; }

以前都是写后台，玩前端的时间不长，有不对的地方欢迎指正

datePrinter.js的全部代码如下：

Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1,//月份
"d+": this.getDate(),//日
"h+": this.getHours(),//小时
"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 },//选中日期后执行的自定义事件
autoId:null //控件Id
},_dpTable: null,_dpRoot:null,_selectDate:null,//选中日期
_create: function () {
var self = this,option = this.options,ele = this.element;
$(ele).after("

");
self._dpRoot = $(ele).parent().find('div.dpRoot');
self._dpRoot.empty();

self._dpRoot.append("

x
");
self._dpRoot.append("</table>");
option.autoId = self._newGuid();
},_init: function () {
var self = this,ele = this.element;
if (option.initDate && typeof option.initDate == 'string')
option.initDate = new Date(option.initDate.replace("-","/"));

//初始化日历
self._initDate();

//点击事件
self._dpTable.delegate("td","click",function () {
if (!$(this).hasClass("dpBlank")) {
self._dpTable.find("td").removeClass("today");
$(this).addClass("today");
//控件设置值
$.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","");

 //最小值时不再缩小
 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();

//关闭按钮事件
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,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,ele = this.element;
//根据初始化设置时间计算
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,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,ele = this.element;

self._dpTable = self._dpRoot.find("table");
self._dpTable.empty();
if (option.language == "EN") {
self._dpTable.wrapInner(_datePrinter_tmpl_EN);
}

//默认获取当前日期
var today = option.initDate ? option.initDate : new Date();
this.options.initDate = today;
//获取日期中的年份
var y = today.getFullYear(),//获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
m = today.getMonth(),//获取日期中的日(方便在建立日期表格时高亮显示当天)
d = today.getDate(),//获取当月的第一天
firstday = new Date(y,//判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
dayOfWeek = firstday.getDay() == 0 ? 7 : firstday.getDay(),//创建月份数组
days_per_month = new Array(31,//确定日期表格所需的行数
str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);
//二维数组创建日期表格
for (i = 0; i < str_nums; i += 1) {
var tr = '<tr>';
for (k = 0; k < 7; k++) {
//为每个表格创建索引,从0开始
var idx = 7 * i + k;
//将当月的1号与星期进行匹配
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"&gt;' + day + '</td&gt;' :
//高亮<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>当天
tr += '<td class="' + styleName + '"&gt;' + day + '</td&gt;';

}
tr += '</tr>';
self._dpTable.append(tr);
tr = "";
}
},_isLeap: function (year) {
var self = this,ele = this.element;
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
},//选中日期时设置选中值 day为currentDate当月的第几日
_setDate: function (day) {
var self = this,ele = this.element;
self._selectDate = new Date(option.initDate.getFullYear() + '/' + (option.initDate.getMonth() + 1) + '/' + day);
//设置输入框值
$(ele).val(self.getSelectDate(),self);
},//获取所选日期
getSelectDate: function () {
var self = this,ele = this.element;
return self._selectDate.Format(option.dateFormat);
},//显示
dpShow: function () {
var self = this,ele = this.element;
self._dpRoot.show();
},//隐藏
dpHide: function () {
var self = this,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;
}

});

样式本人是业余的，勉强看看吧，由于datePrinter.js有依赖css的class名称，贴出来datePrinter.css文件代码如下

.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

js日历控件

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作