JS日時選択制御バージョンアップ版(自作)_JavaScriptスキル

インターネット上で見つかったいくつかの日付選択プログラムのいくつかの問題を考慮して、プログラムのほとんどを以前のコードに基づいて書き直し、時間選択関数を追加し、コントロールを隠してしまうラベル select と object を非表示にしました。
最初は、window.createPopup() を使用してカレンダーの選択をポップアップ表示し、任意のタブにまたがることができるようにしたいと考えていました。

しかし、途中で、createPopup ウィンドウを使用してこれを実装するのは、理論的には実現不可能であることがわかりました。
まず、フォーム内のどこもクリックしないとウィンドウが閉じてしまうため、ドロップを使用する場合は、ダウンボックスで年を選択するのは非常に困難です。 もちろん、これは自分で選択を記述することで回避できますが、
次に、幅と高さです。フォームはポップアップ表示されたときにのみ設定でき、明らかに、異なる年月を選択すると、コントロールの高さが変わります。

上記の理由から、通常の処理方法を使用することにしました。

Calendar.js:

コードをコピー コードは次のとおりです:

/**
*このカレンダー選択コントロールは、tiannet が以前の経験に基づいて完成させたものです。コードのほとんどは meizz のカレンダー コントロールから来ています。
*tiannet には、時間選択機能、選択、オブジェクト ラベルの非表示機能、その他の小さな機能が追加されました。
*使用法:
* (1) 日付のみを選択
* (2) 日付と時
* (3)日付、時、分を選択
*パラメータの設定方法
* (1) 日付区切り文字を設定します setDateSplit(strSplit); (2) 設定します日付と時刻の間の区切り文字 setDateTimeSplit(strSplit); デフォルトは " "
* (3) 時刻区切り文字を設定します setTimeSplit(strSplit); デフォルトは ":"
* (4) Set ( 1)、(2)、および (3) setSplit(strDateSplit, strDateTimeSplit, strTimeSplit);
* (5) 開始年と終了年の設定 setyearPeriod(intDateBeg, intDateEnd)
* 説明:
*返されるデフォルトの日付と時刻の形式は次のとおりです: 2005-02-02 08:08
*/
//------ スタイル定義-- - ------------------------//
// 機能ボタンも同じスタイル
var s_tiannet_turn_base = "height:16px; font-size: 9pt;color:white;border:0 plain #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; 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;" #CCCCCC;border-top:1 実線 #CCCCCC;border -right:1 実線 #999999;border-bottom:1 実線 #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 = 2010; // 選択可能な終了年
var tiannetDateNow; = new Date(); //年を定義する変数の初期値
var tiannetDateNow.getMonth() 1;月を定義する変数
var tiannetDay = tiannetDateNow.getDate();
var tiannetDateNow.getHours();
var tiannetDateNow.getMinutes(); 🎜>var tiannetArrDay=new Array(42); //日付を書き込むための配列を定義します
var tiannetDateSplit = "-"; //日付の区切り文字
var tiannetDateTimeSplit = " "; and time
var tiannetTimeSplit = ":"; //時刻の区切り記号
var tiannetOutObject //日付と時刻を受け取るオブジェクト
var arrTiannetHide = new Array();// be hidden
var m_bolShowHour = false;//時間を表示するかどうか
var m_bolShowMinute = false;//分を表示するかどうか
var m_aMonHead = new Array(12); //最大数を定義します。太陽暦の各月の日
m_aMonHead[1] = 28; m_aMonHead[3] = 31; = 30; m_aMonHead[6] = 31; m_aMonHead[9] = 31; >// ---------------------------- ユーザーは関数を呼び出すことができます ----------- --------------//
//ユーザー呼び出し関数 - 日付のみを選択
function setDay(obj){
tiannetOutObject = obj;タグに値がある場合は、日付を現在の値に初期化します。
var strValue = tiannetTrim(tiannetOutObject.value)
if( strValue != "" ){
tiannetInitDate(strValue); 🎜>}
tiannetPopCalendar();
}
//ユーザー呼び出し関数 - 日付と時間を選択
function setDayH(obj ){
tiannetOutObject = obj;
m_bolShowHour = true;
//タグに値がある場合、日付と時間を現在の値に初期化します。
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var 時間 = strValue.substring(11,13);
if( 時間 }
tiannetPopCalendar()
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
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 if( tiannetMinute }
tiannetPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('

');
document.write('

');
document.write(''onclick="spanYearCEvent();"> 年');
document.write('' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=tiannetYearSt;i document.writeln('' + i + '年');
}
document.write('');
document.write(''onclick="spanMonthCEvent();">  月');
document.write(''onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=1;i document.writeln('' + i + '月');
}
document.write('');
//document.write('

');
//document.write('

');
document.write(''onclick="spanHourCEvent();"> 时');
document.write('' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
'this.style.display=\'none\';">');
for(var i=0;i document.writeln('' + i + '时');
}
document.write('');
document.write(''onclick="spanMinuteCEvent();">  分');
document.write('' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=0;i document.writeln('' + i + '分');
}
document.write('');
document.write('

');
//输出一条横线
document.write('

');
document.write('

');
document.write('');
document.write(' ');
document.write('');
document.write('');
document.write('

');
//输出一条横线
document.write('

');
document.write('');
document.write(' ');
for(var i =0;i //输出星期
document.write('');
}
document.write(' ');
document.write('

' + weekName[i] + '

');
//输出天的选择
document.write('');
var n = 0;
for (var i=0;idocument.write (' ');
for (var j=0;jdocument.write('');
n ++;
}
document.write (' ');
}
document.write (' ');
document.write('');
document.write('');
document.write('');
document.write (' ');
document.write('

'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" ' +' style="' + s_tiannet_day + '">
+' style="' + s_tiannet_day + '">	+' style="' + s_tiannet_day + '">	清空'+ ' 关闭' + ' 确定 ' + '

');
document.write('

');
//----------------- ページ表示部分 ------------------ - -------//
//--------------------- 日時スパンタグ応答イベントを表示-------- ------------------//
//年のスパンラベルをクリックします。
function spanyearCEvent(){
hideElementsById(new Array("selTian Year" ,"tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false); 🎜>hideElementsById(new Array("tiannetyearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//月のスパンラベルをクリックします response
function scanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetyearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianY","selTianHour","selTianMinute"),true);
}
// クリック時間範囲タグ応答
function spavent(){
hideElementsById(new Array("tiannet YearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianMonth","selTianMinute"),true); >}
// 分のスパン ラベルをクリックします。
function scanMinuteCEvent(){
hideElementsById(new Array("tiannet YearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById ( new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinute","selTianMonth") ,"selTianHour"),true);
}
//タグ ID に基づいてタグを表示または非表示にする
function HideElementsById(arrId,bolHide){
var strDisplay = ""
; (bolHide) strDisplay = "none";
for(var i = 0;i var obj = document.getElementById(arrId[i]); style.display = strDisplay;
}
}
//------ end 日付と時刻を表示するspanタグは、イベント---- -----------------------//
//特定の年がうるう年かどうかを判断する
function isPin Year( year){
var bolRet = false;
if (0==year%4&&((year 0!=0)||(year@0==0))) {
bolRet = true;
}
return bolRet;
}
// 月の日数を取得します。閏年は 29 日です
function getMonthCount(year,month){
var c= m_aMonHead[month-1];
if ((month==2)&&isPin Year(year)) c ;
return c;
}
// 現在の日をリセットします。主に、年または月を切り替えるときに、現在の日がその月の最大日より大きくならないようにするためです。
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannet Year,tiannetMonth) ) {
// 現在の日が月の最大日より大きい場合、その月の最大日が取得されます。
}
}
//1 桁の前にゼロを追加します。
function addZero( value){
if(value value = "0" value;
return value; 🎜>}
//スペースを削除します
function tiannetTrim (str) {
return str.replace(/(^s*)|(s*$)/g,"");
//select のオプションを作成します。
function createOption (objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value; option.text = text;
objSelect.options.add(option);
}
//年を進める
function tiannetPrev Year() {
if(tiannetyear > 999 && tiannetyear < ;10000){tiannetyear--;}
else{alert("年が範囲 (1000-9999) から外れています!");}
tiannetSetDay(tiannet Year,tiannetMonth)
//If年が最小許容年より小さい場合は、対応するオプションを作成します。
if( tiannet Year tiannet YearSt = tiannetyear;
createOption(document.all.selTian Year,tiannet Year,tiannet Year "year") ;
}
checkSelect(document.all.selTianEye,tiannet Year);
tiannetWriteHead();
}
// 年を戻す
function tiannetNext Year() {
if (tiannet年 > 999 && tiannet年 else {alert("年が範囲外です (1000-9999)! ");return;}
tiannetSetDay(tiannetyear,tiannetMonth);
//年が最大許容年を超えている場合は、対応するオプションを作成します
if( tiannetyear > tiannet YearEnd ) {
tiannetyearEnd = tiannetyear;
createOption(document.all.selTian Year,tiannet Year "年")
checkSelect(document.all.selTiannet Year)
}
//今日を選択
function tiannetToday() {
tiannet Year = tiannetDateNow.getFull Year();
tiannetDay = tiannetDateNow.getDate(); 🎜>tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
//月を進める
function tiannetPrevMonth() {
if(tiannetMonth>1){tiannetMonth--}else{tiannetyear--;tiannetMonth=12;}
tiannetSetDay(tiannet Year,tiannetMonth)
checkSelect(document.all.selTianMonth,tiannetMonth); >tiannetWriteHead();
}
//月を反転します
function tiannetNextMonth() {
if(tiannetMonth==12){tiannet Year ;tiannetMonth=1}else{tiannetMonth }
tiannetSetDay(tiannetyear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead()
// スパンに年、月、時、分を書き込みますタグ データ待ち
function tiannetWriteHead(){
document.all.tiannet YearHead.innerText = tiannetyear "年";
document.all.tiannetMonthHead.innerText = tiannetMonth "月"; ) document .all.tiannetHourHead.innerText = " " tiannetHour "時間";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute "分";// に値を割り当てますテキスト ボックスですが、このコントロールは非表示にしないでください
}
//表示される日を設定します
function tiannetSetDay(yy,mm) {
setRealDayCount();//実際の月の日を設定します
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //日付表示スタイルを処理します
for (var i = 0; i var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //曜日特定の月の最初の日
for (var i = firstday; day1 tiannetArrDay[i]=day1;day1 ;
//その日の最初の行または最後の行を表示するために使用される場合 各セルの値が空の場合、行全体が非表示になります。
//if(tiannetArrDay[35] == ""){
// document.all.trTiannetDay5.style.display = "none";
//} else {
// ドキュメント.all.trTiannetDay5.style.display = "";
//}
for (var i = 0; i var da = eval("document.all.tdTiannetDay " i) //新しい月の日付と週の並びを書く
if (tiannetArrDay[i]!="") {
//週末かどうかを判断し、週末であれば変更する赤色のフォントに
if(i % 7 == 0 || (i 1) % 7 == 0){
strDateFont1 = ""
strDateFont2 = ""
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 tiannetArrDay[i] strDateFont2;
//If itは現在選択されている日です。次に色を変更します。
if(tiannetArrDay[i] == tiannetDay ) {
da.style.backgroundColor = "#CCCCCC"; else {
da.style .backgroundColor = "#EFEFEF" ;
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.backgroundColor="";da .style.cursor="default "
}
}//end for
tiannetSetValue(false);//テキスト ボックスに値を割り当てますが、このコントロールは非表示にしないでください
}// end function tiannetSetDay
//オプション値の選択オプションに応じて
function checkSelect(objSelect,selectValue) {
var count = parseInt(objSelect.length)
if( selectValue selectValue = selectValue.substring(1,2);
}
for(var i = 0;i if (objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
}
}//
}
//年、月、時、分などのドロップダウン ボックス
function selectObject(){
//年が許容される最小年より小さい場合は、対応するオプションを作成します。
if( tiannetyear for( var i = tiannet年;i createOption(document.all.selTian年,i,i "年");
tiannet年St = tiannet年;
}
//年が最大許容年を超えている場合は、対応するオプションを作成します
if( tiannetyear > tiannetyearEnd ) {
for( var i = tiannet YearEnd 1;i createOption(document.all.selTian Year,i,i "年");
}
tiannetyearEnd = tiannet Year;
checkSelect(document.all.selTianMonth,tiannetMonth);
if(m_bolShowHour) checkSelect(document.all.selTianHour,tiannetHour);
if(m_bolShowMinute) tiannetMinute);
}
//日付と時刻を受け入れるコントロールに値を割り当てます
//パラメータ bolHideControl - コントロールを非表示にするかどうか
関数 tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
戻り値;
var mm =
var日 = tiannetDay;
if( mm 値 = tiannetDateSplit mm tiannetDateSplit 日
if ( m_bolShowHour ){
var 時間 = tiannetHour.toString; ().length == 1 ) 時間 = "0" 時間;
値 = tiannetDateTimeSplit 時間;
if( m_bolShowMinute ){
var minutes = tiannetMinute; ; 10 && 分.toString().length == 1 ) 分 = "0" 分
値 = tiannetTimeSplit 分
//document.all; .divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl() ;
}
}
//時刻を表示するかどうか
関数 showTime( ){
if( !m_bolShowHour && m_bolShowMinute){
alert("分を選択したい場合は、時間を選択してください。");
return;
}
hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//時間を表示
hideElementsById(new Array("tiannetHourHead"),false);
}
if( m_bolShowMinute){
//分を表示
hideElementsById(new Array("tiannetMinuteHead) "),false);
}
}
// ユーザーが選択できるようにカレンダー選択コントロールをポップアップします
function tiannetPopCalendar(){
// ドロップダウン ボックスを非表示にします対応するヘッドを表示します
hideElementsById(new Array("selTian Year","selTianMonth","selTianHour","selTianMinute"),true); tiannetHourHead"," tiannetMinuteHead"),false);
tiannetSetDay(tiannet Year,tiannetMonth);
tiannetWriteHead();
showTime();
var gods = document.all.divTiannetDate.style;
var iX , iY;
var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth;
if (window.event) .x h > document.body.offsetWidth - 10 )
iX = window.event.x - h - 5 ;
else
iX = window.event.x 5; ;0)
iX=0;
//トップを計算します
iY = window.event.y;
if (window.event.y w > document.body.offsetHeight - 10 )
iY = document.body.scrollTop document.body.offsetHeight - w - 5 ;
else
iY = document.body.scrollTop window.event.y 5;
if (iY iY= 0;
dads.top = iY;
selectObject();コントロール (強制的に非表示にしたタグを表示中)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject();
arrTiannetHide = new Array(); ;// 非表示のラベル オブジェクトをクリアします
}
// カレンダー コントロールを表示します (隠れたラベルを非表示にします)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("SELECT");
}
//タグ名に基づいてタグを非表示にします。コントロールの選択をカバーする場合、オブジェクト
function tiannetHideObject(strTagName) {
x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop; = document.all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;
for (var i = 0; i {
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue
// の相対座標を取得します。要素を BODY タグに追加します。 = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY"){
objLeft = objParent.offsetTop;
objParent = objParent.offsetParent; ;
}
//alert("コントロール左端:" x "左端を選択" (objLeft objWidth) "コントロール下端:" (y h) "高さを選択:" objTop); true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
/ /ラベル自体が非表示の場合は、非表示にする必要はありません。コントロール内のドロップダウン ボックスの場合は、非表示にする必要はありません。
bolHide = false;
}
if( ( (objLeft objWidth) > ){
//arrTiannetHide.push(obj);// 非表示のラベル オブジェクトを記録します
arrTiannetHide[arrTiannetHide .length] = obj;
obj.style.visibility = "hidden";
}
}
}
// 隠しタグを表示
function tiannetShowObject(){
for(var i = 0;i //alert(arrTiannetHide[i]);
arrTiannetHide[i].style.visibility = ""
}
}
//初期化日。
関数 tiannetInitDate(strDate){
var arr = strDate.split(tiannetDateSplit);
tiannetyear = arr[0];
tiannetDay = arr[2] ];
}
//Clear
function tiannetClear(){
tiannetOutObject.value = "";
tiannetHideControl();コントロール
関数 document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//ESC キーを押してコントロールを閉じます
関数 document.onkeypress(){
if(event.keyCode == 27 ){
tiannetHideControl();
}
}


Calendar.html:




コードをコピー


コードは次のとおりです:

(1)只选择日期

(2)選択日期和時間

(3)選択日期および時間および分钟