calendarjs

合集下载

轻量级的原生js日历插件calendar.js使用指南

轻量级的原生js日历插件calendar.js使用指南

轻量级的原生js日历插件calendar.js使用指南
轻量级的原生js日历插件calendar.js使用指南
许多学习软件的专业人士,都要学编程,而最便捷的一种编程语言就是Java。

本文是轻量级的原生js日历插件calendar.js使用的介绍,下面是该介绍的详细信息。

网页上的原生js日历代码,鼠标点击文字提示处,会显示一个带年月日的日历窗口,可调整年份、月份、选择日期等,用在网页上方便大家选择日期,提高用户体验。

各大浏览器都能正常运行,有需要的小伙伴可以参考下。

使用说明:
需要引入插件calendar.js/calendar.min.js
须要引入calendar.css 样式表,可以自定义自己想要的皮肤
本日历插件支持cmd模块化
如下调用:
复制代码代码如下:
xvDate({。

Web软件用户界面开发指南

Web软件用户界面开发指南

河南拓普计算机网络工程有限公司Web软件用户界面开发指南版本:<1.1>编号:[TopTais UI_DEV_GUIDE]审核:审批:审批日期:版本记录Web软件用户界面开发指南1.简介1.1.目的本文档是为了指导界面(UI)开发人员制作用户界面。

通过本文档来约束界面开发人员的随意性,避免造成页面效果不统一、JSP文件代码编写不规范、JavaScript函数和滥用CSS样式等问题。

1.2.范围本文档内容涵盖了Web应用软件用户界面开发中的所有细节,详细说明了页面代码的组织、JavaScript引用、CSS样式引用,JSP代码编写、TagLib标签使用以及页面复用组件一系列页面相关技术的使用方法。

另外还对可复用组件的命名做了比较详细的说明。

1.3.术语、定义CSS:是Cascading Style Sheet 的缩写。

译作「层叠样式表单」。

是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

JavaScript:JavaScript 是一种解释型的、基于对象的脚本语言。

也是一种弱类型的语言。

它可以改变或者约束页面的一些行为,更利于界面的交互,增强人机直接的交流。

1.4.参考资料1、《Web用户界面设计规范》公司内部资料。

2、RUP用户界面一般规范。

2.命名2.1.1.JavaScript文件扩展名:以“*.js”为扩展名;主文件名:使用符合语义的、简明的英文单词来命名;第一个字母小写,如果用两个以上英文单词则第二个单词以后的首字母都要大写;英文单词之间不充许有任何字符来分隔;例:grid.js、calendar.js、checkForm.js都是正确的命名;2.1.2.CSS文件扩展名:以“*.css”为扩展名;主文件名:使用符合语义的、简明的英文单词来命名;第一个字母小写,如果用两个以上英文单词则第二个单词后的首字母都要大写;英文单词之间不充许有任何字符来分隔;例:grid.css、calendar.css;3.JSP页面3.1.JSP文件头编写每个JSP文件的头部都应该把文件功能、创建者、创建日期以及以后的修改信息写明,这样有利于文件的维护更新。

vue lunar-calendar 用法

vue lunar-calendar 用法

vue lunar-calendar 用法lunar-calendar 是一个基于Vue.js 的插件,用于显示农历日历。

以下是使用 lunar-calendar 的步骤:1. 安装插件:首先,使用 npm 进行安装。

打开终端或命令提示符,并在项目目录下运行以下命令:```npm install vue-lunar-calendar```2. 导入插件:在需要使用 lunar-calendar 的 Vue 组件中,导入lunar-calendar 插件:```javascriptimport LunarCalendar from 'vue-lunar-calendar'```3. 注册插件:在 Vue 实例中,注册 lunar-calendar 插件:```javascripte(LunarCalendar)```4. 在模板中使用lunar-calendar:在需要显示农历日历的地方,使用 `<lunar-calendar>` 组件:```vue<template><lunar-calendar></lunar-calendar></template>```你也可以通过向 `<lunar-calendar>` 组件添加属性来自定义日历的外观和行为,例如指定初始年份、禁用特定日期等。

可用属性和其用法可以在官方文档中找到。

5. 运行应用程序:最后,在你的应用程序中编译和运行 Vue 组件,即可看到农历日历的显示。

以上是使用 vue lunar-calendar 的基本用法。

你可以根据需要进行进一步的自定义和配置,以适应你的应用程序。

更多详细的用法和示例可以参考 lunar-calendar 的官方文档。

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

Calendar日历控件使用

Calendar日历控件使用

Calendar⽇历控件使⽤<link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/><script src="__STATIC__/js/calendar/calendar.js"></script>⾸先引⼊ calendar.js calendar-blue.css ⽂件下载链接在HTML 的body 标签下1<input type="text" name="time_start" id="J_time_start" class="date" size="12">2 -3<input type="text" name="time_end" id="J_time_end" class="date" size="12">45<script>6 Calendar.setup({7 inputField : "J_time_start",8 ifFormat : "%Y-%m-%d",9 showsTime : false,10 timeFormat : "24"11 });12 Calendar.setup({13 inputField : "J_time_end",14 ifFormat : "%Y-%m-%d",15 showsTime : false,16 timeFormat : "24"17 });18 $('.J_preview').preview(); //查看⼤图19 $('.J_cate_select').cate_select({top_option:lang.all}); //分类联动20 $('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});21</script>运⾏⼀下吧<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/></head><body><input type="text" name="time_start" id="J_time_start" class="date" size="12">-<input type="text" name="time_end" id="J_time_end" class="date" size="12"><script src="__STATIC__/js/calendar/calendar.js"></script><script>Calendar.setup({inputField : "J_time_start",ifFormat : "%Y-%m-%d",showsTime : false,timeFormat : "24"});Calendar.setup({inputField : "J_time_end",ifFormat : "%Y-%m-%d",showsTime : false,timeFormat : "24"});$('.J_preview').preview(); //查看⼤图$('.J_cate_select').cate_select({top_option:lang.all}); //分类联动$('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});</script></body></html>效果图如下:如果想要在input 标签右侧出现⼩图标:看下⾯<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="__STATIC__/js/calendar/calendar-blue.css"/><style type="text/css">input.date,input.endDate{background: #fff url(__STATIC__/css/admin/bgimg/input_date.png) no-repeat right 3px; padding-right:18px;font-size:12px;} </style></head><body><input type="text" name="time_start" id="J_time_start" class="date" size="12" >-<input type="text" name="time_end" id="J_time_end" class="date" size="12" ><script src="__STATIC__/js/calendar/calendar.js"></script><script>Calendar.setup({inputField : "J_time_start",ifFormat : "%Y-%m-%d",showsTime : false,timeFormat : "24"});Calendar.setup({inputField : "J_time_end",ifFormat : "%Y-%m-%d",showsTime : false,timeFormat : "24"});$('.J_preview').preview(); //查看⼤图$('.J_cate_select').cate_select({top_option:lang.all}); //分类联动$('.J_tooltip[title]').tooltip({offset:[10, 2], effect:'slide'}).dynamic({bottom:{direction:'down', bounce:true}});</script></body></html>。

vue-calendar 案例

vue-calendar 案例

vue-calendar 案例Vue-Calendar是一个基于Vue.js的日历组件,它可以帮助开发者快速构建具有日历功能的网页应用。

以下是关于Vue-Calendar的一些重要特点和用法:1. 可定制化:Vue-Calendar提供了丰富的配置选项,可以根据项目需求进行个性化定制。

开发者可以自定义日历的样式、添加自定义事件和行为等。

2. 日期选择:Vue-Calendar支持日期的选择功能,用户可以通过点击日历中的日期来选取特定的日期。

同时,开发者也可以通过配置选项来设置日期的范围,以及限制用户选择的日期。

3. 事件管理:Vue-Calendar可以轻松管理和展示日历中的事件。

开发者可以在日历上添加事件,设置事件的日期、时间和备注等信息。

同时,Vue-Calendar还支持事件的拖拽和调整功能,方便用户进行事件的管理和操作。

4. 周视图和月视图:Vue-Calendar支持周视图和月视图两种不同的展示模式。

在周视图中,用户可以查看一周内的日程安排,而在月视图中,用户可以一次性查看一个月的日程安排。

开发者可以根据需求选择合适的视图模式。

5. 国际化支持:Vue-Calendar提供了多语言支持,可以根据用户的语言环境自动切换日历的语言。

开发者可以轻松地将日历翻译成不同的语言,以满足不同地区用户的需求。

6. 响应式设计:Vue-Calendar使用Vue.js的响应式设计,可以适应不同的屏幕尺寸和设备类型。

无论是在电脑、平板还是手机上,用户都可以获得良好的日历使用体验。

7. 事件提醒:Vue-Calendar提供了事件提醒功能,用户可以设置事件的提醒时间和方式。

在事件即将发生时,日历会自动发送提醒通知给用户,以帮助用户及时处理重要的日程安排。

8. 节假日显示:Vue-Calendar可以显示节假日信息,用户可以通过配置选项来启用或禁用节假日显示。

开发者可以根据用户所在地区的法定假日规定,来决定是否显示相关信息。

js显示时间+农历+节日

js显示时间+农历+节日

195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
}
if(offset==0 && leap>0 && i==leap+1)
if(this.isLeap)
{ this.isLeap = false; }
else
{ this.isLeap = true; --i; --this.monCyl;}
return(cl+SY+'年'+(SM+1)+'月'+SD+'日</font>');
}
function weekday(){
var day = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var cl = '<font color="#000000" STYLE="font-size:9pt;">';
if(leap>0 && i==(leap+1) && this.isLeap==false)

获取阴历(农历)和当前日期的js代码

获取阴历(农历)和当前日期的js代码

获取阴历(农历)和当前⽇期的js代码本⽂为⼤家分享了⼀段js显⽰阴历(农历)和当前⽇期的关键性代码,供⼤家参考,具体内容如下var CalendarData=new Array(100);var madd=new Array(12);var tgString="甲⼄丙丁戊⼰庚⾟壬癸";var dzString="⼦丑寅卯⾠巳午未申⾣戌亥";var numString="⼀⼆三四五六七⼋九⼗";var monString="正⼆三四五六七⼋九⼗冬腊";var weekString="⽇⼀⼆三四五六";var sx="⿏⽜虎兔龙蛇马⽺猴鸡狗猪";var cYear,cMonth,cDay,TheDate;CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x7169 madd[0]=0;madd[1]=31;madd[2]=59;madd[3]=90;madd[4]=120;madd[5]=151;madd[6]=181;madd[7]=212;madd[8]=243;madd[9]=273;madd[10]=304;madd[11]=334;function GetBit(m,n){return (m>>n)&1;}function e2c(){TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);var total,m,n,k;var isEnd=false;var tmp=TheDate.getYear();if(tmp<1900){tmp+=1900;}total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38;if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) {total++;}for(m=0;;m++){k=(CalendarData[m]<0xfff)?11:12;for(n=k;n>=0;n--){if(total<=29+GetBit(CalendarData[m],n)){isEnd=true; break;}total=total-29-GetBit(CalendarData[m],n);}if(isEnd) break;}cYear=1921 + m;cMonth=k-n+1;cDay=total;if(k==12){if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){cMonth=1-cMonth;}if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){cMonth--;}}}function GetcDateString(){var tmp="";tmp+=tgString.charAt((cYear-4)%10);tmp+=dzString.charAt((cYear-4)%12);tmp+="(";tmp+=sx.charAt((cYear-4)%12);tmp+=")年 ";if(cMonth<1){tmp+="(闰)";tmp+=monString.charAt(-cMonth-1);}else{tmp+=monString.charAt(cMonth-1);}tmp+="⽉";tmp+=(cDay<11)?"初":((cDay<20)?"⼗":((cDay<30)?"廿":"三⼗"));if (cDay%10!=0||cDay==10){tmp+=numString.charAt((cDay-1)%10);}return tmp;}function GetLunarDay(solarYear,solarMonth,solarDay){//solarYear = solarYear<1900?(1900+solarYear):solarYear;if(solarYear<1921 || solarYear>2020){return "";}else{solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;e2c(solarYear,solarMonth,solarDay);return GetcDateString();}}var D=new Date();var yy=D.getFullYear();var mm=D.getMonth()+1;var dd=D.getDate();var ww=D.getDay();var ss=parseInt(D.getTime() / 1000);if (yy<100) yy="19"+yy;function showCal(){document.write(GetLunarDay(yy,mm,dd));}页⾯调⽤代码:<script language="JavaScript" type="text/javascript" src="getCNdate.js"></script><script type="text/javascript">showCal();</script>代码⼆:⽤JavaScript获取当前农历⽇期<script type="text/javascript">var sWeek = new Array("星期⽇","星期⼀","星期⼆","星期三","星期四","星期五","星期六");var dNow = new Date();var CalendarData=new Array(100);var madd=new Array(12);var tgString="甲⼄丙丁戊⼰庚⾟壬癸";var dzString="⼦丑寅卯⾠巳午未申⾣戌亥";var numString="⼀⼆三四五六七⼋九⼗";var monString="正⼆三四五六七⼋九⼗冬腊";var weekString="⽇⼀⼆三四五六" CalendarData = new Array( 0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96, 0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A, 0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x 0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96, 0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95, 0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95); madd[0]=0;madd[1]=31;madd[2]=59;madd[3]=90;madd[4]=120;madd[5]=151;madd[6]=181;madd[7]=212;madd[8]=243;madd[9]=273;madd[10]=304;madd[11]=334;function GetBit(m,n) { return (m>>n)&1; }function e2c(){TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);var total,m,n,k;var isEnd=false;var tmp=TheDate.getFullYear();total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38; if (TheDate.getYear()%4==0&&TheDate.getMonth()>1) { total++;} for(m=0;;m++) { k=(CalendarData[m]<0xfff)?11:12; for(n=k;n>=0;n--) { if(total<=29+GetBit(C function GetcDateString(){ var tmp=""; tmp+=tgString.charAt((cYear-4)%10);tmp+=dzString.charAt((cYear-4)%12);tmp+="年 ";if(cMonth<1) { tmp+="(闰)"; tmp+=monString.charAt(-cMonth-1); } else {tmp+=monString.charAt(cMonth-1);} tmp+="⽉"; tmp+=(cDay<11)?"初":((cDay<20)?"⼗":((cDay<30)?"廿":"三⼗"));if (cDay%10!=0||cDay==10) { tmp+=numString.charAt((cDay-1)%10); } return tmp;}function GetLunarDay(solarYear,solarMonth,solarDay){if (solarYear<1921 || solarYear>2020) { return "";} else { solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11; e2c(solarYear,solarMonth,solarDay); return GetcDateString(); }}var D=new Date();var yy=D.getFullYear();var mm=D.getMonth()+1;var dd=D.getDate();var ww=D.getDay();var ss=parseInt(D.getTime() / 1000);function getFullYear(d){// 修正firefox下year错误yr=d.getYear();if(yr<1000)yr+=1900;return yr;}function showDate() {var sValue = getFullYear(dNow)+"年"+(dNow.getMonth()+1)+"⽉"+dNow.getDate()+"⽇"+" "+sWeek[dNow.getDay()]+" ";sValue+=GetLunarDay(yy,mm,dd);document.getElementById("pDate").innerHTML = sValue;};window.onload=showDate;</script>知道如何获取农历,如何呢获取当前⽇期也很简单。

JSP日历控件

JSP日历控件
function selected(cal, date) {
cal.sel.value = date; // just update the date in the input field.
if (cal.dateClicked && (cal.sel.id == "sel1" || cal.sel.id == "sel3"))
cal.showsTime = true;
cal.time24 = (showsTime == "24");
}
if (showsOtherMonths) {
cal.showsOtherMonths = true;
}
calendar = cal; // remember it in the global var
cal.callCloseHandler();
}
function closeHandler(cal) {
cal.hide(); // hide the calendar
// cal.destroy();
calendar = null;
return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
}
</script>
<input type=text readonly size=12 name="f_date" id=start value="<%=fbrq%>"><input type="reset" value="选择" onclick="return showCalendar('start', '%Y-%m-%d %H:%M', '24', true);">

