autojs悬浮时间_js前端日历控件（悬浮、拖拽、自由变形）

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

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

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

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

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

控件包加载是这样的：

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

例如页面代码如下：

调用的写法：

var dpCon = $("#datepickerInput").datePrinter({

initDate: "2017-4-5", //初始化日期

language: "EN", //语言

resizable: true, //可自由变形

draggable: true, //可悬浮拖拽

showYearAndMonth: true, //是否显示年月下拉框

getColor: getColor, //自定义颜色接口

chooseDone: chooseDone //选中日历某日执行事件接口

});

//选中日期时让日历消失 当然此处可以执行比较复杂的业务，如服务器数据请求

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";

}

//获取当前选中的日期 调用控件提供的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, 30, 31, 31, 30, 31, 30, 31),

//确定日期表格所需的行数

str_nums = Math.ceil((dayOfWeek + days_per_month[m] - 1) / 7);

//二维数组创建日期表格

for (i = 0; i < str_nums; i += 1) {

var tr = '

';

for (k = 0; k < 7; k++) {

//为每个表格创建索引,从0开始

var idx = 7 * i + k;

//将当月的1号与星期进行匹配

var day = idx - dayOfWeek +2;

var styleName = self._getColor(day