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

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

WBOY
發布: 2016-05-16 17:27:06
原創
1199 人瀏覽過
複製程式碼 程式碼如下:



很漂亮、相容火狐的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 }
載入行事曆();
腳本>
技巧練習:
請選擇日期:;
身體>

相關標籤:
來源:php.cn
上一篇:jQuery在html有效在jsp無效的原因及解決方法_jquery 下一篇:仿新浪微博登陸信箱提示效果的js程式碼_javascript技巧
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板