JS制作简单的日历控件【JS Date对象练习实例】

JS制作简单的日历控件【JS Date对象练习实例】

JS制作简单的日历控件【JS Date对象练习实例】一直对JS 中的Date 对象不是很熟练,缺乏操作实践,端午节抽空复习了一下,做了一个简单的日期选择控件日历外观参考了淘宝旅行中的日期控件,控件只有基本功能,木有做节日显示,木有做IE6的SELECT遮挡控制,仅供练习:使用方法:只需传入日期INPUT元素的ID即可,isSelect选项为是否为SELECT下拉选择年月设置var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id:'j_Date2',isSelect:!0});演示如下:支持选择年月支持SELECT选择年月没空做教程啦,有兴趣的看源代码吧,详细源代码+注释如下:<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>日历组件示例</title><style>.calendar{font-family:Tahoma; background:#fff; float:left; border-style:solid; border-width:1px; border-color:#85BEE5 #3485C0 #3485C0 #85BEE5; position:relative; padding:10px; overflow:hidden;}.calendar dl,.calendar dd{margin:0; padding:0; width:183px; font-size:12px; line-height:22px;}.calendar dt.title-date{ display:block; border-bottom:1px solid #E4E4E4; font-weight:700; position:relative; margin-bottom:5px;}.calendar dt{ float:left; width:25px; margin-left:1px; text-align:center;}.calendar dt.title-date{ width:100%;}.calendar dd{clear: both;width: 183px;height: 139px;font-weight: 700;background:url(/cnblogs_com/NNUF/379856/o_bg.png) no-repeat; margin:0;}.prevyear,.nextyear, .prevmonth,.nextmonth{cursor:pointer;height:9px; background:url(/cnblogs_com/NNUF/379856/o_nextprv.png)no-repeat; overflow:hidden;position:absolute; top:8px; text-indent:-999px;}.prevyear{ left:4px; width:9px;}.prevmonth{ width:5px; background-position:-9px 0; left:20px;}.nextyear{ width:9px; background-position:-19px 0; right:5px;}.nextmonth{ width:5px; background-position:-14px 0; right:20px;}.calendar dd a{float: left;width: 25px;height: 22px; color:blue; overflow: hidden; text-decoration: none;margin: 1px 0 0 1px; text-align:center;}.calendar dd a.disabled{color:#999;}.calendar dd a.tody{ color:red; }.calendar dd a.on{background:blue; color:#fff;}.calendar dd a.live{cursor:pointer}.input{ border:1px solid #ccc; padding:4px; background:url(/cnblogs_com/NNUF/379856/o_nextprv.png)no-repeat right -18px;}</style></head><body><br/><br/><h3>支持选择年月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持SELECT选择年月</h3><div><input type="text" id="j_Date1" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="j_Date2" class="input"></div><br/><div></div><!--日历控件JS源码--><script>/*** @namespace _CalF* 日历控件所用便捷函数* */_CalF = {// 选择元素$:function(arg,context){var tagAll,n,eles=[],i,sub = arg.substring(1);context = context||document;if(typeof arg =='string'){switch(arg.charAt(0)){case '#':return document.getElementById(sub);break;case '.':if(context.getElementsByClassName) return context.getElementsByClassName(sub);tagAll = _CalF.$('*',context);n = tagAll.length;for(i = 0;i<n;i++){if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);}return eles;break;default:return context.getElementsByTagName(arg);break;}}},// 绑定事件bind:function(node,type,handler){node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);},// 获取元素位置getPos:function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,scrollt = document.documentElement.scrollTop || document.body.scrollTop;pos = node.getBoundingClientRect();return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }},// 添加样式名addClass:function(c,node){node.className = node.className + ' ' + c;},// 移除样式名removeClass:function(c,node){var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");node.className = node.className.replace(reg, '');},// 阻止冒泡stopPropagation:function(event){event = event || window.event;event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;}};/*** @name Calender* @constructor* @created by VVG* @/NNUF/* @mysheller@* */function Calender() {this.initialize.apply(this, arguments);}Calender.prototype = {constructor:Calender,// 模板数组_template :['<dl>','<dt class="title-date">','<span class="prevyear">prevyear</span><span class="prevmonth">prevmonth</span>','<span class="nextyear">nextyear</span><span class="nextmonth">nextmonth</span>','</dt>','<dt><strong>日</strong></dt>','<dt>一</dt>','<dt>二</dt>','<dt>三</dt>','<dt>四</dt>','<dt>五</dt>','<dt><strong>六</strong></dt>','<dd></dd>','</dl>'],// 初始化对象initialize :function (options) {this.id = options.id; // input的IDthis.input = _CalF.$('#'+ this.id); // 获取INPUT元素this.isSelect = options.isSelect; // 是否支持下拉SELECT选择年月,默认不显示this.inputEvent(); // input的事件绑定,获取焦点事件},// 创建日期最外层盒子,并设置盒子的绝对定位createContainer:function(){// 如果存在,则移除整个日期层Containervar odiv = _CalF.$('#'+ this.id + '-date');if(!!odiv) odiv.parentNode.removeChild(odiv);var container = this.container = document.createElement('div');container.id = this.id + '-date';container.style.position = "absolute";container.zIndex = 999;// 获取input表单位置inputPosvar input = _CalF.$('#' + this.id),inputPos = _CalF.getPos(input);//console.log(inputPos.top + ':' + inputPos.right + ' ' + inputPos.bottom + ' ' + inputPos.left);// 根据input的位置设置container高度container.style.left = inputPos.left + 'px';container.style.top = inputPos.bottom - 1 + 'px';// 设置日期层上的单击事件,仅供阻止冒泡,用途在日期层外单击关闭日期层_CalF.bind(container, 'click', _CalF.stopPropagation);document.body.appendChild(container);},// 渲染日期drawDate:function (odate) { // 参数odate 为日期对象格式var dateWarp, titleDate, dd, year, month, date, days, weekStart,i,l,ddHtml=[],textNode;var nowDate = new Date(),nowyear = nowDate.getFullYear(),nowmonth = nowDate.getMonth(),nowdate = nowDate.getDate();this.dateWarp = dateWarp = document.createElement('div');dateWarp.className = 'calendar';dateWarp.innerHTML = this._template.join('');this.year = year = odate.getFullYear();this.month = month = odate.getMonth()+1;this.date = date = odate.getDate();this.titleDate = titleDate = _CalF.$('.title-date', dateWarp)[0];// 是否显示SELECTif(this.isSelect){var selectHtmls =[];selectHtmls.push('<select>');for(i = 2020;i>1970;i--){if(i != this.year){selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');}else{selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');}}selectHtmls.push('</select>');selectHtmls.push('年');selectHtmls.push('<select>');for(i = 1;i<13;i++){if(i != this.month){selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');}else{selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');}}selectHtmls.push('</select>');selectHtmls.push('月');titleDate.innerHTML = selectHtmls.join('');// 绑定change事件this.selectChange();}else{textNode = document.createTextNode(year + '年' + month + '月');titleDate.appendChild(textNode);this.btnEvent();}// 获取模板中唯一的DD元素this.dd = dd = _CalF.$('dd',dateWarp)[0];// 获取本月天数days = new Date(year, month, 0).getDate();// 获取本月第一天是星期几weekStart = new Date(year, month-1,1).getDay();// 开头显示空白段for (i = 0; i < weekStart; i++) {ddHtml.push('<a>&nbsp;</a>');}// 循环显示日期for (i = 1; i <= days; i++) {if (year < nowyear) {ddHtml.push('<a class="live disabled">' + i + '</a>');} else if (year == nowyear) {if (month < nowmonth + 1) {ddHtml.push('<a class="live disabled">' + i + '</a>');} else if (month == nowmonth + 1) {if (i < nowdate) ddHtml.push('<a class="live disabled">' + i + '</a>');if (i == nowdate) ddHtml.push('<a class="live tody">' + i + '</a>');if (i > nowdate) ddHtml.push('<a class="live">' + i + '</a>');} else if (month > nowmonth + 1) {ddHtml.push('<a class="live">' + i + '</a>');}} else if (year > nowyear) {ddHtml.push('<a class="live">' + i + '</a>');}}dd.innerHTML = ddHtml.join('');// 如果存在,则先移除this.removeDate();// 添加this.container.appendChild(dateWarp);// A link事件绑定this.linkOn();// 区域外事件绑定this.outClick();},// SELECT CHANGE 事件selectChange:function(){var selects,yearSelect,monthSelect,that = this;selects = _CalF.$('select',this.titleDate);yearSelect = selects[0];monthSelect = selects[1];_CalF.bind(yearSelect, 'change',function(){var year = yearSelect.value;var month = monthSelect.value;that.drawDate(new Date(year, month-1, that.date));});_CalF.bind(monthSelect, 'change',function(){var year = yearSelect.value;var month = monthSelect.value;that.drawDate(new Date(year, month-1, that.date));})},// 移除日期DIV.calendarremoveDate:function(){var odiv = _CalF.$('.calendar',this.container)[0];if(!!odiv) this.container.removeChild(odiv);},// 上一月,下一月按钮事件btnEvent:function(){var prevyear = _CalF.$('.prevyear',this.dateWarp)[0],prevmonth = _CalF.$('.prevmonth',this.dateWarp)[0],nextyear = _CalF.$('.nextyear',this.dateWarp)[0],nextmonth = _CalF.$('.nextmonth',this.dateWarp)[0],that = this;prevyear.onclick = function(){var idate = new Date(that.year-1, that.month-1, that.date);that.drawDate(idate);};prevmonth.onclick = function(){var idate = new Date(that.year, that.month-2,that.date);that.drawDate(idate);};nextyear.onclick = function(){var idate = new Date(that.year + 1,that.month - 1, that.date);that.drawDate(idate);};nextmonth.onclick = function(){var idate = new Date(that.year , that.month, that.date);that.drawDate(idate);}},// A 的事件linkOn:function(){var links = _CalF.$('.live',this.dd),i,l=links.length,that=this;for(i = 0;i<l;i++){links[i].index = i;links[i].onmouseover = function(){_CalF.addClass("on",links[this.index]);};links[i].onmouseout = function(){_CalF.removeClass("on",links[this.index]);};links[i].onclick = function(){that.date = this.innerHTML;that.input.value = that.year + '-' + that.month + '-' + that.date;that.removeDate();}}},// 表单的事件inputEvent:function(){var that = this;_CalF.bind(this.input, 'focus',function(){that.createContainer();that.drawDate(new Date());});_CalF.bind(this.input, 'click',_CalF.stopPropagation);},// 鼠标在对象区域外点击,移除日期层outClick:function(){var that = this;_CalF.bind(document, 'click',function(){that.removeDate();})}};var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id:'j_Date2',isSelect:!0});</script></body></html>。

JS日期控件My97DatePicker基本用法

JS日期控件My97DatePicker基本用法

JS⽇期控件My97DatePicker基本⽤法My97DatePicker是⼀款⾮常灵活好⽤的⽇期控件。

使⽤⾮常简单。

1、下载My97DatePicker组件包2、在页⾯中引⼊该组件js⽂件:<script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script>3、例⼦<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My97DatePicker⽇期控件使⽤</title></head><body><center><h2>My97DatePicker⽇期控件的使⽤</h2></center>基本⽤法:<input id="" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" /><br><br>只能选择今天以前的⽇期:<input id="" class="Wdate" onfocus="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})" /><br><br>使⽤运算表达式只能选择 20⼩时前⾄ 30⼩时后的⽇期<input id="" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})" /><br><br>开始,结束⽇期:<!-- $dp.$ 相当于 document.getElementById 函数. --><input id="sdate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" />-<input id="edate" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,minDate:'#F{$dp.$D(\'sdate\')}',startDate:'#F{$dp.$D(\'sdate\',{d:+1})}'})" /><br><br> </body><script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script></html>如需修改配置信息,只需WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'edate\')}'})" 加上相关配置信息即可4、常⽤的配置信息。

