求一个js日期时间控件，我有一个例子，但功能不能实现

JavaScript020

求一个js日期时间控件，我有一个例子，但功能不能实现,第1张

<script language="javascript">

//下面的代码段如果你页面里有，可以去掉

var ie =navigator.appName=="Microsoft Internet Explorer"?true:false

function $(objID){

return document.getElementById(objID)

}

</script>

</head>

<body>

<script type="text/javascript">

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 today = new Date()

var lastcheckedyear = false

var lastcheckedmonth = false

function _cancelBubble(event) {

e = event ? event : window.event

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

}

return r

}

function loadcalendar() {

s = ''

s += '<div id="calendar" style="display:noneposition:absolutez-index:9" onclick="_cancelBubble(event)">'

if (ie)

{

s += '<iframe width="200" height="160" src="about:blank" style="position: absolutez-index:-1"></iframe>'

}

s += '<div style="width: 200px"><table class="tableborder" cellspacing="0" cellpadding="0" width="100%" style="text-align: center">'

///

s += '<tr align="center" class="header"><td class="header"><A href="#" onclick="refreshcalendar(yy-1, mm)return false" title="上一年"><<</A>    <a href="#" onclick="refreshcalendar(yy, mm-1)return false" title="上一月"><</a></td><td colspan="5" style="text-align: center" class="header"><a href="#" onclick="showdiv(\'year\')_cancelBubble(event)return false" title="点击选择年份" id="year"></a><a id="month" title="点击选择月份" href="#" onclick="showdiv(\'month\')_cancelBubble(event)return false"></a></td><td class="header"><A href="#" onclick="refreshcalendar(yy, mm+1)return false" title="下一月">></A>    <A href="#" onclick="refreshcalendar(yy+1, mm)return false" title="下一年">>></A></td></tr>'

s += '<tr class="category"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'

for(var i = 0i <6i++) {

s += '<tr class="altbg2">'

for(var j = 1j <= 7j++)

s += "<td id=d" + (i * 7 + j) + " height=\"19\">0</td>"

s += "</tr>"

}

s += '<tr id="hourminute"><td colspan="7" align="center"><input type="text" size="1" value="" id="hour" onKeyUp=\'this.value=this.value >23 ? 23 : zerofill(this.value)controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig, this.value+"$1")\'>点 <input type="text" size="1" value="" id="minute" onKeyUp=\'this.value=this.value >59 ? 59 : zerofill(this.value)controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig, "$1"+this.value)\'>分</td></tr>'

s += '</table></div></div>'///

s += '<div id="calendar_year" onclick="_cancelBubble(event)"><div class="col">'

for(var k = 1930k <= 2069k++) {

s += k != 1930 &&k % 10 == 0 ? '</div><div class="col">' : ''

s += '<a href="#" onclick="refreshcalendar(' + k + ', mm)$(\'calendar_year\').style.display=\'none\'return false"><span' + (today.getFullYear() == k ? ' class="today"' : '') + ' id="calendar_year_' + k + '">' + k + '</span></a><br />'

}

s += '</div></div>'

s += '<div id="calendar_month" onclick="_cancelBubble(event)">'

for(var k = 1k <= 12k++) {

s += '<a href="#" onclick="refreshcalendar(yy, ' + (k - 1) + ')$(\'calendar_month\').style.display=\'none\'return false"><span' + (today.getMonth()+1 == k ? ' class="today"' : '') + ' id="calendar_month_' + k + '">' + k + ( k <10 ? ' ' : '') + ' 月</span></a><br />'

}

s += '</div>'

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'

}

$('calendar').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 <2101) ? parseFloat(RegExp.$1) : today.getFullYear()

