My97DatePicker，将dateFmt设置为"HH:mm:ss"

<input type="text" onclick="WdatePicker({dateFmt:'HH:mm:ss'})" />

效果：

由于上传字数限制，代码不完整。可加好友，私信，免费提供，无偿共享代码。

/// FileName:calendar.js

var cal

var isFocus = false//是否为焦点

var pickMode = {

"second": 1,

"minute": 2,

"hour": 3,

"day": 4,

"month": 5,

"year": 6

}

var topY = 0, leftX = 0 //自定义定位偏移量

//选择日期，通过 ID 来选日期

function SelectDateById(id, strFormat, minYear, maxYear, x, y) {

var obj = document.getElementById(id)

if (obj == null) { return false}

obj.focus()

if (obj.onclick != null) { obj.onclick()}

else if (obj.click != null) { obj.click()}

else { SelectDate(obj, strFormat, x, y) }

}

/**//**//**//**//**//**//**//**

* 返回日期

* @param d the delimiter

* @param p the pattern of your date

根据用户指定的 style 来确定；

*/

String.prototype.toDate = function(style) {

var y = this.substring(style.indexOf('y'), style.lastIndexOf('y') + 1)//年

var M = this.substring(style.indexOf('M'), style.lastIndexOf('M') + 1)//月

var d = this.substring(style.indexOf('d'), style.lastIndexOf('d') + 1)//日

var h = this.substring(style.indexOf('h'), style.lastIndexOf('h') + 1)//时

var m = this.substring(style.indexOf('m'), style.lastIndexOf('m') + 1)//分

var s = this.substring(style.indexOf('s'), style.lastIndexOf('s') + 1)//秒

if (s == null || s == "" || isNaN(s)) { s = new Date().getSeconds()}

if (m == null || m == "" || isNaN(m)) { m = new Date().getMinutes()}

if (h == null || h == "" || isNaN(h)) { h = new Date().getHours()}

if (d == null || d == "" || isNaN(d)) { d = new Date().getDate()}

if (M == null || M == "" || isNaN(M)) { M = new Date().getMonth() + 1}

if (y == null || y == "" || isNaN(y)) { y = new Date().getFullYear()}

var dt

eval("dt = new Date('" + y + "', '" + (M - 1) + "','" + d + "','" + h + "','" + m + "','" + s + "')")

return dt

}

//显示日历

Calendar.prototype.show = function(dateObj, strFormat, minYear, maxYear, popControl) {

if (dateObj == null) {

throw new Error("arguments[0] is necessary")

}

this.dateControl = dateObj

var now = new Date()

var str = dateObj.value

var strtodate = strToDate(str, strFormat, minYear, maxYear)//格式检查

this.date = (dateObj.value.length >0 &&strtodate == true) ?

new Date(dateObj.value.toDate(this.dateFormatStyle)) :

now.format(this.dateFormatStyle).toDate(this.dateFormatStyle)//不为空、且格式验证通过，根据日期框实际日期初使化

//this.date = (dateObj.value.length >0 &&strtodate == false) ? //不为空、且格式验证不通过，根据当前日期初使化

//new Date(now.toLocaleString().toDate(this.dateFormatStyle)) :

//now.format(this.dateFormatStyle).toDate(this.dateFormatStyle)

if (this.panel.innerHTML == "" || cal.dateFormatStyleOld != cal.dateFormatStyle)//2008-01-29 把构造表格放在此处，2009-03-03 若请示的样式改变，则重新初始化

{

this.draw()

this.bindYear()

this.bindMonth()

this.bindHour()

this.bindMinute()

this.bindSecond()

}

this.year = this.date.getFullYear()

this.month = this.date.getMonth()

this.day = this.date.getDate()

this.hour = this.date.getHours()

this.minute = this.date.getMinutes()

this.second = this.date.getSeconds()

this.changeSelect()

this.bindData()

this.container.style.display = "" //必须先显示 calendarPanel，不然获取高度是0

//if (popControl == null) {

//popControl = dateObj

//}

//var xy = this.getAbsPoint(popControl)//20170608注释。 在从表会出位置有偏移的问题，改面下面的方式直接取

//getBoundingClientRect()最先是IE的私有属性，现在已经是一个W3C标准。所以不用当心浏览器兼容问题,

//除了safari，firefox2.0外所有浏览器都支持getBoundingClientRect

var ro = dateObj.getBoundingClientRect()

var Top = ro.top

var Bottom = ro.bottom

var Height = ro.height || Bottom - Top

var X = dateObj.getBoundingClientRect().left + document.documentElement.scrollLeft

var Y = dateObj.getBoundingClientRect().top + document.documentElement.scrollTop

var vcalendarHeight = $('#calendarPanel').height()

var vBottom = $(window).height() - Bottom

if (vBottom >= vcalendarHeight) {

this.panel.style.top = (Y + topY + Height) + "px"

}

else {

this.panel.style.top = (Y + topY - vcalendarHeight - 3) + "px"//加偏移量3才不会档住text文本框

}

this.panel.style.left = (X + leftX) + "px"// leftX topY 自定义偏移量

this.panel.style.display = ""

//把 visibility 变为 display，并添加失去焦点的事件 //this.setDisplayStyle("select", "hidden")

//this.panel.style.visibility = "visible"

//this.container.style.visibility = "visible"

if (!this.dateControl.isTransEvent) {

this.dateControl.isTransEvent = true

/* 已写在返回值的时候 ReturnDate 函数中，去除验证事件的函数

this.dateControl.changeEvent = this.dateControl.onchange//将 onchange 转成其它函数，以免触发验证事件

this.dateControl.onchange = function()

{if(typeof(this.changeEvent) =='function'){this.changeEvent()}}*/

if (this.dateControl.onblur != null) {

this.dateControl.blurEvent = this.dateControl.onblur

} //2007-09-14 保存主文本框的 onblur ，使其原本的事件不被覆盖

this.dateControl.onblur = function() {

calendar.onblur()

if (typeof (this.blurEvent) == 'function') {

this.blurEvent()

}

}

}

this.container.onmouseover = function() { isFocus = true}

this.container.onmouseout = function() { isFocus = false}

}

