日期js控件
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是一种常用的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日历插件calendar.js使用指南

轻量级的原⽣js⽇历插件calendar.js使⽤指南使⽤说明:需要引⼊插件calendar.js/calendar.min.js须要引⼊calendar.css 样式表,可以⾃定义⾃⼰想要的⽪肤本⽇历插件⽀持cmd模块化如下调⽤:复制代码代码如下:xvDate({'targetId':'date1',//时间写⼊对象的id'triggerId':['date1','dateBtn1'],//触发事件的对象id'alignId':'datesWrap1',//⽇历对齐对象'format':'-',//时间格式默认'YYYY-MM-DD HH:MM:SS''min':'2014-09-20 10:00:00',//最⼤时间'max':'2014-10-30 10:00:00'//最⼩时间});参数说明:targetId :⽇期写⼊对象的id,不能为空triggerId :触发事件的对象id,如果不设置则默认为targetIdalignId :⽇历盒⼦的对齐基准,如果不设置则默认为targetIdhms :时分秒是否开启,默认值为'on'则表⽰开启时分秒(2014-09-20 10:00:00),'off'则表⽰关闭时分秒模式(2014-09-20) format :为⽇期格式默认值为'-' (2014-09-20),'/'则表⽰(2014/09/20)min :最⼩时间限制,min 的时间格式和前⾯的时间格式保持⼀直max :最⼤时间限制,max 的时间格式和前⾯的时间格式保持⼀直zIndex :最⼤时间限制,⽇历盒⼦的层级,默认9999如果需要使⽤模块化在需要依赖的模块⽤引⼊即可如:复制代码代码如下:define('mod1',[],function(require, exports, module){var xvDate = require("xvDate");})以上所述就是本⽂的全部内容了,希望⼤家能够喜欢。
Extjs设置日期控件只选择年月

Extjs设置日期控件只选择年月创建Month.js文件并放入/extjs6/src/form/field/文件夹下,在页面引用‘Ext.form.field.Month’,用法:{ xtype: 'monthfield', cId: 'dfEndDate', labelWidth: 20, width: 125, format: 'Y-m', fieldLabel: '至' }, Ext.define('Ext.form.field.Month', {extend: 'Ext.form.field.Date',alias: 'widget.monthfield',requires: ['Ext.picker.Month'],alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],selectMonth: null,createPicker: function () {var me = this,format = Ext.String.format;return Ext.create('Ext.picker.Month', {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.disabledDaysT ext,format: me.format,showT oday: me.showToday,startDay: me.startDay,minT ext: format(me.minT ext, me.formatDate(me.minValue)), maxText: format(me.maxText, me.formatDate(me.maxValue)), listeners: {select: {scope: me,fn: me.onSelect},monthdblclick: {scope: me,fn: me.onOKClick},yeardblclick: {scope: me,fn: me.onOKClick},OkClick: {scope: me,fn: me.onOKClick},CancelClick: {scope: me,fn: me.onCancelClick},//注意:Extjs5 需要此语句,否则会出现选不中的BUG//start---------------afterrender: {scope: me,fn: function (c) {var me = c;me.el.on("mousedown", function (e) {e.preventDefault();}, c);}},//-----------------end},keyNavConfig: {esc: function () {me.collapse();}}});},onCancelClick: function () {var me = this;me.selectMonth = null;me.collapse();},onOKClick: function () {var me = this;if (me.selectMonth) {me.setValue(me.selectMonth);me.fireEvent('select', me, me.selectMonth); }me.collapse();},onSelect: function (m, d) {var me = this;me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]); }});。
laydate 参数

laydate 参数laydate是一款常用的日期选择器插件,它可以方便地实现日期的选择和展示功能。
在前端开发中,时间的选择和展示是非常常见的需求,laydate的出现为开发者提供了一种简洁方便的解决方案。
一、简介laydate是一款基于jQuery的日期选择器插件,它具有易用、美观、功能丰富等特点。
通过引入laydate插件,我们可以轻松实现日期的选择和展示功能。
laydate支持多种日期格式,并且可以根据需求进行自定义配置。
二、使用方法使用laydate非常简单,只需在页面中引入相关的js文件,并在需要使用的地方调用相关的函数即可。
下面是一个简单的示例:1. 引入相关的js文件```html<script src="jquery.min.js"></script><script src="laydate.js"></script>```2. 调用laydate函数```html<input type="text" id="test" readonly><script>laydate.render({elem: '#test' //指定元素});</script>```三、常用配置项laydate提供了丰富的配置项,可以根据实际需求进行配置。
下面是一些常用的配置项:1. elem:指定元素,laydate将绑定到该元素上。
2. type:日期选择器的类型,可选值有year、month、date、time、datetime,默认为date。
3. range:是否开启范围选择,可选值为true、false,默认为false。
4. format:日期的格式,支持年月日时分秒的组合,例如yyyy-MM-dd HH:mm:ss。
只显示年月的日期js

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强⼤的⽇期控件使⽤⽅便简单(转)本⽂属转载(希望对编程爱好者有所帮助)详情请访问官⽅⽹站⼀. 简介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将年份表⽰为最多两位数字。
帆软日期控件选择指定的日期

- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
* (0)只选择年份<input type="text" name="date" readOnly onClick="setYear(this);">* (1)只选择月份<input type="text" name="date" readOnly onClick="setMonth(this);">* (2)只选择日期<input type="text" name="date" readOnly onClick="setDay(this);">* (3)选择日期和小时<input type="text" name="dateh" readOnly onClick="setDayH(this);">* (4)选择日期和小时及分钟<input type="text" name="datehm" readOnly onClick="setDayHM(this);">* (4)选择日期和小时及分钟默认时间00:00 <input type="text" name="datehm" readOnly onClick="setDayHM0(this,"hour","minute");">*设置参数的方法* (1)设置日期分隔符setDateSplit(strSplit);默认为"-"* (2)设置日期与时间之间的分隔符setDateTimeSplit(strSplit);默认为" "* (3)设置时间分隔符setTimeSplit(strSplit);默认为":"* (4)设置(1),(2),(3)中的分隔符setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);* (5)设置开始和结束年份setYearPeriod(intDateBeg,intDateEnd)* (6)checkSec(t1,t2,s)==>t1,t2为两个时间框对像,s为相差的时间,默认为秒,输入年格式为"2y",输入月格式为"2m",以此类推.*说明:* 默认返回的日期时间格式如同:2005-02-02 08:08*///------------------ 样式定义---------------------------////功能按钮同样样式var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";//翻年、月等的按钮var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;//关闭、清空等按钮样式var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;//年选择下拉框var s_tiannet_select = "width:64px;display:none;";//月、时、分选择下拉框var s_tiannet_select2 = "width:46px;display:none;";//日期选择控件体的样式var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;margin:10px ;" +"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";//显示日的td的样式var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";//字体样式var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";//链接的样式var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";var s_tiannet_line = "border-bottom:1 solid #6699CC";//------------------ 变量定义---------------------------//var tiannetYearSt = 1950;//可选择的开始年份var tiannetYearEnd = 2088;//可选择的结束年份var tiannetDateNow = new Date();var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值var tiannetMonth = tiannetDateNow.getMonth()+1; //定义月的变量的初始值var tiannetDay = tiannetDateNow.getDate();var tiannetHour = tiannetDateNow.getHours();var tiannetMinute = tiannetDateNow.getMinutes();var tiannetArrDay=new Array(42); //定义写日期的数组var tiannetDateSplit = "-"; //日期的分隔符号var tiannetDateTimeSplit = " "; //日期与时间之间的分隔符var tiannetTimeSplit = ":"; //时间的分隔符号var tiannetOutObject; //接收日期时间的对象var arrTiannetHide = new Array();//被强制隐藏的标签var m_bolShowDay=true;//是否显示日期var m_bolShowHour = false;//是否显示小时var m_bolShowMinute = false;//是否显示分钟var m_bolShowMonth = true;//是否显示月份var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;// ---------------------- 用户可调用的函数-----------------------------//function yestday(obj,file){file=path+file;var result=readAjax(file);result=result.substring(4,20);var month=result.substring(5,7);var day=result.substring(8,10);tiannetMonth=month;tiannetDay=day;setDay(obj);};function setNull(){m_bolShowDay=true;//是否显示日期m_bolShowHour = false;//是否显示小时m_bolShowMinute = false;//是否显示分钟m_bolShowMonth = true;//是否显示月份};function setDayHM0(obj,h,m){tiannetHour=h;tiannetMinute=m;setNull();tiannetOutObject = obj;m_bolShowHour = true;m_bolShowMinute = true;//如果标签中有值,则将日期和小时及分钟初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue.substring(0,10));var time = strValue.substring(11,16);var arr = time.split(tiannetTimeSplit);tiannetHour = arr[0];tiannetMinute = arr[1];if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);}else setNow();tiannetPopCalendar();};//用户主调函数-只选择年期function setYear(obj){setNull();tiannetOutObject = obj;m_bolShowMonth= false;//如果标签中有值,则将日期初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue);}tiannetPopCalendar();}//用户主调函数-只选择月份function setMonth(obj){setNull();tiannetOutObject = obj;m_bolShowDay=false;//如果标签中有值,则将日期初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue);}tiannetPopCalendar();};//用户主调函数-只选择日期function setDay(obj){setNull();tiannetOutObject = obj;//如果标签中有值,则将日期初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue);}tiannetPopCalendar();}//用户主调函数-选择日期和小时function setDayH(obj){setNull();tiannetOutObject = obj;m_bolShowHour = true;//如果标签中有值,则将日期和小时初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue.substring(0,10));var hour = strValue.substring(11,13);if( hour < 10 ) tiannetHour = hour.substring(1,2);}tiannetPopCalendar();}//用户主调函数-选择日期和小时及分钟function setDayHM(obj){setNull();tiannetOutObject = obj;m_bolShowHour = true;m_bolShowMinute = true;//如果标签中有值,则将日期和小时及分钟初始化为当前值var strValue = tiannetTrim(tiannetOutObject.value);if( strValue != "" ){tiannetInitDate(strValue.substring(0,10));var time = strValue.substring(11,16);var arr = time.split(tiannetTimeSplit);tiannetHour = arr[0];tiannetMinute = arr[1];if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2); }else setNow();tiannetPopCalendar();}function setNow(){}//设置开始日期和结束日期function setYearPeriod(intDateBeg,intDateEnd){tiannetYearSt = intDateBeg;tiannetYearEnd = intDateEnd;}//设置日期分隔符。