数码资讯
JS前端日历控件（悬浮，拖动，自由变形）
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
很少在网上找到一个简单而好用的自定义前端控件，最近项目需要，自己YY写的前端控件，这里和大家分享一下。
控制是基于jquery.ui控件写的，写起来容易很多，使用相同的普通jQuery控制$（# ID），控制（选项），它看起来很熟悉，下面开始。
首先，说控制的依赖包，当你负荷的控制，你必须加载jQuery，jquqery.ui，和jquery-ui.css
这个包还需要参考这个包，主要应用了jQuery拖动和缩放控件样式样式，大家可以自由发挥，自己编写默认样式包（show）。
控件本身支持颜色定制，它可以根据日期定制日历上的一天的颜色。此外，它可以被暂停，拖动，和自由变形是一个卖点。
控制包加载如下：
控件的核心部分是打印选定月份的日历。它是参考网络的代码。
例如，页面代码如下所示：
呼叫的书写：
无功dpcon = $（# datepickerinput）。DatePrinter（{
initdate：2017-4-5 / /初始化日期
语言：
调整大小：真实 /自由变形
拖动：真的， / /悬浮拖曳
showyearandmonth：真的， / /是否显示日期的下拉框
色鬼：色鬼 / /自定义颜色界面
ChooseDone：choosedone / /日历天选定执行事件接口
}）；
请在这里选择日历消失的日期，可以执行更复杂的操作，如服务器数据请求。
功能choosedone（日期）{
dpcon.dateprinter（dphide ）；
}
自定义日期/颜色
函数GetColor（天）{
如果（一天= 3天= = 7 | | | |天= = 15）
返回dpdisabled ；
如果（天= = = = 18天= = 23 5 | | | |）
返回dpyellow ；
其他的
返回dpenable ；
}
/ /获取当前选定的日期getselectdate提供呼叫控制API
dpcon.dateprinter（getselectdate ）；
这样，上面的输入文本控件就被注册到日历控件中。当你点击输入时，日历就会浮出来，效果如下
你可能会注意到右下角的小三角形。当鼠标放置时，可以随意改变日历的长度和宽度，按日历上的鼠标左键自由移动日期控件的位置，而不占用页面位置。
下面的部分是打印日历供参考的代码。
获取当前日期缺省值
今天option.initdate option.initdate：VaR =新的日期（）；
this.options.initdate =今天；
在收购年度
var y = today.getfullyear（），
获取当月的日期（请注意：月份为0），计算从正常月值减少1的值。
M = today.getmonth（），
在白天/日期（在方便的日子里创建日期）
a today.getdate（），
获得第一个月的第一天
哈尔滨=新的日期（Y，M，1），
本周判断的第一天（返回{ 0-6 }，0代表1代表星期日、星期一，等等）
firstday.getday DayOfWeek =（firstday.getday = = 07）：（一），
创建一个数组
days_per_month =新的阵列（31, 28 +自我。_isleap（Y），31, 30, 31，30, 31, 31，30, 31, 30，31），
行行数的日期表单
str_nums = math.ceil（（周+ days_per_month {米} - 1）/ 7）；
二维数组的创建日期
为（i = 0；i < str_nums；i = 1）{
var=；
对于（k＝0；k＜7；k +）{
为每个表创建索引，从0年初开始
var idx = 7 *我+ K；
1个月和一周的匹配
var = IDX -周+ 2；
VaR为=自我。_getcolor（天）；
如果（option.getcolor typeof（选项。色鬼）= 'function）
为option.getcolor（天）=；
为=datetd ；
（天days_per_month {米}）
该索引小于或等于或大于0个月/月最大值，而不是空窗体。
（天==，为dpblank ）：（天= IDX -周+ 2）；
日= d +日+：
突出显示日
+日+；
}
=；
自_dptable.append（TR）；
；
}
我以前写的背景，时间玩的前端不长，有个错误的地方欢迎指正。
对dateprinter.js整个代码如下：
无功_dateprinter_tmpl_cn =123456天；
无功_dateprinter_tmpl_en =montuewedthufrisatsun ；
date.prototype.format =功能（FMT）{ / /作者：meizz
var { { { {
M +：this.getmonth（+ 1） / /月
D：（这个getdate）， / /天
H：（这个，获得当前的小时） / /小时。
M + ：（这个，获得当前的分钟）， / /分
+：（这个，获得当前的秒）， / /
Q+：Math.floor（（，获得当前的月份）（+ 3）/ 3）， / /季度
S：（这个。getmilliseconds） / /小姐
}；
如果（ / /（Y +）。测试（FMT））
FMT = fmt.replace（regexp。1美元，（（this.getfullyear（）+）。Substr（4—9。1美元。长度））；
对于（k在O中k）
如果（新规则（（钾））。测试（FMT））
FMT = fmt.replace（regexp。1美元（1美元= = 1.length regexp。）（O { }（K）：（00 + O K（{ }）。Substr（长+ O { k }））））；
返回格式化；
}
美元。Widget（ dateprinter UI。
选项：{
initdate：空，
语言：空
调整大小：假，
拖动：假，
宽度：240px
DateFormat：'yyyy / / DD的MM，
色鬼：空 / /自定义颜色
showyearandmonth：假，
ChooseDone：功能（selectdate返回selectdate）{ }， / /执行自定义事件的日期后
自动识别：空/ ID控制
}，
_dptable：空，
_dproot：空，
_selectdate： / /选定的日期无效
_create：（功能）{
VaR自=，= this.options选项，ELE = this.element；
元（元）；
自我。_dproot = $（ELE）。父（）发现（'div.dproot）；
自_dproot.empty（）；
自我。_dproot.append（＜div class= 'dptitle'style = 'text-align：权利；背景颜色：# e8edf4；宽度：+ option.width +
x ）；
自我。_dproot.append（）；
option.autoid =自我_newguid（）；
}，
_init：（功能）{
VaR自=，= this.options选项，ELE = this.element；
如果（option.initdate型option.initdate = = 'String'）
option.initdate =新的日期（option.initdate.replace（，
初始化日历
自_initdate（）；
单击事件
自_dptable.delegate（TD。
如果（！$（这）。HasClass（dpblank ））{
自我。_dptable.find（TD），RemoveClass（今天）；
$（这）。AddClass（今天）；
控制设置值
美元。代理（自我。_setdate（$（this）。文本（）），自）；
如果（option.choosedone typeof（选项。choosedone）= 'function）
美元。代理（option.choosedone（自我。_selectdate），自）；
}
}）；
如果（选项。调整大小）
自我。_dproot.resizable（{
minheight：自我。_dproot.css（高度）。取代（PX
MinWidth：option.width.replace（PX
调整大小：函数（事件，用户界面）{
无功titleheight =自我。_dproot.find（div.dptitle）。Css（高度）。取代（PX
最小值不再减少了。
如果（ui.size.width =数（option.width.replace（PX
$（UI元素）。找到（表）。Css（{宽度：ui.size.width，高度）：ui.size.height - titleheight，文本对齐：中心}）；
$（UI元素）。找到（div.dptitle）。Css（{宽度：UI。大小。宽度}）；
}
}
}）；
如果（选项。拖动）
自_dproot.draggable（）；
关闭按钮事件
自我。_dproot.find（div.dptitle >）。Bind（单击
美元。代理（self.dphide）、（自我）；
}）；
如果（选项。showyearandmonth）{
自_initselyear（）；
自_initselmonth（）；
}
元（焦点）（函数（）{）
Self.dpShow（）；
}）；
元（Click）（函数（）{）
Self.dpShow（）；
}）；
Blur（函数（e）{）
/ /如果（$（e.target）。最近（'div.dproot）。长度= = 0）{
（ / /自我。dphide）；
}
/
控制是基于jquery.ui控件写的，写起来容易很多，使用相同的普通jQuery控制$（# ID），控制（选项），它看起来很熟悉，下面开始。
首先，说控制的依赖包，当你负荷的控制，你必须加载jQuery，jquqery.ui，和jquery-ui.css
这个包还需要参考这个包，主要应用了jQuery拖动和缩放控件样式样式，大家可以自由发挥，自己编写默认样式包（show）。
控件本身支持颜色定制，它可以根据日期定制日历上的一天的颜色。此外，它可以被暂停，拖动，和自由变形是一个卖点。
控制包加载如下：
控件的核心部分是打印选定月份的日历。它是参考网络的代码。
例如，页面代码如下所示：
呼叫的书写：
无功dpcon = $（# datepickerinput）。DatePrinter（{
initdate：2017-4-5 / /初始化日期
语言：
调整大小：真实 /自由变形
拖动：真的， / /悬浮拖曳
showyearandmonth：真的， / /是否显示日期的下拉框
色鬼：色鬼 / /自定义颜色界面
ChooseDone：choosedone / /日历天选定执行事件接口
}）；
请在这里选择日历消失的日期，可以执行更复杂的操作，如服务器数据请求。
功能choosedone（日期）{
dpcon.dateprinter（dphide ）；
}
自定义日期/颜色
函数GetColor（天）{
如果（一天= 3天= = 7 | | | |天= = 15）
返回dpdisabled ；
如果（天= = = = 18天= = 23 5 | | | |）
返回dpyellow ；
其他的
返回dpenable ；
}
/ /获取当前选定的日期getselectdate提供呼叫控制API
dpcon.dateprinter（getselectdate ）；
这样，上面的输入文本控件就被注册到日历控件中。当你点击输入时，日历就会浮出来，效果如下
你可能会注意到右下角的小三角形。当鼠标放置时，可以随意改变日历的长度和宽度，按日历上的鼠标左键自由移动日期控件的位置，而不占用页面位置。
下面的部分是打印日历供参考的代码。
获取当前日期缺省值
今天option.initdate option.initdate：VaR =新的日期（）；
this.options.initdate =今天；
在收购年度
var y = today.getfullyear（），
获取当月的日期（请注意：月份为0），计算从正常月值减少1的值。
M = today.getmonth（），
在白天/日期（在方便的日子里创建日期）
a today.getdate（），
获得第一个月的第一天
哈尔滨=新的日期（Y，M，1），
本周判断的第一天（返回{ 0-6 }，0代表1代表星期日、星期一，等等）
firstday.getday DayOfWeek =（firstday.getday = = 07）：（一），
创建一个数组
days_per_month =新的阵列（31, 28 +自我。_isleap（Y），31, 30, 31，30, 31, 31，30, 31, 30，31），
行行数的日期表单
str_nums = math.ceil（（周+ days_per_month {米} - 1）/ 7）；
二维数组的创建日期
为（i = 0；i < str_nums；i = 1）{
var=；
对于（k＝0；k＜7；k +）{
为每个表创建索引，从0年初开始
var idx = 7 *我+ K；
1个月和一周的匹配
var = IDX -周+ 2；
VaR为=自我。_getcolor（天）；
如果（option.getcolor typeof（选项。色鬼）= 'function）
为option.getcolor（天）=；
为=datetd ；
（天days_per_month {米}）
该索引小于或等于或大于0个月/月最大值，而不是空窗体。
（天==，为dpblank ）：（天= IDX -周+ 2）；
日= d +日+：
突出显示日
+日+；
}
=；
自_dptable.append（TR）；
；
}
我以前写的背景，时间玩的前端不长，有个错误的地方欢迎指正。
对dateprinter.js整个代码如下：
无功_dateprinter_tmpl_cn =123456天；
无功_dateprinter_tmpl_en =montuewedthufrisatsun ；
date.prototype.format =功能（FMT）{ / /作者：meizz
var { { { {
M +：this.getmonth（+ 1） / /月
D：（这个getdate）， / /天
H：（这个，获得当前的小时） / /小时。
M + ：（这个，获得当前的分钟）， / /分
+：（这个，获得当前的秒）， / /
Q+：Math.floor（（，获得当前的月份）（+ 3）/ 3）， / /季度
S：（这个。getmilliseconds） / /小姐
}；
如果（ / /（Y +）。测试（FMT））
FMT = fmt.replace（regexp。1美元，（（this.getfullyear（）+）。Substr（4—9。1美元。长度））；
对于（k在O中k）
如果（新规则（（钾））。测试（FMT））
FMT = fmt.replace（regexp。1美元（1美元= = 1.length regexp。）（O { }（K）：（00 + O K（{ }）。Substr（长+ O { k }））））；
返回格式化；
}
美元。Widget（ dateprinter UI。
选项：{
initdate：空，
语言：空
调整大小：假，
拖动：假，
宽度：240px
DateFormat：'yyyy / / DD的MM，
色鬼：空 / /自定义颜色
showyearandmonth：假，
ChooseDone：功能（selectdate返回selectdate）{ }， / /执行自定义事件的日期后
自动识别：空/ ID控制
}，
_dptable：空，
_dproot：空，
_selectdate： / /选定的日期无效
_create：（功能）{
VaR自=，= this.options选项，ELE = this.element；
元（元）；
自我。_dproot = $（ELE）。父（）发现（'div.dproot）；
自_dproot.empty（）；
自我。_dproot.append（＜div class= 'dptitle'style = 'text-align：权利；背景颜色：# e8edf4；宽度：+ option.width +
x ）；
自我。_dproot.append（）；
option.autoid =自我_newguid（）；
}，
_init：（功能）{
VaR自=，= this.options选项，ELE = this.element；
如果（option.initdate型option.initdate = = 'String'）
option.initdate =新的日期（option.initdate.replace（，
初始化日历
自_initdate（）；
单击事件
自_dptable.delegate（TD。
如果（！$（这）。HasClass（dpblank ））{
自我。_dptable.find（TD），RemoveClass（今天）；
$（这）。AddClass（今天）；
控制设置值
美元。代理（自我。_setdate（$（this）。文本（）），自）；
如果（option.choosedone typeof（选项。choosedone）= 'function）
美元。代理（option.choosedone（自我。_selectdate），自）；
}
}）；
如果（选项。调整大小）
自我。_dproot.resizable（{
minheight：自我。_dproot.css（高度）。取代（PX
MinWidth：option.width.replace（PX
调整大小：函数（事件，用户界面）{
无功titleheight =自我。_dproot.find（div.dptitle）。Css（高度）。取代（PX
最小值不再减少了。
如果（ui.size.width =数（option.width.replace（PX
$（UI元素）。找到（表）。Css（{宽度：ui.size.width，高度）：ui.size.height - titleheight，文本对齐：中心}）；
$（UI元素）。找到（div.dptitle）。Css（{宽度：UI。大小。宽度}）；
}
}
}）；
如果（选项。拖动）
自_dproot.draggable（）；
关闭按钮事件
自我。_dproot.find（div.dptitle >）。Bind（单击
美元。代理（self.dphide）、（自我）；
}）；
如果（选项。showyearandmonth）{
自_initselyear（）；
自_initselmonth（）；
}
元（焦点）（函数（）{）
Self.dpShow（）；
}）；
元（Click）（函数（）{）
Self.dpShow（）；
}）；
Blur（函数（e）{）
/ /如果（$（e.target）。最近（'div.dproot）。长度= = 0）{
（ / /自我。dphide）；
}
/
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。