js阳历、阴历互转

js阳历、阴历互转

js阳历、阴历互转10* @公历转农历:calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]11* @农历转公历:calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]12*/13var calendar = {1415/**16 * 农历1900-2100的润⼤⼩信息表17 * @Array Of Property18 * @return Hex19*/20 lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-190921 0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-191922 0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-192923 0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-193924 0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-194925 0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-195926 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-196927 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-197928 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-198929 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-199930 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-200931 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-201932 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-202933 0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-203934 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-204935/**Add By JJonline@**/36 0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-205937 0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-206938 0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-207939 0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-208940 0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-209941 0x0d520],//21004243/**44 * 公历每个⽉份的天数普通表45 * @Array Of Property46 * @return Number47*/48 solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],4950/**51 * 天⼲地⽀之天⼲速查表52 * @Array Of Property trans["甲","⼄","丙","丁","戊","⼰","庚","⾟","壬","癸"]53 * @return Cn string54*/55 Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],5657/**58 * 天⼲地⽀之地⽀速查表59 * @Array Of Property60 * @trans["⼦","丑","寅","卯","⾠","巳","午","未","申","⾣","戌","亥"]61 * @return Cn string62*/63 Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],6465/**66 * 天⼲地⽀之地⽀速查表<=>⽣肖67 * @Array Of Property68 * @trans["⿏","⽜","虎","兔","龙","蛇","马","⽺","猴","鸡","狗","猪"]69 * @return Cn string70*/71 Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],7273/**74 * 24节⽓速查表75 * @Array Of Property76 * @trans["⼩寒","⼤寒","⽴春","⾬⽔","惊蛰","春分","清明","⾕⾬","⽴夏","⼩满","芒种","夏⾄","⼩暑","⼤暑","⽴秋","处暑","⽩露","秋分","寒露","霜降","⽴冬","⼩雪","⼤雪","冬⾄"]77 * @return Cn string78*/79 solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb 8081/**82 * 1900-2100各年的24节⽓⽇期速查表83 * @Array Of Property84 * @return 0x string For splice85*/86 sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',87 '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',88 '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',89 '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',90 'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',91 '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',92 '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',93 '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',94 '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',95 '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',96 '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',97 '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',98 '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',99 '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',100 '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',101 '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',102 '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',103 '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',104 '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',105 '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',106 '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',107 '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',108 '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',109 '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',110 '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',111 '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',112 '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',113 '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',114 '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',115 '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',116 '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',117 '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',118 '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',119 '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',120 '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',121 '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',122 '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',123 '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',124 '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',125 '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',126 '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',127 '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',129 '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722', 130 '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722', 131 '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', 132 '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd', 133 '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722', 134 '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722', 135 '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721', 136 '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5', 137 '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722', 138 '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', 139 '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd', 140 '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35', 141 '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722', 142 '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721', 143 '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd', 144 '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35', 145 '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722', 146 '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721', 147 '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5', 148 '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35', 149 '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', 150 '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd', 151 '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35', 152 '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'], 153154/**155 * 数字转中⽂速查表156 * @Array Of Property157 * @trans ['⽇','⼀','⼆','三','四','五','六','七','⼋','九','⼗']158 * @return Cn string159*/160 nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],161162/**163 * ⽇期转农历称呼速查表164 * @Array Of Property165 * @trans ['初','⼗','廿','卅']166 * @return Cn string167*/168 nStr2:["\u521d","\u5341","\u5eff","\u5345"],169170/**171 * ⽉份转农历称呼速查表172 * @Array Of Property173 * @trans ['正','⼀','⼆','三','四','五','六','七','⼋','九','⼗','冬','腊']174 * @return Cn string175*/176 nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"], 177178/**179 * 返回农历y年⼀整年的总天数180 * @param lunar Year181 * @return Number182 * @evar .lYearDays(1987) ;//count=387183*/184 lYearDays:function(y) {185var i, sum = 348;186for(i=0x8000; i>0x8; i>>=1) { sum += (calendar.lunarInfo[y-1900] & i)? 1: 0; }187return(sum+calendar.leapDays(y));188 },189190/**191 * 返回农历y年闰⽉是哪个⽉;若y年没有闰⽉则返回0192 * @param lunar Year193 * @return Number (0-12)194 * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6195*/196 leapMonth:function(y) { //闰字编码 \u95f0197return(calendar.lunarInfo[y-1900] & 0xf);198 },199200/**201 * 返回农历y年闰⽉的天数若该年没有闰⽉则返回0202 * @param lunar Year203 * @return Number (0、29、30)204 * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29205*/206 leapDays:function(y) {207if(calendar.leapMonth(y)) {208return((calendar.lunarInfo[y-1900] & 0x10000)? 30: 29);209 }210return(0);211 },212213/**214 * 返回农历y年m⽉(⾮闰⽉)的总天数,计算m为闰⽉时的天数请使⽤leapDays⽅法215 * @param lunar Year216 * @return Number (-1、29、30)217 * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29218*/219 monthDays:function(y,m) {220if(m>12 || m<1) {return -1}//⽉份参数从1⾄12,参数错误返回-1221return( (calendar.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );222 },223224/**225 * 返回公历(!)y年m⽉的天数226 * @param solar Year227 * @return Number (-1、28、29、30、31)228 * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30229*/230 solarDays:function(y,m) {231if(m>12 || m<1) {return -1} //若参数错误返回-1232var ms = m-1;233if(ms==1) { //2⽉份的闰平规律测算后确认返回28或29234return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);235 }else {236return(calendar.solarMonth[ms]);237 }238 },239240/**241 * 农历年份转换为⼲⽀纪年242 * @param lYear 农历年的年份数243 * @return Cn string244*/245 toGanZhiYear:function(lYear) {246var ganKey = (lYear - 3) % 10;247var zhiKey = (lYear - 3) % 12;248if(ganKey == 0) ganKey = 10;//如果余数为0则为最后⼀个天⼲249if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后⼀个地⽀250return calendar.Gan[ganKey-1] + calendar.Zhi[zhiKey-1];252 },253254/**255 * 公历⽉、⽇判断所属星座256 * @param cMonth [description]257 * @param cDay [description]258 * @return Cn string259*/260 toAstro:function(cMonth,cDay) {261var s = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf"; 262var arr = [20,19,21,21,21,22,23,23,23,23,22,22];263return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座264 },265266/**267 * 传⼊offset偏移量返回⼲⽀268 * @param offset 相对甲⼦的偏移量269 * @return Cn string270*/271 toGanZhi:function(offset) {272return calendar.Gan[offset%10] + calendar.Zhi[offset%12];273 },274275/**276 * 传⼊公历(!)y年获得该年第n个节⽓的公历⽇期277 * @param y公历年(1900-2100);n⼆⼗四节⽓中的第⼏个节⽓(1~24);从n=1(⼩寒)算起278 * @return day Number279 * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2⽉4⽇⽴春280*/281 getTerm:function(y,n) {282if(y<1900 || y>2100) {return -1;}283if(n<1 || n>24) {return -1;}284var _table = calendar.sTermInfo[y-1900];285var _info = [286 parseInt('0x'+_table.substr(0,5)).toString() ,287 parseInt('0x'+_table.substr(5,5)).toString(),288 parseInt('0x'+_table.substr(10,5)).toString(),289 parseInt('0x'+_table.substr(15,5)).toString(),290 parseInt('0x'+_table.substr(20,5)).toString(),291 parseInt('0x'+_table.substr(25,5)).toString()292 ];293var _calday = [294 _info[0].substr(0,1),295 _info[0].substr(1,2),296 _info[0].substr(3,1),297 _info[0].substr(4,2),298299 _info[1].substr(0,1),300 _info[1].substr(1,2),301 _info[1].substr(3,1),302 _info[1].substr(4,2),303304 _info[2].substr(0,1),305 _info[2].substr(1,2),306 _info[2].substr(3,1),307 _info[2].substr(4,2),308309 _info[3].substr(0,1),310 _info[3].substr(1,2),311 _info[3].substr(3,1),312 _info[3].substr(4,2),313314 _info[4].substr(0,1),315 _info[4].substr(1,2),316 _info[4].substr(3,1),317 _info[4].substr(4,2),318319 _info[5].substr(0,1),320 _info[5].substr(1,2),321 _info[5].substr(3,1),322 _info[5].substr(4,2),323 ];324return parseInt(_calday[n-1]);325 },326327/**328 * 传⼊农历数字⽉份返回汉语通俗表⽰法329 * @param lunar month330 * @return Cn string331 * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊⽉'332*/333 toChinaMonth:function(m) { // ⽉ => \u6708334if(m>12 || m<1) {return -1} //若参数错误返回-1335var s = calendar.nStr3[m-1];336 s+= "\u6708";//加上⽉字337return s;338 },339340/**341 * 传⼊农历⽇期数字返回汉字表⽰法342 * @param lunar day343 * @return Cn string344 * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿⼀'345*/346 toChinaDay:function(d){ //⽇ => \u65e5347var s;348switch (d) {349case 10:350 s = '\u521d\u5341'; break;351case 20:352 s = '\u4e8c\u5341'; break;353break;354case 30:355 s = '\u4e09\u5341'; break;356break;357default :358 s = calendar.nStr2[Math.floor(d/10)];359 s += calendar.nStr1[d%10];360 }361return(s);362 },363364/**365 * 年份转⽣肖[!仅能⼤致转换] => 精确划分⽣肖分界线是“⽴春”366 * @param y year367 * @return Cn string368 * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'369*/370 getAnimal: function(y) {371return calendar.Animals[(y - 4) % 12]372 },373375 * 传⼊阳历年⽉⽇获得详细的公历、农历object信息 <=>JSON376 * @param y solar year377 * @param m solar month378 * @param d solar day379 * @return JSON object380 * @eg:console.log(calendar.solar2lunar(1987,11,01));381*/382 solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31383//年份限定、上限384if(y<1900 || y>2100) {385return -1;// undefined转换为数字变为NaN386 }387//公历传参最下限388if(y==1900&&m==1&&d<31) {389return -1;390 }391//未传参获得当天392if(!y) {393var objDate = new Date();394 }else {395var objDate = new Date(y,parseInt(m)-1,d)396 }397var i, leap=0, temp=0;398//修正ymd参数399var y = objDate.getFullYear(),400 m = objDate.getMonth()+1,401 d = objDate.getDate();402var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;403for(i=1900; i<2101 && offset>0; i++) {404 temp = calendar.lYearDays(i);405 offset -= temp;406 }407if(offset<0) {408 offset+=temp; i--;409 }410411//是否今天412var isTodayObj = new Date(),413 isToday = false;414if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {415 isToday = true;416 }417//星期⼏418var nWeek = objDate.getDay(),419 cWeek = calendar.nStr1[nWeek];420//数字表⽰周⼏顺应天朝周⼀开始的惯例421if(nWeek==0) {422 nWeek = 7;423 }424//农历年425var year = i;426var leap = calendar.leapMonth(i); //闰哪个⽉427var isLeap = false;428429//效验闰⽉430for(i=1; i<13 && offset>0; i++) {431//闰⽉432if(leap>0 && i==(leap+1) && isLeap==false){433 --i;434 isLeap = true; temp = calendar.leapDays(year); //计算农历闰⽉天数435 }436else{437 temp = calendar.monthDays(year, i);//计算农历普通⽉天数438 }439//解除闰⽉440if(isLeap==true && i==(leap+1)) { isLeap = false; }441 offset -= temp;442 }443// 闰⽉导致数组下标重叠取反444if(offset==0 && leap>0 && i==leap+1)445 {446if(isLeap){447 isLeap = false;448 }else{449 isLeap = true; --i;450 }451 }452if(offset<0)453 {454 offset += temp; --i;455 }456//农历⽉457var month = i;458//农历⽇459var day = offset + 1;460//天⼲地⽀处理461var sm = m-1;462var gzY = calendar.toGanZhiYear(year);463464// 当⽉的两个节⽓465// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`466var firstNode = calendar.getTerm(y,(m*2-1));//返回当⽉「节」为⼏⽇开始467var secondNode = calendar.getTerm(y,(m*2));//返回当⽉「节」为⼏⽇开始468469// 依据12节⽓修正⼲⽀⽉470var gzM = calendar.toGanZhi((y-1900)*12+m+11);471if(d>=firstNode) {472 gzM = calendar.toGanZhi((y-1900)*12+m+12);473 }474475//传⼊的⽇期的节⽓与否476var isTerm = false;477var Term = null;478if(firstNode==d) {479 isTerm = true;480 Term = calendar.solarTerm[m*2-2];481 }482if(secondNode==d) {483 isTerm = true;484 Term = calendar.solarTerm[m*2-1];485 }486//⽇柱当⽉⼀⽇与 1900/1/1 相差天数487var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;488var gzD = calendar.toGanZhi(dayCyclical+d-1);489//该⽇期所属的星座490var astro = calendar.toAstro(m,d);491492return {'lYear':year,'lMonth':month,'lDay':day,'Animal':calendar.getAnimal(year),'IMonthCn':(isLeap?"\u95f0":'')+calendar.toChinaMonth(month),'IDayCn':calendar.toChinaDay(day),'cYear':y,'cMonth':m,'cDay':d,'gzYear':gzY,'gzMonth':gzM,'gz 493 },494495/**496 * 传⼊农历年⽉⽇以及传⼊的⽉份是否闰⽉获得详细的公历、农历object信息 <=>JSON498 * @param m lunar month499 * @param d lunar day500 * @param isLeapMonth lunar month is leap or not.[如果是农历闰⽉第四个参数赋值true即可]501 * @return JSON object502 * @eg:console.log(calendar.lunar2solar(1987,9,10));503*/504 lunar2solar:function(y,m,d,isLeapMonth) { //参数区间1900.1.31~2100.12.1505var isLeapMonth = !!isLeapMonth;506var leapOffset = 0;507var leapMonth = calendar.leapMonth(y);508var leapDay = calendar.leapDays(y);509if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰⽉公历但该年得出的闰⽉与传参的⽉份并不同510if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最⼤极限值511var day = calendar.monthDays(y,m);512var _day = day;513//bugFix 2016-9-25514//if month is leap, _day use leapDays method515if(isLeapMonth) {516 _day = calendar.leapDays(y,m);517 }518if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验519520//计算农历的时间差521var offset = 0;522for(var i=1900;i<y;i++) {523 offset+=calendar.lYearDays(i);524 }525var leap = 0,isAdd= false;526for(var i=1;i<m;i++) {527 leap = calendar.leapMonth(y);528if(!isAdd) {//处理闰⽉529if(leap<=i && leap>0) {530 offset+=calendar.leapDays(y);isAdd = true;531 }532 }533 offset+=calendar.monthDays(y,i);534 }535//转换闰⽉农历需补充该年闰⽉的前⼀个⽉的时差536if(isLeapMonth) {offset+=day;}537//1900年农历正⽉⼀⽇的公历时间为1900年1⽉30⽇0时0分0秒(该时间也是本农历的最开始起始点)538var stmap = Date.UTC(1900,1,30,0,0,0);539var calObj = new Date((offset+d-31)*86400000+stmap);540var cY = calObj.getUTCFullYear();541var cM = calObj.getUTCMonth()+1;542var cD = calObj.getUTCDate();543544return calendar.solar2lunar(cY,cM,cD);545 }546 };547 export default calendar;。

