一個JavaScript WEB日曆控制元件,支援IE6,FireFox,可支援不同語言版本,目前支援中英文。
轉自
謝謝!
網上的WEB日曆控制元件很多,功能也很強大,可惜大都不支援FireFox,自己閒時寫了一個,有如下特色:
特色:
一、支援IE6,FireFox
二、支援中、英文日曆、可自由擴充套件其它語言
三、遇到Select 下拉框的時候,採取隱藏的方法
四、採用div作為日曆容器,不會被瀏覽器攔截
五、支援日期回顯,如果你的文字框中是2003-05-12,要修改此值時,日曆會自動顯示到2003年5月的檢視
存在的問題:
一、速度上不是十分的快、和實現有關,但也不慢,畢竟是指令碼,也沒有什麼耗時的操作,但我總覺得可以改進
二、在同一個頁面支援多種語言時,要建立例項,已經預設建立了一箇中文例項。
var cn_calendar = new Calendar();
var en_calendar = new Calendar();
三、其它的問題等好心的網友給我回饋吧。
CSDN BLOG不能傳附件!!! 程式碼稍候給出。
以下是PP
IE下的中文日曆
IE下的英文日曆
FireFox 下的中文日曆
FireFox下的英文日曆
最後感謝:meizz,在此控制元件中引用了一個meizz的日期格式化方法,我加了一點改動。
給出程式碼:
WebCalendar.js
<!--
/**
* 返回日期
* @param d the delimiter
* @param p the pattern of your date
*/
String.prototype.toDate = function(x, p) {
if(x == null) x = "-";
if(p == null) p = "ymd";
var a = this.split(x);
var y = parseInt(a[p.indexOf("y")]);
//remember to change this next century ;)
if(y.toString().length <= 2) y += 2000;
if(isNaN(y)) y = new Date().getFullYear();
var m = parseInt(a[p.indexOf("m")]) - 1;
var d = parseInt(a[p.indexOf("d")]);
if(isNaN(d)) d = 1;
return new Date(y, m, d);
}
/**
* 格式化日期
* @param d the delimiter
* @param p the pattern of your date
* @author meizz
*/
Date.prototype.format = function(style) {
var o = {
"M+" : this.getMonth() + 1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"w+" : "天一二三四五六".charAt(this.getDay()), //week
"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
"S" : this.getMilliseconds() //millisecond
}
if(/(y+)/.test(style)) {
style = style.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for(var k in o){
if(new RegExp("("+ k +")").test(style)){
style = style.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
}
}
return style;
};
/**
* 日曆類
* @param beginYear 1990
* @param endYear 2010
* @param lang 0(中文)|1(英語) 可自由擴充
* @param dateFormatStyle "yyyy-MM-dd";
* @version 2006-04-01
* @author KimSoft (jinqinghua [at] gmail.com)
* @update
*/
function Calendar(beginYear, endYear, lang, dateFormatStyle) {
this.beginYear = 1990;
this.endYear = 2010;
this.lang = 0; //0(中文) | 1(英文)
this.dateFormatStyle = "yyyy-MM-dd";
if (beginYear != null && endYear != null){
this.beginYear = beginYear;
this.endYear = endYear;
}
if (lang != null){
this.lang = lang
}
if (dateFormatStyle != null){
this.dateFormatStyle = dateFormatStyle
}
this.dateControl = null;
this.panel = this.getElementById("calendarPanel");
this.form = null;
this.date = new Date();
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.colors = {
"cur_word" : "#FFFFFF", //當日日期文字顏色
"cur_bg" : "#00FF00", //當日日期單元格背影色
"sun_word" : "#FF0000", //星期天文字顏色
"sat_word" : "#0000FF", //星期六文字顏色
"td_word_light" : "#333333", //單元格文字顏色
"td_word_dark" : "#CCCCCC", //單元格文字暗色
"td_bg_out" : "#EFEFEF", //單元格背影色
"td_bg_over" : "#FFCC00", //單元格背影色
"tr_word" : "#FFFFFF", //日曆頭文字顏色
"tr_bg" : "#666666", //日曆頭背影色
"input_border" : "#CCCCCC", //input控制元件的邊框顏色
"input_bg" : "#EFEFEF" //input控制元件的背影色
}
this.draw();
this.bindYear();
this.bindMonth();
this.changeSelect();
this.bindData();
}
/**
* 日曆類屬性(語言包,可自由擴充套件)
*/
Calendar.language = {
"year" : [[""], [""]],
"months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
],
"weeks" : [["日","一","二","三","四","五","六"],
["SUN","MON","TUR","WED","THU","FRI","SAT"]
],
"clear" : [["清空"], ["CLS"]],
"today" : [["今天"], ["TODAY"]],
"close" : [["關閉"], ["CLOSE"]]
}
Calendar.prototype.draw = function() {
calendar = this;
var mvAry = [];
mvAry[mvAry.length] = ' <form name="calendarForm" style="margin: 0px;">';
mvAry[mvAry.length] = ' <table width="100%" border="0" cellpadding="0" cellspacing="1">';
mvAry[mvAry.length] = ' <tr>';
mvAry[mvAry.length] = ' <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="prevMonth" type="button" id="prevMonth" value="<" /></th>';
mvAry[mvAry.length] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;"></select></th>';
mvAry[mvAry.length] = ' <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;" name="nextMonth" type="button" id="nextMonth" value=">" /></th>';
mvAry[mvAry.length] = ' </tr>';
mvAry[mvAry.length] = ' </table>';
mvAry[mvAry.length] = ' <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF" border="0" cellpadding="3" cellspacing="1">';
mvAry[mvAry.length] = ' <tr>';
for(var i = 0; i < 7; i++) {
mvAry[mvAry.length] = ' <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>';
}
mvAry[mvAry.length] = ' </tr>';
for(var i = 0; i < 6;i++){
mvAry[mvAry.length] = ' <tr align="center">';
for(var j = 0; j < 7; j++) {
if (j == 0){
mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>';
} else if(j == 6) {
mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>';
} else {
mvAry[mvAry.length] = ' <td style="cursor:default;"></td>';
}
}
mvAry[mvAry.length] = ' </tr>';
}
mvAry[mvAry.length] = ' <tr style="background-color:' + calendar.colors["input_bg"] + ';">';
mvAry[mvAry.length] = ' <th colspan="2"><input name="calendarClear" type="button" id="calendarClear" value="' + Calendar.language["clear"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = ' <th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="' + Calendar.language["today"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = ' <th colspan="2"><input name="calendarClose" type="button" id="calendarClose" value="' + Calendar.language["close"][this.lang] + '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:100%;height:20px;font-size:12px;"/></th>';
mvAry[mvAry.length] = ' </tr>';
mvAry[mvAry.length] = ' </table>';
mvAry[mvAry.length] = ' </form>';
this.panel.innerHTML = mvAry.join("");
this.form = document.forms["calendarForm"];
this.form.prevMonth.onclick = function () {calendar.goPrevMonth(this);}
this.form.nextMonth.onclick = function () {calendar.goNextMonth(this);}
this.form.calendarClear.onclick = function () {calendar.dateControl.value = "";calendar.hide();}
this.form.calendarClose.onclick = function () {calendar.hide();}
this.form.calendarYear.onchange = function () {calendar.update(this);}
this.form.calendarMonth.onchange = function () {calendar.update(this);}
this.form.calendarToday.onclick = function () {
var today = new Date();
calendar.date = today;
calendar.year = today.getFullYear();
calendar.month = today.getMonth();
calendar.changeSelect();
calendar.bindData();
calendar.dateControl.value = today.format(calendar.dateFormatStyle);
calendar.hide();
}
}
//年份下拉框繫結資料
Calendar.prototype.bindYear = function() {
var cy = this.form.calendarYear;
cy.length = 0;
for (var i = this.beginYear; i <= this.endYear; i++){
cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i);
}
}
//月份下拉框繫結資料
Calendar.prototype.bindMonth = function() {
var cm = this.form.calendarMonth;
cm.length = 0;
for (var i = 0; i < 12; i++){
cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i);
}
}
//向前一月
Calendar.prototype.goPrevMonth = function(e){
if (this.year == this.beginYear && this.month == 0){return;}
this.month--;
if (this.month == -1) {
this.year--;
this.month = 11;
}
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}
//向後一月
Calendar.prototype.goNextMonth = function(e){
if (this.year == this.endYear && this.month == 11){return;}
this.month++;
if (this.month == 12) {
this.year++;
this.month = 0;
}
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}
//改變SELECT選中狀態
Calendar.prototype.changeSelect = function() {
var cy = this.form.calendarYear;
var cm = this.form.calendarMonth;
for (var i= 0; i < cy.length; i++){
if (cy.options[i].value == this.date.getFullYear()){
cy[i].selected = true;
break;
}
}
for (var i= 0; i < cm.length; i++){
if (cm.options[i].value == this.date.getMonth()){
cm[i].selected = true;
break;
}
}
}
//更新年、月
Calendar.prototype.update = function (e){
this.year = e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value;
this.month = e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value;
this.date = new Date(this.year, this.month, 1);
this.changeSelect();
this.bindData();
}
//繫結資料到月檢視
Calendar.prototype.bindData = function () {
var calendar = this;
var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());
var tds = this.getElementById("calendarTable").getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
//tds[i].style.color = calendar.colors["td_word_light"];
tds[i].style.backgroundColor = calendar.colors["td_bg_out"];
tds[i].onclick = function () {return;}
tds[i].onmouseover = function () {return;}
tds[i].onmouseout = function () {return;}
if (i > dateArray.length - 1) break;
tds[i].innerHTML = dateArray[i];
if (dateArray[i] != " "){
tds[i].onclick = function () {
if (calendar.dateControl != null){
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
this.innerHTML).format(calendar.dateFormatStyle);
}
calendar.hide();
}
tds[i].onmouseover = function () {
this.style.backgroundColor = calendar.colors["td_bg_over"];
}
tds[i].onmouseout = function () {
this.style.backgroundColor = calendar.colors["td_bg_out"];
}
if (new Date().format(calendar.dateFormatStyle) ==
new Date(calendar.date.getFullYear(),
calendar.date.getMonth(),
dateArray[i]).format(calendar.dateFormatStyle)) {
//tds[i].style.color = calendar.colors["cur_word"];
tds[i].style.backgroundColor = calendar.colors["cur_bg"];
tds[i].onmouseover = function () {
this.style.backgroundColor = calendar.colors["td_bg_over"];
}
tds[i].onmouseout = function () {
this.style.backgroundColor = calendar.colors["cur_bg"];
}
}//end if
}
}
}
//根據年、月得到月檢視資料(陣列形式)
Calendar.prototype.getMonthViewArray = function (y, m) {
var mvArray = [];
var dayOfFirstDay = new Date(y, m, 1).getDay();
var daysOfMonth = new Date(y, m + 1, 0).getDate();
for (var i = 0; i < 42; i++) {
mvArray[i] = " ";
}
for (var i = 0; i < daysOfMonth; i++){
mvArray[i + dayOfFirstDay] = i + 1;
}
return mvArray;
}
//擴充套件 document.getElementById(id) 多瀏覽器相容性 from meizz tree source
Calendar.prototype.getElementById = function(id){
if (typeof(id) != "string" || id == "") return null;
if (document.getElementById) return document.getElementById(id);
if (document.all) return document.all(id);
try {return eval(id);} catch(e){ return null;}
}
//擴充套件 object.getElementsByTagName(tagName)
Calendar.prototype.getElementsByTagName = function(object, tagName){
if (document.getElementsByTagName) return document.getElementsByTagName(tagName);
if (document.all) return document.all.tags(tagName);
}
//取得HTML控制元件絕對位置
Calendar.prototype.getAbsPoint = function (e){
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
//顯示日曆
Calendar.prototype.show = function (dateControl, popControl) {
if (dateControl == null){
throw new Error("arguments[0] is necessary")
}
this.dateControl = dateControl;
if (dateControl.value.length > 0){
this.date = new Date(dateControl.value.toDate());
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.changeSelect();
this.bindData();
}
if (popControl == null){
popControl = dateControl;
}
var xy = this.getAbsPoint(popControl);
this.panel.style.left = xy.x + "px";
this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px";
this.setDisplayStyle("select", "hidden");
this.panel.style.visibility = "visible";
}
//隱藏日曆
Calendar.prototype.hide = function() {
this.setDisplayStyle("select", "visible");
this.panel.style.visibility = "hidden";
}
//設定控制元件顯示或隱藏
Calendar.prototype.setDisplayStyle = function(tagName, style) {
var tags = this.getElementsByTagName(null, tagName)
for(var i = 0; i < tags.length; i++) {
if (tagName.toLowerCase() == "select" &&
(tags[i].name == "calendarYear" ||
tags[i].name == "calendarMonth")){
continue;
}
tags[i].style.visibility = style;
}
}
document.write('<div id="calendarPanel" style="position: absolute;visibility: hidden;z-index: 9999;background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>');
var calendar = new Calendar();
//呼叫calendar.show(dateControl, popControl);
//-->
演示:WebCalendar.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Web Calender Control Powered By KimSoft</title>
</head>
<body>
<script language="JavaScript" type="text/javascript" src="WebCalendar.js"></script>
<script language="JavaScript" type="text/javascript">
//var calendar_cn = new Calendar(2000, 2010, 0);
//var calendar_en = new Calendar(1990, 2050, 1, "dd-MM-yy");
</script>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="date" type="text" id="date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly"/>
</label>
<p> </p>
<p>
<label>
<select name="select">
</select>
</label>
<br>
</p>
</form>
<p><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input name="date" type="text" id="date1" onclick="new Calendar(null, null, 1).show(this);" />
</p>
<p>
<select name="select2">
</select>
<select name="select3">
</select>
<select name="select4">
</select>
</p>
</body>
</html>
相關推薦
一個JavaScript WEB日曆控制元件,支援IE6,FireFox,可支援不同語言版本,目前支援中英文。
轉自 謝謝! 網上的WEB日曆控制元件很多,功能也很強大,可惜大都不支援FireFox,自己閒時寫了一個,有如下特色: 特色: 一、支援IE6,FireFox 二、支援中、英文日曆、可自由擴充套件其它語言 三、遇到Select 下拉框的時候,採取隱藏的方法 四、採用div作為日曆容器,不會被瀏覽器攔截
javaScript實現日曆控制元件
最近學習js,閒來無事就寫了個簡單的日曆控制元件,不知道別人是怎麼實現的,純粹自己想法寫的, 寫的不好 ,但可以起到拋磚引玉的作用。 先來看效果。 呼叫時候的程式碼 就一句,引入我寫的js檔案, 前
手擼一個自定義日曆控制元件
引言 日曆控制元件在android開發中也是比較常見的一個控制元件,並且目前大部分開源的日曆控制元件也已經做得很漂亮,很完善了,功能也相當豐富; 今天這個日曆控制元件就是我在別人的基礎上進行修改了的,首先很感謝這個開源庫(https://github.com/c
分享自己編寫的一個jquery日曆控制元件,可以選擇日期區間
先來個截圖 初版未經全面測試,難免有bug,功能比較單一,簡單說一下功能吧 1、可以選擇單個日期 2、可以選擇日期區間 3、面板顯示月份可以自定義 4、日期格式可以自定義,但是目前只支援幾種(格式見js內部) 5、準備增加確定和取消按鈕的回撥函式 其他功能暫時沒有想到,所以都沒加,目前V1.0版本
【重大更新】企業級純JavaScript電子表格控制元件SpreadJS v12釋出,新增圖表型別|附下載
下載SpreadJS v12 SpreadJS 表格控制元件——V12 新特性 SpreadJS 是一款基於 HTML5 的純 JavaScript 電子表格和網格功能控制元件,以“高速低耗、純前端、零依賴”為產品特色,被開發人員譽為“可嵌入系統的線上Excel”,同時滿足 .NE
JavaScript日曆控制元件開發
概述 本文的目的除了詳細說明開發一款具備基本功能的網頁日曆的方法與細節以外,還附加說明了如何合理的組織日曆特效的程式碼和因此帶來的好處。 按照本文的教程開發出來的效果如下 他具有選擇年月日、選擇今天、清空文字框這些日曆的基本功能,能滿足日常專案中出現的普通日期選擇需求, 算的上是五臟俱全的小麻雀。 本文主
javascript 判斷時間控制元件中,結束時間不能大於開始時間
function checkDate(){ var str_date = document.getElementById("str_date").value; var end_date = document.getElementById("e
雙擊文字變成輸入框,日曆控制元件
<script type="text/javascript"> function toEdit(o,edit) { if(edit){o.innerHTML='<input type="text" value="'+o.innerHTML.replace(/"/
jquery datetimepicker專案上用的日曆控制元件,要準確到時,分,秒,小時按24小時記時
專案上用的日曆控制元件,要準確到時,分,秒,小時按24小時記時 首先要加入css <style type='text/css'> /* css for timepicker */ .ui-timepicker-div .ui-widget-header { ma
asp.net(c#)web伺服器控制元件,多選框checkboxlist控制元件。
<%@ Page Language="c#" %> <script runat="server"> void Page_Load() { string msg = "You have selected the following items:<b
解決【關於javascript呼叫ocx控制元件時提示:物件不支援“setUrl”屬性或方法】
因最近工作需要,要開發一款視訊播放的ocx控制元件。但我是第一次開發ocx控制元件,遇到不少問題,走了不少彎路。現將所遇問題做個記錄,方便後來人檢視。問題描述:ocx控制元件中,新增一個名為“setUrl(BSTR url)”的ocx介面方法,以供瀏覽器js程式碼呼叫傳值給o
ASP.NET Web 伺服器控制元件事件模型
ASP.NET 中有一個重要功能,允許您通過與客戶端應用程式中類似的、基於事件的模型來對網頁進行程式設計。舉一個簡單的例子,例如,可以向 ASP.NET 網頁中新增一個按鈕,然後為該按鈕的 Click 事件編寫事件處理程式。儘管這種情況在僅使用客戶端指令碼(在動態 HTML 中處理按鈕的 oncli
Android UI-自定義日曆控制元件
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
selenium - js日曆控制元件處理
# 13. js處理日曆控制元件''' 在web自動化的工程中,日曆控制大約分為兩種: 1. 可以直接輸入日期 2. 通過日曆控制元件選擇日期 基本思路: 利用js去掉readonly屬性,然後直接輸入時間。'''from selenium import webdriverdr
EasyUI 日曆控制元件之--限制日曆開始和結束時間
首先引入EasyUI所需資源 <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" hr
【ASP.NET】——WEB伺服器控制元件
WEB伺服器控制元件分類: 內部控制元件 列表控制元件 複雜控制元件 驗證控制元件 內部控制元件 ASP.NET引入一組稱為“內部控制元件”的新控制元件,專門用於ASP.NET 內部控制元件的使用方法與HTML控制元件相同,他們對映到HTML元素並通過
一個好看的時間控制元件
Android 一個好看的時間控制元件 1.依賴包 compile 'com.wx.wheelview:wheelview:1.3.3' 2.在佈局中使用 <LinearLayout android:layout_width="60dp
一款好看的日曆控制元件
android 一款好看的日曆控制元件 1.依賴包 compile 'com.prolificinteractive:material-calendarview:1.4.0' 佈局中的使用: <com.prolificinteractive.materialcal
一個立體的按鈕 控制元件模板
<!--操作裝置按鍵模板--> <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}"> <Grid>
一個生成Web圖片的元件—css-doodle
一、什麼是css-doodle? 很多小夥伴也許還不太清楚這是什麼,其實呢,css-doodle是一個Web元件,它是基於Shadow DOM V1和Custom Elements V1來構建的。該元件可以幫助輕鬆的使用Custom Elements、Shado