js前端日历控件（悬浮、拖拽、自由变形）
发布时间 - 2026-01-10 23:23:07 点击率：次很少发现网上有简洁好用的自定义前端控件的贴子，最近项目中需要，自己YY开始写前端控件，在此给大家分享
控件是基于jQuery.UI的Widget写的，写起来就方便很多，使用起来跟普通jQuery控件一样$(#id).control(option)，看着眼熟吧，下面就开始了。
首先说下控件的依赖包，加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css
这个包也需要引用，此包主要应用了jQuery拖拽和放缩的样式，控件样式方面大家自由发挥，给了个自己写的默认样式包 (献丑了)。
控件本身支持颜色自定义，可根据日期自定义日历上某日的颜色，另外可悬浮，拖拽，自由变形算是卖点吧，哈哈
控件包加载是这样的：
<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>
控件中的核心部分就是打印选中月的日历，是参考网上的代码，偷懒嘛，欢迎认领
例如页面代码如下：
<input type="text" id="datepickerInput"/>
调用的写法：
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 = '<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">' + day + '</td>' :
//高亮显示当天
tr += '<td class="' + styleName + '">' + day + '</td>';
}
tr += '</tr>';
self._dpTable.append(tr);
tr = "";
}
以前都是写后台，玩前端的时间不长，有不对的地方欢迎指正
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(), //小时
"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("<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();
//点击事件
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, 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;
//根据初始化设置时间计算
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;
//根据初始化设置时间计算
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);
}
//默认获取当前日期
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 = '<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">' + day + '</td>' :
//高亮显示当天
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;
},
//选中日期时设置选中值 day为currentDate当月的第几日
_setDate: function (day) {
var self = this, option = this.options, 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, 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;
}
});
样式本人是业余的，勉强看看吧，由于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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# js
# 日历控件
# JS实现简单日历特效
# javascript实现日历效果
# js+html制作简单日历的方法
# 纯JS实现简单的日历
# js实现日历的简单算法
# js css+html实现简单的日历
# 轻量级的原生js日历插件calendar.js使用指南
# JS学习之一个简易的日历控件
# JS日历 推荐
# 原生js实现日历效果
# 自定义
# 当月
# 的是
# 当天
# 是从
# 以此类推
# 所需
# 拖拽
# 加载
# 就用
# 需要注意
# 星期天
# 创建日期
# 都是
# 行数
# 看着
# 就会
# 鼠标
# 在此
# 是这样
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例
Javascript中的事件循环是如何工作的_如何利用Javascript事件循环优化异步代码？
Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives
Android中AutoCompleteTextView自动提示
CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】
潮流网站制作头像软件下载,适合母子的网名有哪些？
Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决
如何用PHP快速搭建CMS系统？
如何在Windows 2008云服务器安全搭建网站？
Laravel如何编写单元测试和功能测试？（PHPUnit示例）
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Laravel如何升级到最新版本？（升级指南和步骤）
如何在橙子建站上传落地页？操作指南详解
Laravel如何实现邮件验证激活账户_Laravel内置MustVerifyEmail接口配置【步骤】
南京网站制作费用,南京远驱官方网站？
东莞专业网站制作公司有哪些,东莞招聘网站哪个好？
Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】
Laravel如何使用Livewire构建动态组件？（入门代码）
Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】
php485函数参数是什么意思_php485各参数详细说明【介绍】
如何自定义建站之星模板颜色并下载新样式？
如何挑选高效建站主机与优质域名？
Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置
如何构建满足综合性能需求的优质建站方案？
laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法
哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？
如何快速搭建虚拟主机网站？新手必看指南
Laravel中的Facade(门面)到底是什么原理
html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】
Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用
Laravel如何实现事件和监听器？（Event & Listener实战）
如何在 Go 中优雅地映射具有动态字段的 JSON 对象到结构体
laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法
,南京靠谱的征婚网站？
深圳网站制作平台,深圳市做网站好的公司有哪些？
网页设计与网站制作内容,怎样注册网站？
如何注册花生壳免费域名并搭建个人网站？
Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能
瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口
香港服务器建站指南：外贸独立站搭建与跨境电商配置流程
谷歌Google入口永久地址_Google搜索引擎官网首页永久入口
如何基于云服务器快速搭建网站及云盘系统？
香港网站服务器数量如何影响SEO优化效果？
详解MySQL数据库的安装与密码配置
Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】
Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验
Laravel distinct去重查询_Laravel Eloquent去重方法
如何快速生成ASP一键建站模板并优化安全性？
ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法
如何快速搭建高效服务器建站系统？