vue-mobile-calendar 例子-概述说明以及解释

vue-mobile-calendar 例子-概述说明以及解释

vue-mobile-calendar 例子-概述说明以及解释1.引言1.1 概述概述部分:Vue-mobile-calendar是一个基于Vue.js框架开发的移动端日历组件。

随着移动互联网的快速发展,移动应用的需求也变得更加多样化和复杂化。

其中,日历功能作为常见的应用场景之一,在许多移动应用程序中至关重要。

本文将介绍Vue.js框架的基本概念和特点,然后重点讨论移动端日历组件的需求。

我们将分析日历组件的功能要求,如日期选择、事件标记、周/月视图切换等,以及日历组件在移动端开发中的重要性和应用场景。

通过阅读本文,读者将了解到如何使用Vue.js框架构建移动端日历组件,并提供实际案例作为参考。

本文的目的在于帮助读者更好地理解Vue.js 框架的应用,并为移动应用程序开发者提供一种快速构建移动端日历功能的解决方案。

在接下来的章节中,我们将详细介绍Vue.js框架的特点和优势,以及移动端日历组件的需求和实现方式。

结合实际代码示例,我们将演示如何使用Vue.js框架构建一个功能完善且用户友好的移动端日历组件。

希望通过本文的介绍,读者能够对Vue.js框架有一个全面的了解,并从实际的例子中学习到如何开发移动端日历组件。