//格式检查

function strToDate(str, A1SizeDateFormat, by, ey) {

var date = new Date()

if (A1SizeDateFormat == "hh:mm") {

var timeTemp = str.split(":")

var strhours = timeTemp[0]

var strminutes = timeTemp[1]

var seperator1 = ":"

if (strhours == undefined) {

strhours = date.gethours()

}

if (strhours == 24) {

strhours = "00"

}

if (strminutes == undefined || strminutes == "") {

strminutes = date.getMinutes()

}

var newtime = new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + strhours + ':' + strminutes)

if (newtime.getHours() == strhours &&newtime.getMinutes() == strminutes) {

return true

}

else {

return false

}

}

else {

by = date.getFullYear() - Number(by) | 0

ey = date.getFullYear() + Number(ey) | 0

var arrTemp = str.split("-")

var stryear = arrTemp[0]

var strmonth = arrTemp[1]

var strdate = arrTemp[2]

var seperator2 = "-"

if (stryear <by || stryear >ey || stryear == undefined) {

return false

}

if (strmonth == undefined || strmonth == "") {

strmonth = date.getMonth() + 1

}

if (strmonth >= 1 &&strmonth <= 9 &&strmonth.toString().length == 1) {

strmonth = "0" + strmonth

}

if (strdate == undefined || strdate == "") {

strdate = date.getDate()

}

if (strdate >= 0 &&strdate <= 9 &&strdate.toString().length == 1) {

strdate = "0" + strdate

}

var newdate = new Date(stryear + '/' + strmonth + '/' + strdate)

if (newdate.getYear() == stryear &&newdate.getMonth() + 1 == strmonth &&newdate.getDate() == strdate) {

if (A1SizeDateFormat == "yyyy-MM") {

return true

}

else if (A1SizeDateFormat == "yyyy-MM-dd") {

return true

}

}

}

}

//隐藏日历

Calendar.prototype.hide = function() {

//this.setDisplayStyle("select", "visible")

//this.panel.style.visibility = "hidden"

//this.container.style.visibility = "hidden"

this.panel.style.display = "none"

this.container.style.display = "none"

isFocus = false

}

//焦点转移时隐藏日历

Calendar.prototype.onblur = function() {

if (!isFocus) { this.hide()}

}

//确保日历容器节点在 body 最后，否则 FireFox 中不能出现在最上方

function InitContainerPanel() //初始化容器

{

var str = '<div id="calendarPanel" style="position: absolutedisplay: nonez-index:9999background-color: #FFFFFFborder: 1px solid #CCCCCCwidth:175pxfont-size:12px"></div>'

//if (document.all) {

//str += '<iframe style="position:absolutez-index:2000width:expression(this.previousSibling.offsetWidth)'

//str += 'height:expression(this.previousSibling.offsetHeight)'

//str += 'left:expression(this.previousSibling.offsetLeft)top:expression(this.previousSibling.offsetTop)'

//str += 'display:expression(this.previousSibling.style.display)" scrolling="no" frameborder="no"></iframe>'

//}//20170608注释。在IE8非兼容模式下，会多出一个html内嵌iframe，导致遮挡其它内容

var div = document.createElement("div")

div.innerHTML = str

//var para = document.createElement(str)

//div.appendChild(para)

div.id = "ContainerPanel"

div.style.display = "none"

document.body.appendChild(div)

} //调用calendar.show(dateControl, popControl)