发现网上日前选择器很多，时间选择的好像不多。自己就写了一个。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> TimePicker</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript">
<!--
function timeShow(obj) {
var isShow = true;
var isFirst = true;
var div = document.getElementById('div_' + obj.id);
var hourSelect = document.getElementById('hourSelect_' + obj.id);
var minSelect = document.getElementById('minSelect_' + obj.id);
var timeTable = document.getElementById('timeTable_' + obj.id);
var st_time;
// 将文本框的值选中
var time = obj.value;
var hour;
var minute;
var tableString = "<table id='timeTable_" + obj.id + "' border=0 width='200px'><tr><td>时:</td><td></td><td>分:</td><td></td></tr><tr align='center'><td colspan='4'><input id='st_" + obj.id + "' type='button' value='确定'></td></tr></table>";
if (time != "") {
hour = time.split(":")[0];
minute = time.split(":")[1];
}
if (isShow)
{
isShow = false;
if (isFirst)
{
isFirst = false;
if (div == null || div == undefined)
{
div = document.createElement('div');
hourSelect = document.createElement('select');
minSelect = document.createElement('select');
timeTable = document.createElement('table');
div.setAttribute('id','div_' + obj.id);
hourSelect.setAttribute('id','hourSelect_' + obj.id);
minSelect.setAttribute('id','minSelect_' + obj.id);
for (var i=0;i<24 ;i++ )
{
if (i < 10)
{
hourSelect.options.add(new Option('0'+i,'0'+i));
}
else {
hourSelect.options.add(new Option(i,i));
}
}
for (var i=0;i<60 ;i++ )
{
if (i < 10)
{
minSelect.options.add(new Option('0'+i,'0'+i));
}
else {
minSelect.options.add(new Option(i,i));
}
}
div.innerHTML = tableString;
// set styles
hourSelect.style.width = '60px';
minSelect.style.width = '60px';
div.style.zIndex = '100';
div.style.position = 'absolute';
div.style.border = '1px solid blue';
div.style.backgroundColor = '#6666FF';
div.style.width = '80px';
div.style.height = '50px';
div.style.left = event.x;
div.style.top = event.y;
div.style.display = 'block';
document.body.appendChild(div);
var timeTable = document.getElementById('timeTable_' + obj.id);
var hourTd = timeTable.rows[0].cells[1];
hourTd.appendChild(hourSelect);
var hourTd = timeTable.rows[0].cells[3];
hourTd.appendChild(minSelect);
st_time = document.getElementById('st_' + obj.id);
st_time.onclick = function() {
obj.value = hourSelect.options[hourSelect.selectedIndex].text + ':' + minSelect.options[minSelect.selectedIndex].text;
div.style.display = 'none';
isShow = true;
}
if (hour != "") {
for (var i=0;i<hourSelect.options.length;i++) {
if (hourSelect.options[i].text == hour) {
hourSelect.options[i].selected = true;
}
}
}
if (minute != "") {
for (var i=0;i<minSelect.options.length;i++) {
if (minSelect.options[i].text == minute) {
minSelect.options[i].selected = true;
}
}
}
}
else {
div.style.display = 'block';
}
}
else {
div.style.display = 'block';
}
}
}
function TimePicker(obj) {
timeShow(obj);
}
//-->
</script>
</head>
<body>
<input type='text' name='starttime' id='starttime' value="07:00" onclick='TimePicker(this);'>至
<input type='text' name='starttime2' id='starttime2' value="19:33" onclick='TimePicker(this);'>
-----------------------------------------------------------------------------------------------<br>
<input type='text' name='starttime2' id='starttime22' value="07:00" onclick='TimePicker(this);'>至
<input type='text' name='starttime22' id='starttime222' value="19:33" onclick='TimePicker(this);'>
</body>
</html>
相关推荐
JavaScript时间选择器是一种常见的前端交互元素，用于帮助用户在网页上方便地选择日期或时间。在本案例中，"超实用js时间选择器" 提供了一个简洁易用的解决方案，只需引入相关的JavaScript和CSS文件，就能在项目中...
js 时间选择器 js 时间选择器 js 时间选择器日期选择器
"js时间选择器"是一种JavaScript插件，用于提供美观且用户友好的时间选择功能。这种组件通常会以弹出日历的形式出现，允许用户方便地选取特定的日期，而无需手动输入。在本文中，我们将深入探讨js时间选择器的工作...
3. **JavaScript时间选择器库**： - **Bootstrap Datepicker**：这是一个流行的JavaScript库，它为Bootstrap框架提供了日期选择器功能，同时也可以独立使用。它提供了丰富的定制选项，如日期范围选择、多种语言支持...
1. **JavaScript时间选择器**：JavaScript时间选择器通常基于jQuery或者其他轻量级库，它提供了一种友好的方式来选择日期和时间，使得用户输入更加直观和准确。 2. **自定义事件和回调函数**：好的时间选择器允许...
JavaScript时间选择器控件是一种常见的前端交互元素，用于在网页上提供用户友好的日期和时间选取功能。在网页设计和开发中，此类控件能够极大地提高用户体验，使得用户能够轻松地输入或选择日期和时间，而无需手动...
本文将深入探讨一个基于Mootools框架，采用圆形时钟风格的JavaScript时间选择器。Mootools是一个强大的JavaScript库，以其模块化、面向对象的设计理念而受到开发者喜爱。这个圆形时钟样式的时间选择器，不仅视觉效果...
首先，"dol-datepicker.js" 文件很可能是这个日期时间选择器的主要实现部分，它包含了JavaScript代码，用于创建交互式的日期时间选择界面以及处理用户的选取行为。JavaScript的Date对象是处理日期和时间的基础，我们...
JavaScript时间选择器是一种常见的前端开发组件，用于在网页上提供用户友好的时间输入方式，通常以小时、分钟和秒为单位。"HH24:mi:ss"格式表示24小时制的时间，即小时（HH）、分钟（mi）和秒（ss）。这个组件广泛...
JS时间选择器，可以选择时分秒，使用简单，只需引用JS文件，并在指定的文本框地方设置调用函数即可
原生js时间选择器点击input弹出时间选择器代码.zip
3. `js`：这是一个JavaScript文件，很可能包含了实现日期选择器逻辑的代码。JavaScript部分可能包括以下功能： - 初始化日期选择器，根据用户的操作显示和隐藏日历视图。 - 处理用户点击或键盘输入，更新选定的...
一个js日期和时间选择器，支持精确到毫秒的时间选择 http://blog.csdn.net/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
时间选择器JS特效插件是前端开发中常见的一种交互组件，它主要负责为用户提供一个方便、直观的方式来选取特定的时间或时间段。在网页应用中，这种插件被广泛应用于日程安排、预约系统、计时器等功能，提升用户体验，...
本文将详细讲解"web端日期选择器、月份选择器、时间选择器以及时间范围选择器"这四个核心知识点，并结合提供的文件名称进行分析。 1. **日期选择器** 日期选择器是Web应用中常见的组件，用于让用户选择一个具体的...
以下是对这个js时分秒选择器的详细解释： 一、基本概念 1. JavaScript：一种广泛使用的脚本语言，主要用于浏览器端，负责处理用户交互、动态内容、AJAX等任务。 2. 时分秒选择器：这是一种UI组件，允许用户通过图形...
`datePicker.js`是一款适用于移动端和PC端的时间选择器组件，它为用户界面提供了一种交互式的日期和时间选择功能。在网页应用中，时间选择器是必不可少的元素，尤其在处理表单输入或者需要用户指定特定日期或时间的...