最近有一个项目中大量的要求客户选择日期和时间，以前已经有了日期选择的控件，但是却没有一个时间输入的控件，在网上早了一下，一直没有找到满意的，恰好最近在学习prototype，于是就用它写了一个控件，可以非常方便的帮助用户进行时间的输入，支持键盘的左右移动和上下键来控制时间的值，支持输入焦点自动切换，在这里把代码贴出来，希望对大家有帮助
<script language="javascript" type="text/javascript"> </script><script language="javascript" type="text/javascript"> </script><%@ Page language="c#" Codebehind="TimePicker.aspx.cs" AutoEventWireup="false" Inherits="play.TimePicker" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>TimePicker</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<style>
.inputbottom
{
border-right: black 0px solid;
border-top: black 0px solid;
font-size: 9pt;
border-left: black 0px solid;
color: black;
border-bottom: black 1px solid;
background-color: white;
}
</style>
<script language="javascript" src="prototype-1.4.0.js"></script>
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<div id="TimePicker"></div>
</form>
<script language="javascript">
<!--
/**
version 0.5
2006-3-11
mail:netmini@sina.com
*/
var DateTime = Class.create();
DateTime.prototype = {
initialize: function(year, month, day, hour, minute, second) {
this.year = year;
this.month = month;
this.day = day;
this.hour = hour;
this.minute = minute;
this.second = second;
this.inputPostion = 1;
},
toString: function(){
var sDateTime = this.year + '-' + this.month +'-' + this.day + ' ' + this.hour + ':' + this.minute + ':' + this.second;
return sDateTime;
}
}
var TimeControl = Class.create();
TimeControl.prototype = {
initialize: function(name, textClassName){
this.name = name;
this.textClassName = textClassName;
this.sTime = "00:00:00";
this.container = document.createElement ("div");
this.container.setAttribute("id",name);
this.hourField = this.createTextBox(name + '_hour', "9", 0, "hour");
this.hourField1 = this.createTextBox(name + '_hour1', "9", 1, "hour");
this.minuteField = this.createTextBox(name + '_minute', '9', 2, "minute");
this.minuteField1 = this.createTextBox(name + '_minute1', '9', 3, "minute");
this.secondField = this.createTextBox(name + '_second', '9', 4, "second");
this.secondField1 = this.createTextBox(name + '_second1', '9', 5, "second");
this.fieldList = new Array();
this.fieldList.push(this.hourField);
this.fieldList.push(this.hourField1);
this.fieldList.push(this.minuteField);
this.fieldList.push(this.minuteField1);
this.fieldList.push(this.secondField);
this.fieldList.push(this.secondField1);
this.container.appendChild(this.hourField);
this.container.appendChild(this.hourField1);
this.container.appendChild(this.createColon());
this.container.appendChild(this.minuteField);
this.container.appendChild(this.minuteField1);
this.container.appendChild(this.createColon());
this.container.appendChild(this.secondField);
this.container.appendChild(this.secondField1);
},
createTextBox: function(name, size, index, timeType){
var box = document.createElement ("input");
box.setAttribute("type","text");
box.setAttribute("id",name);
box.setAttribute("width",size);
box.setAttribute("index", index);
box.setAttribute("className", this.textClassName);
box.setAttribute("TimeType",timeType);
box.setAttribute("value",0);
Event.observe(box,"keydown", this.time_keyDownHanlder.bind(this));
return box;
},
createColon: function(){
var colon = document.createElement ("font");
colon.innerText = ":";
return colon;
},
time_keyDownHanlder: function(evt){
if(!evt && window.event) {
evt = window.event;
}
var key = evt.keyCode;
//alert ('key:' + key);
var KEYLEFT = 37;
var KEYRIGHT = 39;
var KEYENTER = 13;
var KEYTAB = 9;
var KEYSPACE = 32;
var KEYBACKSPACE = 8;
var KEYUP = 38;
var KEYDOWN = 40;
//数值keycode,48-57,up38,down40
if (key == KEYRIGHT)
{
this.moveNext(evt.srcElement);
}
if (key == KEYLEFT)
{
var index = evt.srcElement.getAttribute("index");
if (index >0)
{
this.fieldList[index - 1].focus();
//if (key == KEYBACKSPACE)
//this.fieldList[index - 1].value = 0;
}
}
if (key == KEYUP)
{
var timeType = evt.srcElement.getAttribute("TimeType");
this.changeTime(timeType, "+", 1);
}
if (key == KEYDOWN)
{
var timeType = evt.srcElement.getAttribute("TimeType");
this.changeTime(timeType, "-", 1);
}
if ((key >= 48) && (key <=57))
{
var oldValue = evt.srcElement.value;
evt.srcElement.value = key-48;
if (!this.isValidTime())
evt.srcElement.value = oldValue
else
this.moveNext(evt.srcElement);
return false;
}
if (key == KEYTAB)
return true;
else
return false;
},
moveNext: function(src){
var index = src.getAttribute("index");
if (index < this.fieldList.length-1)
this.fieldList[index + 1].focus();
},
changeTime: function(timeType, changeDirect, changeValue){
if (timeType == "hour")
{
var hour = this.getHour();
if (changeDirect == "+")
{
if(hour + changeValue <= 24)
this.setHour(hour + changeValue);
else
this.setHour(0);
}
if (changeDirect == "-")
if ((hour - changeValue >= 0) && hour <= 24)
this.setHour(hour - changeValue);
else
this.setHour(24);
}
if (timeType == "minute")
{
var minute = this.getMinute();
if (changeDirect == "+")
{
if (minute + changeValue <= 60)
this.setMinute(minute + changeValue);
else
this.setMinute(0);
}
if (changeDirect == "-")
if ((minute - changeValue >= 0) && (minute <=60))
this.setMinute(minute - changeValue);
else
this.setMinute(60);
}
if (timeType == "second")
{
var second = this.getSecond();
if (changeDirect == "+")
{
if (second + changeValue <= 60)
this.setSecond(second + changeValue);
else
this.setSecond(0);
}
if (changeDirect == "-" )
if ((second - changeValue >= 0) && (second <= 60))
this.setSecond(second - changeValue);
else
this.setSecond(60);
}
},
getTime: function(){
var sTime = this.fieldList[0].value + this.fieldList[1].value + ':' + this.fieldList[2].value + this.fieldList[3].value + ':' +
this.fieldList[4].value + this.fieldList[5].value;
return sTime;
},
getHour: function(){
var sHour = this.fieldList[0].value + this.fieldList[1].value;
return Number(sHour);
},
setHour: function(hour){
var sHour = String(hour);
if (sHour.length == 1)
{
this.fieldList[0].value = 0;
this.fieldList[1].value = sHour;
}
else
{
this.fieldList[0].value = sHour.charAt(0);
this.fieldList[1].value =sHour.charAt(1);
}
},
getMinute: function(){
var sMinute = this.fieldList[2].value + this.fieldList[3].value;
return Number(sMinute);
},
setMinute: function(Minute){
var sMinute = String(Minute);
if (sMinute.length == 1)
{
this.fieldList[2].value = 0;
this.fieldList[3].value = sMinute;
}
else
{
this.fieldList[2].value = sMinute.charAt(0);
this.fieldList[3].value =sMinute.charAt(1);
}
},
getSecond: function(){
var sSecond = this.fieldList[4].value + this.fieldList[5].value;
return Number(sSecond);
},
setSecond: function(Second){
var sSecond = String(Second);
if (sSecond.length == 1)
{
this.fieldList[4].value = 0
this.fieldList[5].value = sSecond;
}
else
{
this.fieldList[4].value = sSecond.charAt(0);
this.fieldList[5].value =sSecond.charAt(1);
}
},
isValidTime: function(){
if ((this.getHour() > 24) || (this.getMinute() > 60) || (this.getSecond()>60))
return false;
else
return true;
}
}
var timePicker = new TimeControl('TimePicker','inputbottom');
$("TimePicker").appendChild(timePicker.container);
//alert (timePicker.getTime());
//-->
</script>
</body>
</html>
/**
version 0.5
2006-3-11
mail:netmini@sina.com
*/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
