JS日期控件

合集下载

u-datetime-picker 例子

u-datetime-picker 例子

序号一:介绍u-datetime-pickeru-datetime-picker是一个Vue.js框架下的日期和时间选择器组件,它可以方便地帮助开发者在自己的应用中快速部署和使用日期和时间选择功能。

该组件具有易用性、灵活性和美观性,可以满足不同项目的需求。

序号二:u-datetime-picker的优点1. 简单易用:u-datetime-picker组件的使用非常简单,在Vue.js项目中只需要引入对应的组件并进行配置即可使用,不需要复杂的逻辑和代码处理。

2. 灵活定制:该组件提供了丰富的参数设置和样式定制选项,开发者可以根据自己的项目需求来定制日期和时间选择器的外观和行为。

3. 兼容性好:u-datetime-picker组件兼容主流的浏览器和移动设备,可以在不同评台上稳定运行,不会出现兼容性问题。

序号三:u-datetime-picker的基本用法使用u-datetime-picker组件非常简单,只需要按照以下步骤进行配置即可:1. 安装:首先需要通过npm或者yarn等工具安装u-datetime-picker组件。

2. 引入:在Vue.js项目中引入u-datetime-picker组件。

3. 使用:在需要的地方直接使用u-datetime-picker标签,并根据需要进行参数设置。

4. 定制:根据项目需求对u-datetime-picker进行样式和行为的定制。

序号四:u-datetime-picker的参数设置u-datetime-picker组件提供了丰富的参数设置选项,可以根据项目需求来进行配置,常用的参数有:1. type:选择器的类型,可以是日期选择器、时间选择器或者日期时间选择器。

2. format:选择器的显示格式,可以是年/月/日、时:分:秒等。

3. disabled:是否禁用选择器,可以根据业务需求动态设置选择器的可用性。

4. placeholder:选择器的占位符文本,可以在选择器为空时显示提示信息。

extjs4.2 日期控件扩展

extjs4.2 日期控件扩展

