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 = FullYear(),
//获取⽇期中的⽉份(需要注意的是：⽉份是从0开始计算，获取的值⽐正常⽉份的值少1)
m = Month(),
//获取⽇期中的⽇(⽅便在建⽴⽇期表格时⾼亮显⽰当天)
d = Date(),
//获取当⽉的第⼀天
firstday = new Date(y, m, 1),
//判断第⼀天是星期⼏(返回[0-6]中的⼀个，0代表星期天，1代表星期⼀，以此类推)
dayOfWeek = Day() == 0 ? 7 : Day(),
//创建⽉份数组
days_per_month = new Array(31, 28 + self._isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //确定⽇期表格所需的⾏数
str_nums = il((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);
if (Color && typeof (Color) == 'function')
styleName = Color(day);
styleName += " dateTD";
(day <= 0 || day > days_per_month[m]) ?
//索引⼩于等于0或者⼤于⽉份最⼤值就⽤空表格代替
(day = ' ', styleName = "dpBlank") : (day = idx - dayOfWeek + 2);
day == d ? tr += '
' + day + '' :
//⾼亮显⽰当天
tr += '
' + day + '';
}
tr += '
';
self._dpTable.append(tr);
tr = "";
}
以前都是写后台，玩前端的时间不长，有不对的地⽅欢迎指正
datePrinter.js的全部代码如下：
var _datePrinter_tmpl_CN = "
⼀⼆三四五六⽇";
var _datePrinter_tmpl_EN = "
MonTueWedThuFriSatSun";
Date.prototype.Format = function (fmt) { //author: meizz
var o = {js 二维数组
"M+": Month() + 1, //⽉份
"d+": Date(), //⽇
"h+": Hours(), //⼩时
"m+": Minutes(), //分
"s+": Seconds(), //秒
"q+": Math.floor((Month() + 3) / 3), //季度
"S": Milliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = place(RegExp.$1, (FullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = place(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._pty();
self._dpRoot.append("
");
self._dpRoot.append("
");
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(place("-", "/"));
//初始化⽇历
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 (sizable)
self._sizable({
minHeight: self._dpRoot.css("height").replace("px",''),
minWidth:place("px",''),
resize: function (event, ui) {
var titleHeight = self._dpRoot.find("div.dpTitle").css("height").replace("px", ""); //最⼩值时不再缩⼩
if (ui.size.width >= Number(place("px",''))) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。