`

JS时分秒组件

阅读更多

setTime.js文件内容如下:

 

var str = "";
document.writeln("<div id=\"_contents\" style=\"padding:6px; background-color:#E3E3E3; font-size: 12px; border: 1px solid #777777; position:absolute; left:?px; top:?px; width:?px; height:?px; z-index:1; visibility:hidden\">");
str += "\u65f6<select id=\"_hour\">";
for (h = 0; h <= 9; h++) {
 str += "<option value=\"0" + h + "\">0" + h + "</option>";
}
for (h = 10; h <= 23; h++) {
 str += "<option value=\"" + h + "\">" + h + "</option>";
}

str += "</select> \u5206<select id=\"_minute\">";
for (m = 0; m <= 9; m++) {
 str += "<option value=\"0" + m + "\">0" + m + "</option>";
}
for (m = 10; m <= 59; m++) {
 str += "<option value=\"" + m + "\">" + m + "</option>";
}


str += "</select> \u79d2<select id=\"_second\">";
for (s = 0; s <= 9; s++) {
 str += "<option value=\"0" + s + "\">0" + s + "</option>";
}
for (s = 10; s <= 59; s++) {
 str += "<option value=\"" + s + "\">" + s + "</option>";
}

str += "</select> <input name=\"queding\" type=\"button\" onclick=\"_select()\" value=\"\u786e\u5b9a\" style=\"font-size:12px\" />  </div>";
document.writeln(str);


var _fieldname;
  
function _SetTime(tt) {
 _fieldname = tt;
 
 var currHour = 0;
 var currMinute = 0;
 var currSecond = 0;

 if(tt.value.trim().length>0){
 
  var time = tt.value.split(":");
  currHour = time[0];
  currMinute = time[1];
  currSecond = time[2];
  
  document.getElementById("_hour").options[currHour].selected = true;
  document.getElementById("_minute").options[currMinute].selected = true;
  document.getElementById("_second").options[currSecond].selected = true;
  
 }


 var ttop = tt.offsetTop; //TT控件的定位点高
 var thei = tt.clientHeight; //TT控件本身的高
 var tleft = tt.offsetLeft; //TT控件的定位点宽
 
 while (tt = tt.offsetParent) {
  ttop += tt.offsetTop;
  tleft += tt.offsetLeft;
 }
 
 document.getElementById("_contents").style.top = (ttop + thei + 4)+"px";
 document.getElementById("_contents").style.left = tleft+"px";
 document.getElementById("_contents").style.visibility = "visible";
  
}


function _select() {
 _fieldname.value = document.getElementById("_hour").value + ":" + document.getElementById("_minute").value + ":" + document.getElementById("_second").value;
 document.getElementById("_contents").style.visibility = "hidden";
}  


function _close() {
 document.getElementById("_contents").style.visibility = "hidden";
} 


String.prototype.trim= function(){  
 return this.replace(/(^\s*)|(\s*$)/g, "");  
}
  
 

 

使用

 

<script src="script/setTime.js" type="text/javascript"></script>

时间<input id="oncetime" name="task.oncetime" readonly="true" type="text" size="10" value="${request.task.oncetime}" onclick="_SetTime(this)">

 

 

分享到:
评论

相关推荐

    Extjs 年月日时分秒组件

    "Extjs 年月日时分秒组件"是一个特定的插件,允许用户在应用程序中选择精确到时分秒的时间。这种组件对于需要用户输入特定时间的应用场景非常有用,例如日程安排、预约系统等。 该组件的核心功能是提供一个交互式的...

    js带时分秒日期时间控件

    在JavaScript(JS)中,创建一个带有时分秒的日期时间控件是一项常见的需求,尤其在Web开发中,用户可能需要选择或输入精确到秒的时间。这个控件可以帮助用户直观地选择日期和时间,提高用户体验。本文将深入探讨...

    EXTJS时间控件年月日时分秒

    压缩包中的“ExtJS年月日时分秒组件”可能包含了实现这个功能的示例代码,包括EXTJS的配置、布局、样式以及可能的自定义扩展。学习这个组件,你可以查看源码,了解如何组合EXTJS的基本组件和配置,实现一个完整的...

    js时分秒选择器

    JavaScript时分秒选择器是一种常见的前端交互组件,用于在网页上方便用户选择特定的时间,如小时、分钟和秒。在Web开发中,特别是在构建表单或日历应用时,这样的选择器是必不可少的。以下是对这个js时分秒选择器的...

    jquery时间控件时分秒

    而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...

    原生js日期控件带时分秒点击text文本框选择日期时分秒

    在JavaScript编程中,创建一个原生的日期控件,尤其是带有时分秒选择功能的,是常见的需求。这种控件通常用于用户输入日期和时间,比如在表单中。在这个场景下,`input`文本框结合原生JS可以实现一个自定义的日期...

    js原生时间插件(带时分秒)

    总的来说,这个"js原生时间插件(带时分秒)"项目涵盖了JavaScript的基本知识,如DOM操作、事件处理、日期对象的使用,以及CSS样式和布局的设计。通过实践这样的项目,开发者可以深化对JavaScript的理解,提高创建...

    带时分秒的EXT日期控件

    /** * 此组件为带时分秒的日期控件,在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击...

    Bootstrap-datetimepicker年月日时分秒均可选择

    在“Bootstrap-datetimepicker年月日时分秒均可选择”这一主题中,我们关注的是如何配置和使用这个插件,以便用户可以选择完整的日期(年、月、日)以及时间(小时、分钟和秒)。要实现这一功能,你需要对JavaScript...

    JS日期选择器带时分秒

    在JavaScript(JS)中,日期选择器是一种常用的交互组件,用于让用户方便地选取日期和时间。"JS日期选择器带时分秒"是指一个能够显示并允许用户选择具体到秒的日期时间选择器。这样的功能在许多Web应用程序中非常...

    日历年月日时分秒控件myCalendar.js

    `myCalendar.js`是一款小巧而功能强大的JavaScript库,专为创建日历年月日时分秒控件而设计。本文将深入探讨`myCalendar.js`的原理、使用方法及其在实际项目中的应用。 一、`myCalendar.js`概述 `myCalendar.js`的...

    js 时间 包括时分秒

    本文将深入探讨JavaScript如何处理包括时分秒在内的时间,并介绍6种不同的时间控制查看选择器,以及相关的详细文档。 1. JavaScript中的Date对象: JavaScript内置了Date对象,它是处理时间的基础。Date对象可以...

    js日历组件-精确到时分秒

    "js日历组件-精确到时分秒"是一个专为JavaScript设计的日历插件,它允许用户在网页上选择日期和时间,精确到小时、分钟甚至秒。这种组件在网页表单、事件预订系统、在线日程管理等场景中非常实用。 首先,我们要...

    Extjs4.2 带时分秒的日期插件

    总的来说,“Extjs4.2 带时分秒的日期插件”是一个增强Ext JS 4.2日期选择功能的实用工具,它通过提供完整的日期和时间选择,提升了用户交互体验。开发者可以从开源社区获取并使用这个插件,也可以根据自身项目需求...

    date的js插件,时分秒可要可不要

    总的来说,这个“date的js插件,时分秒可要可不要”是一个增强JavaScript日期时间处理能力的工具,它提供了更丰富的UI和定制选项,让开发者在处理日期时间输入和展示时更加得心应手。通过深入研究`dateControl.js`的...

    extjs4.2 日期控件扩展带时分秒

    ### Extjs4.2 日期控件扩展带时分秒:深入解析与应用 #### 一、概述 在Web开发中,特别是在使用ExtJS这样的框架进行界面构建时,日期和时间的选择器是不可或缺的一部分。ExtJS 4.2提供了一个强大的日期控件,但是...

    微信小程序 -- 年月日时分秒 picker 选择器

    ### 二、封装年月日时分秒`picker`组件 为了实现一个完整的年月日时分秒`picker`选择器,我们需要进行以下步骤: 1. **创建组件结构**:首先,建立一个新的`WXML`(微信小程序的结构文件)和`WXSS`(样式文件),...

    jQuery时间选择器datepicker年月日时分秒选择

    这个插件允许用户方便地选择日期,甚至可以扩展到选择时间,实现年月日时分秒的精确选取。 Datepicker插件的核心功能是显示一个可交互的日历,用户可以通过点击或输入来选择日期。在基本用法中,你可以通过简单的...

    datetimepicker选择时分秒

    现在,用户可以选择到具体的时分秒,这对于需要精确时间输入的应用场景(如会议预约、定时任务设置等)非常有用。改造后的组件可能采用了更灵活的配置选项,允许开发者自定义显示格式,以满足不同的需求。 在实际...

    年月日时分秒选择器.zip

    综上所述,利用uniapp的picker组件实现年月日时分秒选择器是一个结合了数据绑定、事件处理、组件定制和响应式设计的过程。通过掌握这些知识点,开发者可以构建出满足多样化需求的时间选择器,提高应用的用户体验和...

Global site tag (gtag.js) - Google Analytics