var m2 = (RegExp.$2 &&(RegExp.$2 >0 &&RegExp.$2 <13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1

var m3 = (RegExp.$3 &&(RegExp.$3 >0 &&RegExp.$3 <32)) ? parseFloat(RegExp.$3) : today.getDate()

var m4 = (RegExp.$4 &&(RegExp.$4 >-1 &&RegExp.$4 <24)) ? parseFloat(RegExp.$4) : 0

var m5 = (RegExp.$5 &&(RegExp.$5 >-1 &&RegExp.$5 <60)) ? parseFloat(RegExp.$5) : 0

/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec("0000-00-00 00\:00")

return new Date(m1, m2 - 1, m3, m4, m5)

}

function settime(d) {

$('calendar').style.display = 'none'

controlid.value = yy + "-" + zerofill(mm + 1) + "-" + zerofill(d) + (addtime ? ' ' + zerofill($('hour').value) + ':' + zerofill($('minute').value) : '')

}

function showcalendar(event, controlid1, addtime1, startdate1, enddate1) {

controlid = controlid1

addtime = addtime1

startdate = startdate1 ? parsedate(startdate1) : false

enddate = enddate1 ? parsedate(enddate1) : false

currday = controlid.value ? parsedate(controlid.value) : today

hh = currday.getHours()

ii = currday.getMinutes()

var p = getposition(controlid)

$('calendar').style.display = 'block'

$('calendar').style.left = p['x']+'px'

$('calendar').style.top = (p['y'] + 20)+'px'

_cancelBubble(event)

refreshcalendar(currday.getFullYear(), currday.getMonth())

if(lastcheckedyear != false) {

$('calendar_year_' + lastcheckedyear).className = 'default'

$('calendar_year_' + today.getFullYear()).className = 'today'

}

if(lastcheckedmonth != false) {

$('calendar_month_' + lastcheckedmonth).className = 'default'

$('calendar_month_' + (today.getMonth() + 1)).className = 'today'

}

$('calendar_year_' + currday.getFullYear()).className = 'checked'

$('calendar_month_' + (currday.getMonth() + 1)).className = 'checked'

$('hourminute').style.display = addtime ? '' : 'none'

lastcheckedyear = currday.getFullYear()

lastcheckedmonth = currday.getMonth() + 1

}

function refreshcalendar(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()

$("year").innerHTML = yy

$("month").innerHTML = mm + 1 >9 ? (mm + 1) : '0' + (mm + 1)

for(var i = 1i <= mvi++) {

dd = $("d" + i)

dd.innerHTML = " "

dd.className = ""

}

while(x.getMonth() == mm) {

dd = $("d" + (d + mv))

dd.innerHTML = '<a href="###" onclick="settime(' + d + ')return false">' + d + '</a>'

if(x.getTime() <today.getTime() || (enddate &&x.getTime() >enddate.getTime()) || (startdate &&x.getTime() <startdate.getTime())) {

dd.className = 'expire'

} else {

dd.className = 'default'

}

if(x.getFullYear() == today.getFullYear() &&x.getMonth() == today.getMonth() &&x.getDate() == today.getDate()) {

dd.className = 'today'

dd.firstChild.title = '今天'

}

if(x.getFullYear() == currday.getFullYear() &&x.getMonth() == currday.getMonth() &&x.getDate() == currday.getDate()) {

dd.className = 'checked'

}

x.setDate(++d)

}

while(d + mv <= 42) {

dd = $("d" + (d + mv))

dd.innerHTML = " "

d++

}

if(addtime) {

$('hour').value = zerofill(hh)

$('minute').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'

}

function zerofill(s) {

var s = parseFloat(s.toString().replace(/(^[\s0]+)|(\s+$)/g, ''))

s = isNaN(s) ? 0 : s

return (s <10 ? '0' : '') + s.toString()

}

loadcalendar()

</script>

</head>

<style>

table tr .td_bg { text-align:leftpadding-left:10px}

#att_info tr td { padding:3pxpadding-left:10px}

.header {font: 12px Arial, Tahoma !importantfont-weight: bold !importantfont: 11px Arial, Tahomafont-weight: boldcolor: #154BA0background:#C2DEEDheight: 25pxpadding-left: 10px

}

.header td {padding-left: 10px}

.header a {color: #154BA0}

.header input {background:nonevertical-align: middleheight: 16px}

.category {font: 12px Arial, Tahoma !importantfont: 11px Arial, Tahomacolor: #92A05Aheight:20pxbackground-color: #FFFFD9}

.category td {border-bottom: 1px solid #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 {display: noneline-height: 130%background: #FFFFFFposition: absolutez-index: 10}

#calendar_year .col {float: leftbackground: #FFFFFFmargin-left: 1pxborder: 1px solid #86B9D6padding: 4px}

#calendar_month {display: nonebackground: #FFFFFFline-height: 130%border: 1px solid #86B9D6padding: 4pxposition: absolutez-index: 11}

.tableborder {background: whiteborder: 1px solid #86B9D6}

#year,#month{padding-right:10px}

</style>

<tr>

<td class="td_bg" width="10%">生日：</td>

<td class="td_bg" height="26" colspan="3"><input type="text" name="shengri" value="" size="14" onClick="showcalendar(event,this)" onFocus="showcalendar(event,this)"/></td>

</tr>

用Jquery 就不用头疼了 UI里就有 调用也很简单

<link href="css/back/jquery-ui-1.7.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>

时间：<input type="text" class="dp_date" name="publishTime" id="datepicker"/></td>

<script type="text/javascript">

$(document).ready(function(){

$(function() {

$("#datepicker").datepicker({

dateFormat:'yy-mm-dd',

changeMonth : true,

changeYear : true

})

})

})

</script>

举个例子（控件地址：http://www.my97.net/dp/My97DatePicker/WdatePicker.js）：

首先下载日期控件到你的服务器目录中，在你的页面中引入这个外部js：

<script language="JavaScript" type="text/javascript" src="../../My97DatePicker/WdatePicker.js">//具体路径看实际情况</script>

在文本控件中这样使用：

<input id="d11" type="text" onClick="WdatePicker()"/>点击这个input文本框时候就会弹出时间选择框