extjs4.2 日期控件扩展目标Extjs4 日期控件,带年月日时分秒,效果图如下:调用方法:xtype: ‘zc_form_DatetimeField’实现DateTimeField.js/***@Description带时间的日期输入控件*@author张川(cr10210206@)*/Ext.define('Ext.zc.form.DateTimeField', {extend:'Ext.form.field.Date',alias: 'widget.zc_form_DatetimeField',requires: ['Ext.zc.form.DateTimePicker'],/***@cfg{String}format*The default date format string which can be overriden for localization support.The format must be valid*according to{@link Ext.Date#parse}.*/format : "Y-m-d H:i:s",/***@cfg{String}altFormats*Multiple date formats separated by"|"to try when parsing a user input value and it does not match the defined*format.*/altFormats : "Y-m-d H:i:s",createPicker: function() {var me = this,format = Ext.String.format;//修改picker为自定义pickerreturn Ext.create('Ext.zc.form.DateTimePicker',{pickerField: me,ownerCt: me.ownerCt,renderTo: document.body,floating: true,hidden: true,focusOnShow: true,minDate: me.minValue,maxDate: me.maxValue,disabledDatesRE: me.disabledDatesRE,disabledDatesText: me.disabledDatesText,disabledDays: me.disabledDays,disabledDaysText: me.disabledDaysText,format: me.format,showToday: me.showToday,startDay: me.startDay,minText: format(me.minText, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: {scope: me,select: me.onSelect},keyNavConfig: {esc: function() {me.collapse();}}});},/***@private*/onExpand: function() {var value = this.getValue();//多传一个参数,从而避免时分秒被忽略。

js datetimepicker用法

js datetimepicker用法

JS datetimepicker是一种常用的JavaScript插件,用于在网页中实现日期和时间选择功能。

它可以方便地让用户在日期和时间上进行选择,提高网页的交互性和用户体验。

接下来,我们将详细介绍JS datetimepicker的用法,包括如何引入插件、基本的功能和参数设置等。

1. 引入插件在使用JS datetimepicker之前,首先需要引入相关的插件文件。

可以通过CDN信息或者下载到本地引入,如下所示:```html<link rel="stylesheet" href="path/to/datetimepicker.css"><script src="path/to/jquery.min.js"></script><script src="path/to/datetimepicker.js"></script>```2. 基本用法引入插件文件后,就可以开始使用datetimepicker了。

在HTML文件中,为需要添加日期和时间选择功能的input元素添加class="datetimepicker",然后在JavaScript中对该元素进行初始化,如下所示:```html<input type="text" class="datetimepicker">``````javascript$('.datetimepicker').datetimepicker();```3. 参数设置datetimepicker插件提供了丰富的参数设置,可以根据实际需求进行配置。

常用的参数包括日期格式、最小日期、最大日期、时间间隔等,具体用法如下:```javascript$('.datetimepicker').datetimepicker({format: 'Y-m-d H:i', // 日期和时间的格式minDate: 0, // 最小日期为当天maxDate: '+7d', // 最大日期为7天后step: 30 // 时间间隔为30分钟});```4. 事件绑定除了基本的用法和参数设置,datetimepicker插件还支持各种事件的绑定,以实现更复杂的交互功能。

只显示年月的日期js

只显示年月的日期js
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为:YYYY-MM-DD
function setDefaultDate(strDate){
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln('<option value="' + i + '">' + i + '年</option>');
}
document.write('</select>');
document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
document.write(' </tr>');
document.write('</table>');
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//

jsp日期插件My97DatePicker强大的日期控件使用方便简单(转)

jsp日期插件My97DatePicker强大的日期控件使用方便简单(转)

jsp⽇期插件My97DatePicker强⼤的⽇期控件使⽤⽅便简单(转)本⽂属转载(希望对编程爱好者有所帮助)详情请访问官⽅⽹站⼀. 简介1. 简介⽬前的版本是:4.72. 注意事项My97DatePicker⽬录是⼀个整体,不可破坏⾥⾯的⽬录结构,也不可对⾥⾯的⽂件改名,可以改⽬录名My97DatePicker.htm是必须⽂件,不可删除各⽬录及⽂件的⽤途:WdatePicker.js 配置⽂件,在调⽤的地⽅仅需使⽤该⽂件,可多个共存,以xx_WdatePicker.js⽅式命名config.js 语⾔和⽪肤配置⽂件,⽆需引⼊calendar.js ⽇期库主⽂件,⽆需引⼊My97DatePicker.htm 临时页⾯⽂件,不可删除⽬录lang 存放语⾔⽂件,你可以根据需要清理或添加语⾔⽂件⽬录skin 存放⽪肤的相关⽂件,你可以根据需要清理或添加⽪肤⽂件包当WdatePicker.js⾥的属性:$wdate=true时,在input⾥加上class="Wdate"就会在选择框右边出现⽇期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin⽬录下的WdatePicker.css⽂件来修改样式3. ⽀持的浏览器IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+⼆. 功能及⽰例1. 常规功能1. ⽀持多种调⽤模式除了⽀持常规在input单击或获得焦点调⽤外,还⽀持使⽤其他的元素如:<img><div>等触发WdatePicker函数来调⽤弹出⽇期框⽰例1-1-1 常规调⽤⽰例1-1-2 图标触发<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">注意:只需要传⼊控件的id即可2. 下拉,输⼊,导航选择⽇期年⽉时分秒输⼊框都具备以下三种特性1. 通过导航图标选择2. 直接使⽤键盘输⼊数字3. 直接从弹出的下拉框中选择另:年份输⼊框有智能提⽰功能,当⽤户连续点击同⼀个导航按钮5次时,会⾃动弹出年份下拉框3. ⽀持周显⽰可以通过配置isShowWeek属性决定是否限制周,并且在返回⽇期的时候还可以通过⾃带的⾃定义事件和API函数返回选择的周⽰例1-2-1 周显⽰简单应⽤⽰例1-2-2 利⽤onpicked事件把周赋值给另外的⽂本框您选择了第格式)周, 另外您可以使⽤WW格式周{$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}})"/>onpicked ⽤法详见$dp.cal.getP ⽤法详见4. 只读开关,⾼亮周末功能设置readOnly属性 true 或 false 可指定⽇期框是否只读设置highLineWeekDay属性 ture 或 false 可指定是否⾼亮周末5. 操作按钮⾃定义清空按钮和今天按钮,可以根据需要进⾏⾃定义,它们分别对应 isShowClear 和 isShowToday 默认值都是true⽰例1-5 禁⽤清空功能最好把readOnly置为true,否则即使隐藏了清空按钮,⽤户依然可以在输⼊框⾥把值delete掉6. ⾃动选择显⽰位置当控件处在页⾯边界时,它会⾃动选择显⽰的位置,所以没有必要担⼼弹出框会被页⾯边界遮住的问题了.7. ⾃定义弹出位置当控件处在页⾯边界时,它会⾃动选择显⽰的位置.此外你还可以使⽤position参数对弹出位置做调整.⽰例1-6 通过position属性,⾃定义弹出位置使⽤positon属性指定,弹出⽇期的坐标为{left:100,top:50}<input class="Wdate" type="text" id="d16" onfocus="WdatePicker({position:{left:100,top:50}})"/>position属性的详细⽤法详见8. ⾃定义星期的第⼀天(4.6新增)各个国家的习惯不同,有些喜欢以星期⽇作为第⼀天,有些以星期⼀作为第⼀天.相关属性:firstDayOfWeek: 可设置 0 - 6 的任意⼀个数字,0:星期⽇ 1:星期⼀以此类推⽰例1-7 以星期⼀作为第⼀天2. 特⾊功能1. 平⾯显⽰⽇期控件⽀持平⾯显⽰功能,只要设置⼀下eCont属性就可以把它当作⽇历来使⽤了,⽆需触发条件,直接显⽰在页⾯上⽰例2-1 平⾯显⽰演⽰<div id="div1"></div><script>WdatePicker({eCont:'div1',onpicked:function(dp){alert('你选择的⽇期是:'+dp.cal.getDateStr())}})</script>$dp.cal.getDateStr ⽤法详见2. ⽀持多种容器除了可以将值返回给input以外,还可以通过配置el属性将值返回给其他的元素(如:textarea,div,span)等,带有innerHTML属性的HTML元素⽰例2-2 将⽇期返回到<span>中2008-01-01代码:<span id="demospan">2008-01-01</span><img onClick="WdatePicker({el:'demospan'})" src="../../My97DatePicker/skin/datePicker.gif" width="16" height="22"align="absmiddle" style="cursor:pointer" />3. 起始⽇期功能注意:⽇期格式必须与 realDateFmt 和 realTimeFmt ⼀致有时在项⽬中需要选择⽣⽇之类的⽇期,⽽默认点开始⽇期都是当前⽇期,导致年份选择⾮常⿇烦,你可以通过起始⽇期功能加上配置alwaysUseStartDate属性轻松解决此类问题⽰例2-3-1 起始⽇期简单应⽤默认的起始⽇期为 1980-05-01当⽇期框为空值时,将使⽤ 1980-05-01 做为起始⽇期⽰例2-3-2 alwaysUseStartDate属性应⽤默认的起始⽇期为 1980-05-01当⽇期框⽆论是何值,始终使⽤ 1980-05-01 做为起始⽇期⽰例2-3-3 使⽤内置参数除了使⽤静态的⽇期值以外,还可以使⽤动态参数(如:%y,%M分别表⽰当前年和⽉)下例演⽰,年⽉⽇使⽤当年当⽉的1⽇,时分秒使⽤00:00:00作为起始时间HH:mm:ss',alwaysUseStartDate:true})"/>4. ⾃定义格式yMdHmswW分别代表年⽉⽇时分秒星期周,你可以任意组合这些元素来⾃定义你个性化的⽇期格式.⽇期格式表格式说明y将年份表⽰为最多两位数字。

js+php 实现一款超酷的日历控件

js+php 实现一款超酷的日历控件
if (!(el && el.className)) {
return;
}
var cls = el.className.split(" ");
var ar = new Array();
for (var i = cls.length; i > 0;) {
if (cls[--i] != className) {
var tmp = this.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
Calendar.isRelated = function (el, evt) {
var related = evt.relatedTarget;
Calendar.is_ie5 = ( Calendar.is_ie && /msie 5\.0/i.test(erAgent) );
/// detect Opera browser
Calendar.is_opera = /opera/i.test(erAgent);
* Read the entire license text here: /licenses/lgpl.html
*/
// $Id: calendar.js,v 1.51 2005/03/07 16:44:31 mishoo Exp $
/** The Calendar object constructor. */
this.multiple = null;
// HTML elements

element 时间控件,选择周数,format用法

element 时间控件,选择周数,format用法

element 时间控件,选择周数,format用法element 时间控件是一个基于Vue.js的开源时间选择器组件,用于在网页中方便地选择日期和时间。

选择周数的功能可以通过设置element 时间控件的属性来实现。

在element 时间控件中,设置选择周数的格式可以通过format 属性来实现。

format属性用于控制时间的显示格式,支持以下占位符:- yyyy: 四位数的年份- MM: 两位数的月份- dd: 两位数的天数- hh: 两位数的小时数(12小时制)- HH: 两位数的小时数(24小时制)- mm: 两位数的分钟数- ss: 两位数的秒数例如,要设置时间选择器选择周数的格式为"yyyy年第WW周",可以在element 时间控件的format属性中设置为"yyyy年第WW周"。

完整的代码示例如下所示:```html<template><el-date-pickerv-model="selectedDate"type="week"format="yyyy年第WW周"value-format="yyyy 第 WW 周":picker-options="pickerOptions"></el-date-picker></template><script>export default {data() {return {selectedDate: "", // 选中的日期pickerOptions: {firstDayOfWeek: 1, // 以星期一开始计算周数},};},};</script>```在上述代码中,我们通过设置element 时间控件的type属性为"week"来实现选择周数的功能。

【插件】layDate----日期插件的使用(自定义mark标记,两个日期控件关联)

【插件】layDate----日期插件的使用(自定义mark标记,两个日期控件关联)

【插件】layDate----⽇期插件的使⽤(⾃定义mark标记,两个⽇期控件关联)layDate ----JS⽇期与时间的组件,是 layui 独⽴维护的三⼤组件之⼀。

不依赖第三⽅库,同时兼容所有的浏览器。

使⽤⽅法也⽐较简单,拓展功能很⽅便。

使⽤教程可参考官⽅⽂档:使⽤⽅法:1、引⼊js⽂件(路径使⽤⾃⼰的路径)<script src="/laydate/laydate.js"></script>2、绑定控件<input type="text" id="test1"><script>//执⾏⼀个laydate实例laydate.render({elem: '#test1' //指定元素});</script>这样id为test1的input控件现在就是⼀个⽇期控件了。

添加⾃定义标记这是官⽅⽂档给出的⽰例://开启公历节⽇laydate.render({elem: '#test17',calendar: true});//⾃定义重要⽇laydate.render({elem: '#test18',mark: {'0-10-14': '⽣⽇','0-12-31': '跨年' //每年的⽇期,'0-0-10': '⼯资' //每⽉某天,'0-0-15': '⽉中','2017-8-15': '' //如果为空字符,则默认显⽰数字+徽章,'2099-10-14': '呵呵'},done: function(value, date){if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8⽉15⽇,弹出提⽰语alert('这⼀天是:中国⼈民抗⽇战争胜利72周年');}}});但是我想在⽇期中添加⾃定义的icon作为标记:如下图因为官⽅⽂档中的案例是⽤mark中的属性值来替代⽇期控件中的数字显⽰,若我想在这个⽇期中添加icon就可以⽤html来作为mark中属性值:for (var i = 0; i < results.length; i++) {//results为存储⽇期的数组['2017-08-09','2017-09-11','2017-09-24','2018-01-12']var sdate = results[i]; //记录时间var date_array = sdate.split("-");var date_day = date_array[2]; //取⽇期的天⽐如2017-09-11取11mark[sdate] = '<span style="color:#666;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + ' }添加icon和⽇期号,作为mark的属性值//初始⽇期控件laydate.render({elem: '#logdate',max: new Date().toLocaleDateString(),//取当前⽇期为最⼤⽇期mark: mark,value: firstDate || new Date(),done: function(value, date, endDate) {console.log(value);//选完⽇期后调⽤的函数}});mark的⼀些问题1、因为laydate的样式中默认mark标记有⼩圆点的,如果要去掉那么就要在js中修改去除class或者修改css⽂件中对应的样式;2、当你要重新给⽇期控件添加新的mark标记时,需要将原来的⽇期控件删除,然后重新绑定; <div class="date-select"><span class="place-title" id="dateSplittxt">当前⽇期:</span><input type="text" class="form-control" id="dateSplit"/></div>//⽇期控件清空mark$("#dateSplit").remove();$("#dateSplittxt").after('<input type="text" class="form-control" id="dateSplit"/>');laydate.render({elem: '#dateSplit', //指定元素value: firstDate,mark: mark,max: new Date().toLocaleDateString(),done: function (value, date, endDate) {that.getSplitPhoto(value, proid, placeid);}});时间段官⽅⽂档中有选择范围的案例,但是只有⼀个⽇期控件:laydate.render({elem: '#test16',type: 'datetime',range: '到',format: 'yyyy年M⽉d⽇H时m分s秒'});那么需要将两个⽇期控件关联起来选择时间段,就可以⽤下⾯的⽅法:在绑定⽇期控件的时候就为其命名,使⽤它在另⼀个⽇期控件中设置最⼤/最⼩值。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

JS日期控件转发评论2008-06-11 14:19超级简单好用的JS日期控件效果如图所示:用的时候先在<head></head>插入<SCRIPT src="Images/setday.js"></SCRIPT>然后输入框<INPUT id="starttime2" onclick="setday(this)" size="12"name="starttime" runat="server">当鼠标放在输入框的时候,出现时间控件,选取时间后,JS自动的将时间控件的值赋给starttime2。

由于给starttime2加了 runat="server"属性,所以在后台可以取starttime2的Value值。

setday.js下载提供的setday.js默认是UTF-8编码,也就是VS的默认编码,如果你的页面声明是GB等其他编码,请用一下高级保存,转换一下编码。

setday.js代码:<!--document.writeln('<div id=meizzDateLayer style="position: absolute; width: 142; height: 166; z-index: 9998; display: none">'); document.writeln('<span id=tmpSelectYearLayer style="z-index:9999;position: absolute;top: 2; left: 18;display: none"></span>'); document.writeln('<span id=tmpSelectMonthLayer style="z-index:9999;position: absolute;top: 2; left: 75;display: none"></span>'); document.writeln('<table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#000000 onselectstart="return false">'); document.writeln(' <tr><td width=142 height=23 bgcolor=#FFFFFF><table border=0 cellspacing=1 cellpadding=0 width=140 height=23>'); document.writeln(' <tr align=center><td width=20 align=centerbgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" '); document.writeln(' onclick="meizzPrevM()" title="前一月" Author=meizz><b Author=meizz>&lt;</b>');document.writeln(' </td><td width=100 align=centerstyle="font-size:12px;cursor:default" Author=meizz>');document.writeln(' <span Author=meizz id=meizzYearHead onmouseover="style.backgroundColor=\'yellow\'"onmouseout="style.backgroundColor=\'white\'" title="点击这里选择年份" onclick="tmpSelectYearInnerHTML(this.innerText)" style="cursor: hand;"></span>&nbsp;年&nbsp;<span');document.writeln(' id=meizzMonthHead Author=meizz onmouseover="style.backgroundColor=\'yellow\'"onmouseout="style.backgroundColor=\'white\'" title="点击这里选择月份" onclick="tmpSelectMonthInnerHTML(this.innerText)" style="cursor: hand;"></span>&nbsp;月</td>');document.writeln(' <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ');document.writeln(' onclick="meizzNextM()" title="后一月" Author=meizz><b Author=meizz>&gt;</b></td></tr>');document.writeln(' </table></td></tr>');document.writeln(' <tr><td width=142 height=18 bgcolor=#808080>'); document.writeln('<table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">');document.writeln('<tr align=center><tdstyle="font-size:12px;color:#FFFFFF" Author=meizz>日</td>'); document.writeln('<td style="font-size:12px;color:#FFFFFF"Author=meizz class="td1">一</td><tdstyle="font-size:12px;color:#FFFFFF" Author=meizz>二</td>'); document.writeln('<td style="font-size:12px;color:#FFFFFF"Author=meizz>三</td><td style="font-size:12px;color:#FFFFFF"Author=meizz>四</td>');document.writeln('<td style="font-size:12px;color:#FFFFFF"Author=meizz>五</td><td style="font-size:12px;color:#FFFFFF"Author=meizz>六</td></tr>');document.writeln('</table></td></tr><!-- Author:F.R.Huang(meizz) / mail: meizz@ 2002-10-8 -->'); document.writeln(' <tr><td width=142 height=120>');document.writeln(' <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF>');var n=0; for (j=0;j<5;j++){ document.writeln (' <tr align=center>'); for (i=0;i<7;i++){document.writeln('<td width=20 height=20 id=meizzDay'+n+'style="font-size:12px" Author=meizzonclick=meizzDayClick(this.innerText)></td>');n++;}document.writeln('</tr>');}document.writeln(' <tr align=center><td width=20 height=20style="font-size:12px" id=meizzDay35 Author=meizz ');document.writeln(' onclick=meizzDayClick(this.innerText)></td >');document.writeln(' <td width=20 height=20style="font-size:12px" id=meizzDay36 Author=meizzonclick=meizzDayClick(this.innerText)></td>');document.writeln(' <td colspan=5 align=right Author=meizz><span onclick=closeLayer() style="font-size:12px;cursor: hand"'); document.writeln(' Author=meizz title="返回(不选择日期)"><u>关闭</u></span>&nbsp;< /td></tr>');document.writeln(' </table></td></tr><tr><td>');document.writeln(' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>');document.writeln(' <tr><td Author=meizz align=left><input Author=meizz type=button value="<<" title="前一年"onclick="meizzPrevY()" ');document.writeln(' onfocus="this.blur()" style=" cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset; FONT-SIZE: 12px; height: 20px;color: #FFD700; font-weight: bold"><input Author=meizz title="前一月"type=button ');document.writeln(' value="<" onclick="meizzPrevM()" onfocus="this.blur()" style="cursor: hand;BACKGROUND-COLOR:#808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFD700; font-weight: bold"></td><td ');document.writeln(' Author=meizz align=center><input Author=meizz type=button value="重置" onclick="meizzToday()" '); document.writeln(' onfocus="this.blur()" title="显示当前时间" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM:#808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT:#808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFFFFF; font-weight: bold"></td><td '); document.writeln(' Author=meizz align=right><inputAuthor=meizz type=button value=">" onclick="meizzNextM()" '); document.writeln(' onfocus="this.blur()" title="后一月" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1pxoutset; BORDER-TOP: #808080 1px outset;font-size: 12px; height:20px;color: #FFD700; font-weight: bold"><input ');document.writeln(' Author=meizz type=button value=" >>" title="后一年" onclick="meizzNextY()"');document.writeln(' onfocus="this.blur()" style="cursor: hand;BACKGROUND-COLOR: #808080;BORDER-BOTTOM: #808080 1px outset; BORDER-LEFT: #808080 1px outset; BORDER-RIGHT: #808080 1px outset; BORDER-TOP: #808080 1px outset;font-size: 12px; height: 20px;color: #FFD700; font-weight: bold"></td>');document.writeln('</tr></table></td></tr></table></div>');var outObject;function setday(tt,obj) //主调函数{if (arguments.length > 2){alert("对不起!传入本控件的参数太多!");return;}if (arguments.length == 0){alert("对不起!您没有传回本控件任何参数!");return;}var dads = document.all.meizzDateLayer.style;var th = tt;var ttop = tt.offsetTop; //TT控件的定位点高var thei = tt.clientHeight; //TT控件本身的高var tleft = tt.offsetLeft; //TT控件的定位点宽var ttyp = tt.type; //TT控件的类型while (tt = tt.offsetParent){ttop+=tt.offsetTop;tleft+=tt.offsetLeft;}dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;dads.left = tleft;outObject = (arguments.length == 1) ? th : obj;dads.display = '';event.returnValue=false;}var MonHead = new Array(12); //定义阳历中每个月的最大天数MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;var meizzTheYear=new Date().getFullYear(); //定义年的变量的初始值var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值var meizzWDay=new Array(37); //定义写日期的数组function document.onclick() //任意点击时关闭该控件with(window.event.srcElement){ if (tagName != "INPUT" && getAttribute("Author")==null)document.all.meizzDateLayer.style.display="none";}}function meizzWriteHead(yy,mm) //往 head 中写入当前的年与月{ document.all.meizzYearHead.innerText = yy;document.all.meizzMonthHead.innerText = mm;}function tmpSelectYearInnerHTML(strYear) //年份的下拉框{if (strYear.match(/\D/)!=null){alert("年份输入参数不是数字!");return;}var m = (strYear) ? strYear : new Date().getFullYear();if (m < 1000 || m > 9999) {alert("年份值不在 1000 到 9999 之间!");return;}var n = m - 10;if (n < 1000) n = 1000;if (n + 26 > 9999) n = 9974;var s = "<select Author=meizz name=tmpSelectYear style='font-size: 12px' "s +="onblur='document.all.tmpSelectYearLayer.style.display=\"none\"' "s +="onchange='document.all.tmpSelectYearLayer.style.display=\"none\";" s += "meizzTheYear = this.value;meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n";var selectInnerHTML = s;for (var i = n; i < n + 26; i++){if (i == m){selectInnerHTML += "<option value='" + i + "' selected>" + i + "年" + "</option>\r\n";}else {selectInnerHTML += "<option value='" + i + "'>" + i + "年" + "</option>\r\n";}}selectInnerHTML += "</select>";document.all.tmpSelectYearLayer.style.display="";document.all.tmpSelectYearLayer.innerHTML = selectInnerHTML;document.all.tmpSelectYear.focus();function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框{if (strMonth.match(/\D/)!=null){alert("月份输入参数不是数字!");return;}var m = (strMonth) ? strMonth : new Date().getMonth() + 1;var s = "<select Author=meizz name=tmpSelectMonth style='font-size: 12px' "s +="onblur='document.all.tmpSelectMonthLayer.style.display=\"none\"' " s +="onchange='document.all.tmpSelectMonthLayer.style.display=\"none\";" s += "meizzTheMonth = this.value;meizzSetDay(meizzTheYear,meizzTheMonth)'>\r\n";var selectInnerHTML = s;for (var i = 1; i < 13; i++){if (i == m){selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option>\r\n";}else {selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option>\r\n";}}selectInnerHTML += "</select>";document.all.tmpSelectMonthLayer.style.display="";document.all.tmpSelectMonthLayer.innerHTML = selectInnerHTML;document.all.tmpSelectMonth.focus();}function closeLayer() //这个层的关闭{document.all.meizzDateLayer.style.display="none";}function document.onkeydown(){if(window.event.keyCode==27)document.all.meizzDateLayer.style.display=" none";}function IsPinYear(year) //判断是否闰平年{if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;}function GetMonthCount(year,month) //闰年二月为29天{var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;}function GetDOW(day,month,year) //求某天的星期几{var dt=new Date(year,month-1,day).getDay()/7; return dt;}function meizzPrevY() //往前翻 Year{if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}else{alert("年份超出范围(1000-9999)!");}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzNextY() //往后翻 Year{if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear++;}else{alert("年份超出范围(1000-9999)!");}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzToday() //Today Button{meizzTheYear = new Date().getFullYear();meizzTheMonth = new Date().getMonth()+1;meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzPrevM() //往前翻月份{if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheM onth=12;}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzNextM() //往后翻月份{if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTh eMonth++}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzSetDay(yy,mm) //主要的写程序**********{meizzWriteHead(yy,mm);for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //将显示框的内容全部清空var day1 = 1,firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期几for (var i = firstday; day1 < GetMonthCount(yy,mm)+1;i++){meizzWDay[i]=day1;day1++;}for (var i = 0; i < 37; i++){ var da = eval("document.all.meizzDay"+i) //书写新的一个月的日期星期排列if (meizzWDay[i]!=""){ da.innerHTML = "<b>" + meizzWDay[i] + "</b>";da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == newDate().getDate()) ? "#FFD700" : "#73a6de";da.style.cursor="hand"}else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor= "default"}}}function meizzDayClick(n) //点击显示框选取日期,主输入函数*************{var yy = meizzTheYear;var mm = meizzTheMonth;if (mm < 10){mm = "0" + mm;}if (outObject){if (!n) {outObject.value=""; return;}if ( n < 10){n = "0" + n;}outObject.value= yy + "-" + mm + "-" + n ; //注:在这里你可以输出改成你想要的格式closeLayer();}else {closeLayer(); alert("您所要输出的控件对象并不存在!");}}meizzSetDay(meizzTheYear,meizzTheMonth);// -->。

相关文档
最新文档