首頁 web前端 js教程 Js日期選擇自動填入輸入框(介面漂亮相容火狐)_javascript技巧

Js日期選擇自動填入輸入框(介面漂亮相容火狐)_javascript技巧

May 16, 2016 pm 05:27 PM
自動填充 輸入框

複製程式碼 程式碼如下:



很漂亮、相容火狐的Jsdate選擇,自動填入輸入框


body{font-size:12px;font-family:Verdana,Arial,"宋體" ;}
a:link {color:#464646;text-decoration:none;}
a:訪問過{顏色:#464646;文字裝飾:無;}
a:hover{顏色:# ed145b;文字裝飾:底線;}
a:active{顏色:#ed145b;文字裝飾:底線;}
td{font-size:12px}
/*/*/
/* DateCSS 樣式*/
.header {字體:12px Arial、Tahoma !重要;字體粗細:粗體!重要;字體:11px Arial,Tahoma;字體粗細:粗體;顏色:#154BA0;背景:#C2DEED;高度:25px;左內邊距:10px;
}
.header td {padding-left : 10px;}
.header a {color: #154BA0;}
.header input {background:none;vertical-align: middle;height: 16px;}
.category {字體:12px Arial, Tahoma!重要;字體:11px Arial,Tahoma;顏色:#92A05A;高度:20px;背景顏色:#FFFFD9;}
.category td {邊框-bottom: 1pxsolid #DEDEB8;}
.expire, .expire a :link, .expire a:visited {color: #999999;}
.default, .default a:link, .default a:visited {color: #000000;}
.checked, .checked a:link , .checked a:visited {color: #FF0000;}
.today, .today a:link, .today a:visited {color : #00BB00;}
#calendar_year {顯示: 無;行高: 130%;背景: #FFFFFF;位置: 絕對;z-index: 10;}
#calendar_year .col {float: left; }背景:#FFFFFF;左邊距:1px;邊框:1px實心#86B9D6;填充:4px;}
#calendar_month {顯示:無;背景:#FFFFFF;行高:130%;邊框:1px實心# 86B9D6;填滿:4px;位置:絕對;z-index:11;}
.tableborder {背景:白色;邊框:1px 實心#86B9D6;}
#year,#month{padding-right:10px; }
樣式>

//下面的程式碼段如果你的頁面裡有,可以去掉
var ie =navigator.appName=="Microsoft Internet Explorer"?true:false;
function $(objID){
return document.getElementById(objID);
}
腳本>
頭>



var controlid = null;
var currdate = null;
var startdate = null;
var enddate = null;
var yy = null;
var mm = null
var; hh = null;
var ii = null;
var currday = null;
var addtime = false;
var= new Date();
var lastcheckedyear = false var lastcheckedyear = false;
今天; var lastcheckedmonth = false;
函數_cancelBubble(事件) {
e = 事件?事件:視窗事件;
if(ie) {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
function getposition (obj) {
var r = new Array();
r['x'] = obj.offsetLeft;
r['y'] = obj.offsetTop;
while(obj = obj.offsetParent) {
r['x'] = obj.offsetLeft;
r['y'] = obj.offsetTop;
}
回傳r;
}
函數loadcalendar() {
s = '';
s = '
';
if(即)
{
s = '';
}
s = '
> ; tr>';
s = '';
for(var i = 0; i s = '';
for(var j = 1; j s = " ”;
s = ""; }
s += '';
s += '
a> - >>> ;
0
23 ? 23 : zerofill(this.value);controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig, this.value+"$1")\'> 点 59 ? 59 : zerofill(this.value);controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig, "$1"+this.value)\'> 分
';///
s += '
';
for(var k = 1930; k <= 2019; k++) {
s += k != 1930 && k % 10 == 0 ? '
' : '';
s += '' + k + '
';
}
s += '
';
s += '
';
for(var k = 1; k <= 12; k++) {
s += '' + k + ( k < 10 ? ' ' : '') + ' 月
';
}
s += '
';
var nElement = document.createElement("div");
nElement.innerHTML=s;
document.getElementsByTagName("body")[0].appendChild(nElement);
//document.write(s);
document.onclick = function(event) {
$('calendar').style.display = 'none';
$('calendar_year').style.display = 'none';
$('calendar_month').style.display = 'none';
}
$('日曆').onclick = function(event) {
_cancelBubble(event);
$('calendar_year').style.display = 'none';
$('calendar_month').style.display = 'none';
}
}
function parsedate(s) {
/(d )-(d )-(d )s*(d*):?(d*)/.exec(s) ;
var m1 = (RegExp.$1 && RegExp.$1 > 1899 && RegExp.$1 var m2 = (RegExp.$2 && (RegExp.$2 > 0 && RegExp.$2 var m3 = (RegExp.$3 && (RegExp.$3 > 0 && RegExp.$3 var m4 = (RegExp.$4 && (RegExp.$4 > -1 && RegExp.$4 var m5 = (RegExp.$5 && (RegExp.$5 > -1 && RegExp.$5 /(d )-(d )-(d )s*(d*):?(d*)/.exec("0000-00-00 00:00");
回傳新日期(m1, m2 - 1, m3, m4, m5);
}
function settime(d) {
$('calendar').style.display = 'none';
controlid.value = yy "-" Zerofill(mm 1) "-" Zerofill(d) (addtime ? ' ' Zerofill($('小時').value) ':' Zerofill($('分鐘') 。日期1):假;
結束日期= 結束日期1 ?解析日期(結束日期1):假;
currday = controlid.value ? parsedate(controlid.value) :今天;
hh = currday .getHours();
ii = currday.getMinutes();
var p = getposition(controlid);
$('日曆').style.display = '區塊';
$( '日曆').style.left = p['x'] 'px';
$('日曆').style.top = (p['y'] 20) ' px';
_cancelBubble (事件);
refreshcalendar(currday.getFullYear(), currday.getMonth());
if(lastcheckedyear != false) {
$('calendar_year_' lastcheckedyear) .className = '預設;
$('calendar_year_' Today.getFullYear()).className = '今天';
}
if(lastcheckedmonth != false) {
$('calendar_month_ ' lastcheckedmonth). default'
$('calendar_month_' (today.getMonth() 1)).className = '今天';
}
$('calendar_year_' currday.getFullYear()).className = 'checked';
$('calendar_month_' (currday.getMonth() 1)).className = 'checked';
$('小時分鐘').style.display = addtime ? '' : '沒有任何';
lastcheckedyear = currday.getFullYear();
lastcheckedmonth = currday.getMonth() 1;
}
函數刷新日曆(y, m) {
var x = new Date(y, m, 1);
var mv = x.getDay();
var d = x.getDate();
var dd = null;
yy = x.getFullYear();
mm = x.getMonth();
$("年份").innerHTML = yy;
$("月").innerHTML = mm 1 > 9?
for(var i = 1; i dd = $("d" i);
dd.innerHTML = " ";
dd.className = "";
}
while(x.getMonth() == mm) {
dd = $("d" (d mv));
dd.innerHTML = '' d'';
if(x.getTime() enddate.getTime()) || (startdate && x.getTime() dd.className = '過渡';
} else {
dd.className = '預設';
}
if(x.getFullYear() == Today.getFullYear() && x.getMonth() == Today.getMonth() && x.getDate() == Today.getDate()) {
dd.className = '今天';
dd.firstChild.title = '今天';
}
if(x.getFullYear() == currday.getFullYear() && x.getMonth() == currday.getMonth() && x.getDate() == currday.getDate()) {
dd.className = '已檢查';
}
x.setDate( d);
}
while(d mv dd = $("d" (d mv));
dd.innerHTML = " ";
d;
}
if(addtime) {
$('小時').value = Zerofill(hh);
$('分鐘').value = Zerofill(ii);
}
}
function showdiv(id) {
var p = getposition($(id));
$('calendar_' id).style.left = p['x'] 'px';
$('calendar_' id).style.top = (p['y'] 16) 'px';
$('calendar_' id).style.display = 'block';
}
函數zerofill(s) {
var s = parseFloat(s.toString().replace(/(^[s0] )|(s $)/g, ''));
s = isNaN(s) ? 0:s;
return (s }
載入行事曆();
腳本>
技巧練習:
請選擇日期:;
身體>

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何處理PHP表單中的自動填充和自動完成 如何處理PHP表單中的自動填充和自動完成 Aug 11, 2023 pm 06:39 PM

如何處理PHP表單中的自動填充和自動完成隨著互聯網的發展,人們越來越依賴自動填充和自動完成功能來簡化他們在網站上的操作。而在PHP表單中實現這些功能並不複雜,本文將簡要介紹如何使用PHP來處理表單的自動填充和自動完成。在開始之前,我們需要先明確什麼是自動填入和自動完成。自動填入是指根據使用者先前的輸入或歷史記錄,自動為使用者填寫表單中的欄位。例如,在使用者輸入郵件

使用Java實現表單資料的自動填入與輸入建議 使用Java實現表單資料的自動填入與輸入建議 Aug 07, 2023 pm 07:05 PM

使用Java實現表單資料的自動填入與輸入建議近年來,隨著網路的發展,表單資料填寫已成為我們日常生活的一部分。然而,填寫大量的表單資料往往會對使用者造成一定的困擾,尤其是在輸入重複的資料時。為了提高使用者的填寫效率和體驗,我們可以利用Java語言來實現表單資料的自動填入與輸入建議。本文將介紹如何使用Java來實現此功能,並提供程式碼範例供參考。首先,我們需要

使用jQuery實作輸入框僅允許輸入數字和小數點 使用jQuery實作輸入框僅允許輸入數字和小數點 Feb 26, 2024 am 11:21 AM

實作jQuery輸入框限制數字和小數點輸入在Web開發中,我們常常會遇到需求需要控制使用者在輸入框中輸入的內容,例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。一、HTML結構首先,我們需要在HTML中建立一個輸入框,程式碼如下:

Vue開發中輸入框長度限制的最佳化方法是什麼? Vue開發中輸入框長度限制的最佳化方法是什麼? Jun 30, 2023 am 08:44 AM

如何最佳化Vue開發中的輸入框輸入長度限制問題引言:在Vue開發過程中,輸入框長度限制是一個常見的需求。限制使用者在輸入框中輸入的字元數有助於保持資料的準確性、優化使用者體驗以及提高系統的效能。本文將介紹如何最佳化Vue開發中的輸入框輸入長度限制問題,以提供更好的使用者體驗和開發效率。一、使用v-model指令綁定輸入框值在Vue開發中,我們通常使用v-model指

如何使用 Vue 實現標籤的輸入框? 如何使用 Vue 實現標籤的輸入框? Jun 25, 2023 am 11:54 AM

隨著Web應用的發展,標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據,同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue是一款非常強大的JavaScript框架,它可以幫助我們快速實現帶有標籤的輸入框。本文將介紹如何使用Vue實作標籤的輸入框。第一步:建立Vue實例首先,我們需要在頁面上建立Vue實例,程式碼如下:&l

手把手教你用CSS實現簡單大氣的輸入框 手把手教你用CSS實現簡單大氣的輸入框 Jan 13, 2023 pm 03:55 PM

這篇文章為大家帶來了關於CSS的相關知識,其中主要介紹了怎麼用CSS實現一個簡單又高大上的輸入框,手把手教你哦~下面一起來看一下吧,希望對需要的朋友有所幫助。

實作HTML頁面跳到PHP頁面時姓名輸入框的必填要求 實作HTML頁面跳到PHP頁面時姓名輸入框的必填要求 Mar 10, 2024 am 10:21 AM

在HTML頁面跳到PHP頁面時,如果需要在姓名輸入框中加入必填要求,可以透過HTML的表單元素和JavaScript實作。以下將詳細介紹如何實現這項功能,並附上具體的程式碼範例。首先,我們建立一個HTML頁面,包含一個表單和一個姓名輸入框。在姓名輸入框中設定一個「必填」標記,可以透過JavaScript來實現對該輸入框的必填驗證。當用戶點擊提交按鈕時,如果姓

PHP中的表單自動填入技巧 PHP中的表單自動填入技巧 May 24, 2023 am 09:31 AM

隨著網路的不斷發展,表單已經成為了我們日常網站使用的功能之一。而讓使用者填寫表單無疑是一項煩瑣的任務,因此有必要使用一些技巧來簡化這個過程。本文將介紹在PHP中實現表單自動填入的技巧。一、使用預設值當設定表單的預設值時,可以在表單標籤中使用"value"屬性來指定。以下是範例:&lt;inputtype="text"name=&q

See all articles