无论是初学者还是有一定经验的开发者,都能够从本文中获得有益的知识和经验,为自己的项目开发和技术提升提供参考。

文章结构是指文章的整体组织框架和布局方式。

它是文章的骨架,决定了文章的条理清晰度和逻辑性,使读者能够更好地理解和掌握文章的内容。

以下是对文章结构部分的内容的编写:1.2 文章结构文章将按照以下结构展开:引言:本节介绍文章的引言部分,包括对文章主题的概述、文章结构的说明以及文章的目的和意义。

通过引言部分,读者将对整篇文章有一个整体的了解和把握。

正文:本节将详细介绍Vue.js的简介和移动端日历组件的需求。

其中,对Vue.js进行简要描述,包括其背景、特点和应用场景等,以便读者对Vue.js有一个初步的了解。

js对农历日期处理

js对农历日期处理
if ((LunarDaysOfMonth[iLunarYear - 2001] & (1 << Bit)) > 0) Low++;
if (iLunarMonth == GetLeapMonth(iLunarYear))
{
High = ((LunarDaysOfMonth[iLunarYear - 2001]
{
var Leap = LunarLeapYear[(iLunarYear - 2001) >> 1];
return (((iLunarYear - 2001) & 1) == 0) ? (Leap >> 4) : (Leap & 0x0f);
}
// 返回农历iLunarYer年iLunarMonth月的天数,结果是一个长整数
var iSpanDays = Math.round(SolarDate.getTime() / DyMilli) - 11323;
// 公历2001年1月24日为农历2001年正月初一,差23天
if (iSpanDays < 23)
{
iYear = 2000;
iLunarMonth = 12;
}
return Days;
}
// 将农历iLunarYear年格式化成天干地支记年法表示的字符串
function FormatLunarYear(iLunarYear)
{
var szText1 = new String("甲乙丙丁戊己庚辛壬癸");
// 如果iLunarMonth不是闰月, 高字为0,低字为该月的天数

微信小程序日历组件calendar详解及实例

微信小程序日历组件calendar详解及实例
以上用法看不懂的话,具体就参考代码里面index目录下。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
JS代码使用:
var Calendar = require('../cal/calendar'); Page({ data: { selected_value: [], days: [], month: [], years: [], lunar_years: [], lunar_month: [], lunar_days: [], selectDateType: 1, lunar_selected_value: [] }, .... // 指定选择器回调函数 new Calendar('key', this, function(date){
that.setData({ date: date
}) });
样式
.calendar{ position: absolute; bottom: 0; width: 100%; z-index: 999; background-color: #fff;
} .tab{
display:inline-block; width:50%; text-align:center; font-size:16px; color: #ccc; } .tab-bar{ background-color: #eee; height: 40px; line-height: 40px; } .tab-bar .active{ color: #000; } .selected-item{ font-size: 28px; } .event-type_parent{ font-size: 14px; } .event-type_child{ text-align: center; line-height: 30px; } .event-type_txt{ display: inline-block; }

BIRT报表中文学习手册

BIRT报表中文学习手册

一、去掉Birt表格下自动生成的日期时间在报表下点击Xml Source标签,打开xml,找到<page-setup><simple-master-page name="Simple MasterPage" id="2"><page-footer><text id="3"><property name="contentType">html</property><text-property name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property></text></page-footer></simple-master-page></page-setup>把<text id="3"><property name="contentType">html</property><text-property name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property></text>这几行去掉即可。

二、Birt表格隔行换颜色1、鼠标旋停在表格上,选择Row Detail一行;2、选择script标签页,打开birt的脚本编辑窗口;3、从下拉列表中选择OnCreate,在下面加入Javascript脚本如下:if(row.__rownum % 2 == 0){this.getStyle().backgroundColor = "#E9EAEB";}else{this.getStyle().backgroundColor = "#FFFFFF";}4、保存三、Birt表格分页下面是我从网上找的方法,我试了一下不行,后来我在table里设置了Page break interval 就可以了,但是预览的时候不能看到分页1、鼠标旋停在表格上,选择Row Detail一行;2、选择script标签页,打开birt的脚本编辑窗口;3、从下拉列表中选择onPrepare,在下面加入Javascript脚本如下:var count = 0;4、从下拉列表中选择OnCreate,在下面加入Javascript脚本如下:count++;if(count % 10 == 0){style.pageBreakAfter = "always";}5、保存,使用Web Reviewer进行预览,数据可以进行分页显示了。

Calendar日历类—使用总结

Calendar日历类—使用总结

Calendar日历类—使用总结1. 获取Calendar实例:可以通过调用Calendar类的静态方法getInstance(来获取一个Calendar实例。

该方法会返回一个默认时区和默认语言环境的Calendar 对象。

2.设置日期和时间:可以通过调用Calendar实例的set方法来设置日期和时间。

set方法接收两个参数,第一个参数是Calendar类的字段常量,用于指定要设置的日期或时间的字段,第二个参数是要设置的值。

3.获取日期和时间:可以通过调用Calendar实例的get方法来获取日期和时间。

get方法接收一个参数,用于指定要获取的日期或时间的字段。

可以使用Calendar类的静态字段来指定要获取的字段,比如Calendar.YEAR表示年份,Calendar.MONTH表示月份等。

4.计算日期和时间差:可以通过调用Calendar实例的add方法来计算日期和时间的差。

add 方法接收两个参数,第一个参数是Calendar类的字段常量,用于指定要计算的日期或时间的字段,第二个参数是要添加或减去的值。

5.格式化日期和时间:可以通过调用Calendar实例的getTime方法将Calendar对象转换为Date对象,然后使用SimpleDateFormat类来格式化日期和时间。

SimpleDateFormat类提供了一系列用于格式化日期和时间的方法,比如format方法用于将日期和时间格式化为指定的字符串,parse方法用于将字符串解析为日期和时间。

在实际使用Calendar类时,可以根据具体需求灵活运用上述方法。

以下是一些常见的使用场景:1.获取当前日期和时间:可以通过调用Calendar.getInstance(方法获取一个表示当前日期和时间的Calendar对象,然后使用get方法获取年、月、日、时、分、秒等字段的值。

2.计算日期和时间差:可以通过调用Calendar.getInstance(方法获取两个Calendar对象,然后使用getTimeInMillis方法获取两个日期和时间的毫秒数差,再将毫秒数差转换为天、小时、分钟、秒等单位。

JS日期和时间选择控件

JS日期和时间选择控件
}
tiannetPopCalendar();
}
//用户主调函数-选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值,则将日期和小时及分钟初始化为当前值
// ---------------------- 用户可调用的函数 -----------------------------//
//用户主调函数-只选择日期
function setDay(obj){
tiannetOutObject = obj;
//如果标签中有值,则将日期初始化为当前值
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
*说明:
* 默认返回的日期时间格式如同:2005-02-02 08:08
var tiannetDateSplit = "-"; //日期的分隔符号

外部js文件怎么写

外部js文件怎么写

1.html如何调用外部js文件,外部的js文件该怎么写,是什么格式的<script src = "index_1.js" type="text/javascript"></script&gt;你这个调用的就是外部js文件index_1.js。

onmouseover 和onmouseout直接写到html代码就可以。

<style>.header_1{position:absolute;top:40px;left:220px;height:auto;width:auto;color:#FFF FFF;}.d_over{background:#FF0000;}.d_out{background:#FFFFFF;}</style><div onm ouseover="this.className='d_over'" onmouseout="this.className='d_out'">333333333333333</div>2.如何使用外部js文件}然后在HTML页面中使用如下标记引用这个文件:注意:这里标记必须写成形式,否则浏览器无法正确解析。

二、编码问题使用外部js文件需要注意编码问题。

外部文件实现原理是:浏览器将外部文件内容复制过来嵌入到HTML页面中,再执行,这个复制过程是一个二进制的拷贝,因此,HTML页面与js文件的编码不一致或者不兼容,就会产生问题(乱码、不能执行等)。

解决方法是统一两者的编码,现在通用的是utf-8编码。

2、使用的charset属性,指定外部文件编码方式,例如:下面代码表示外部js文件是以gb2312编码的:。

3.怎么调用外部js文件关于在网页文档中引入(包含)外部JS文件.在网页文档中,(在<head></head&gt;里面)插入如下的代码:<script type="text/javascript" src="./js/calendar.js"></script>说明:src=""里面就是引入文件的路径,作相关修改就可以了其次就是如上例在这个calendar.js中,直接写JAVAscript 程序就可以了,不会像PHP那样,需要在一个起始符跟结束符之间写程序.javascript 只要在*.js中写程序就可以,不需用到起始符跟结束符来标识在其里面就是javascript 程序.4.怎么调用外部js文件看随机抽取这个例子。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
}
calendar.prototype={
init:function(){
var self=this;
//初始化全局属性
self.tmo=null;
self.month=new Date().getFullYear()*12+new Date().getMonth();
self.panel.append(calendarCon);
var _form =self.panel.find('.calendarForm')[n];
_form.style.width=self.options.width+'px';
_form=$(_form);
tmpDate=festival[k].split(':');
if(tmpDate[0].indexOf(currDate)>-1){
tds[i].innerHTML=tmpDate[1];
$(tds[i]).addClass('festival');
self.day=1;
self.dateValue=null;
self.datemap={
'before' : new Date().setDate(new Date().getDate()-10000),
'after' : new Date().setDate(new Date().getDate()+10000),
tds[i].setAttribute('data-value',currDate);
tds[i].innerHTML = dateArray[i] || 'var k=festival.length-1;k>=0;k--){
selectedTip:'入住',
nextInput:'',
prevInput:'',
callback:function(){}
};
self.options={};
self.festival='0000-01-01:元旦,0000-05-01:劳动,0000-10-01:国庆,2015-02-19:春节,2015-04-05:清明,2015-06-20:端午,2015-09-27:中秋,2015-10-21:重阳,2016-02-07:除夕,2016-02-08:春节,2016-02-22:元宵,2016-03-04:清明,2016-05-09:端午,2016-09-15:中秋,2016-10-09:重阳,2017-01-27:除夕,2017-01-28:春节,2017-01-11:元宵,2017-04-04:清明,2017-05-30:端午,2017-10-04:中秋,2017-10-28:重阳';
var currDate=currYear+'-'+self.formatDate(currMon)+'-'+self.formatDate(dateArray[i]),
currDateTime=self.format2Day(currDate).toDateString();
for(k in defaults){
// 检查自定义参数,若没有则使用默认参数
self.options[k] = config[k] !== undefined ? config[k] : defaults[k];
}
return this;
},
// 绘制单个日历面板
}
for(var i=0;i<42;i++){
tmpDays+='<a class="disabled" href="javascript:;"></a>';
}
var currTime=self.month,
currYear=parseInt(currTime/12),
if(nextInput && nextInput.className.indexOf('widget_timer')>-1){
nextInput.rangeDate=_target.value;
selectedDayTime=self.datemap[self.options.selectedDay].toDateString();
}else{
selectedDayTime=self.format2Day(self.options.selectedDay).toDateString();
};
},
setOption:function(config){
// TODO 设置默认参数
var self=this,
config=config || {},
k,defaults={
panels:1,
width:210,
}
var festival=self.festival.replace(/0000/g,currYear.toString()).split(',');
daysCon.off('click');
for(var i = 0; i < tds.length; i++) {
This=self,tmpDate='',
currYear=parseInt(currTime/12),
currMon=currTime-currYear*12+1,
currday=currTime%12,
dateArray = self.getMonthViewDateArray(currYear, currMon-1),
self.dateValue=_target.value =e.target.getAttribute('data-value');
This.hide(This);
// 添加回调函数
if(typeof This.options.callback==='function'){
This.options.callback.call(This,arguments);
}
var nextInput=document.getElementById(This.options.nextInput),
nextDate='',
prevInput=document.getElementById(This.options.prevInput);
self.bindData(currTime,_form);
return this;
},
// 绑定数据
bindData:function(currTime,form){
var self=this,
today=new Date().toDateString(),
currMon=currTime-currYear*12+1,
calendarTitle='<div class="calendarTitle"><a href="javascript:;" class="monSelect"><em class="currYear">'+currYear+'年</em> <em class="currMon">'+currMon+'月</em></a><div class="monSelectBox" style="display: none"></div></div>',
daysCon=$(form).find('.days'),
theDate=currYear+'-'+self.formatDate(currMon)+'-'+self.formatDate(self.day)
tds = daysCon.find('a');
if('today,yesterday,tomorrow,after,before'.indexOf(self.options.selectedDay)>-1){
/**
* @name 日历控件
* @date 2015-06-12
*/
Calendar=(function(){
var datepicker=null,
_target=null,
rangeDate='';
function calendar(){
this.init.apply(this,arguments);
beginYear:1960,
endYear:2020,
tip:'', // 默认为空
revise:[0,0],
startDay:'today',
endDay:'after',
selectedDay:'today',
draw:function(n){
相关文档
最新文档