`
hwpok
  • 浏览: 251637 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS 日期时间选择控件

 
阅读更多
/**//**
*本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。
*tiannet添加了时间选择功能、select,object标签隐藏功能,还有其它小功能。
*使用方法:
* (1)只选择日期 <input type="text" name="date" readOnly onClick="setDay(this);">
* (2)选择日期和小时 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3)选择日期和小时及分钟 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
*设置参数的方法
* (1)设置日期分隔符 setDateSplit(strSplit);默认为"-"
* (2)设置日期与时间之间的分隔符 setDateTimeSplit(strSplit);默认为" "
* (3)设置时间分隔符 setTimeSplit(strSplit);默认为":"
* (4)设置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)设置开始和结束年份 setYearPeriod(intDateBeg,intDateEnd)
*说明:
* 默认返回的日期时间格式如同:2005-02-02 08:08
*/

//------------------ 样式定义 ---------------------------//
//
功能按钮同样样式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按钮
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//关闭、清空等按钮样式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年选择下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、时、分选择下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期选择控件体的样式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//显示日的td的样式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字体样式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//链接的样式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//横线
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 变量定义 ---------------------------//
var tiannetYearSt = 1950;//可选择的开始年份
var tiannetYearEnd = 2010;//可选择的结束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定义年的变量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1//定义月的变量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = tiannetDateNow.getHours();
var tiannetMinute = tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42); //定义写日期的数组
var tiannetDateSplit = "-"//日期的分隔符号
var tiannetDateTimeSplit = " "//日期与时间之间的分隔符
var tiannetTimeSplit = ":"//时间的分隔符号
var tiannetOutObject; //接收日期时间的对象
var arrTiannetHide = new Array();//被强制隐藏的标签
var m_bolShowHour = false;//是否显示小时
var m_bolShowMinute = false;//是否显示分钟

var m_aMonHead = new Array(12); //定义阳历中每个月的最大天数
m_aMonHead[0= 31; m_aMonHead[1= 28; m_aMonHead[2= 31; m_aMonHead[3= 30; m_aMonHead[4= 31; m_aMonHead[5= 30;
m_aMonHead[
6= 31; m_aMonHead[7= 31; m_aMonHead[8= 30; m_aMonHead[9= 31; m_aMonHead[10= 30; m_aMonHead[11= 31;
// ---------------------- 用户可调用的函数 -----------------------------//
//
用户主调函数-只选择日期
function setDay(obj){
tiannetOutObject 
= obj;
//如果标签中有值,则将日期初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}

tiannetPopCalendar();
}

//用户主调函数-选择日期和小时
function setDayH(obj){
tiannetOutObject 
= obj;
m_bolShowHour 
= true;
//如果标签中有值,则将日期和小时初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(
0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) tiannetHour = hour.substring(1,2);
}

tiannetPopCalendar();
}

//用户主调函数-选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject 
= obj;
m_bolShowHour 
= true;
m_bolShowMinute 
= true;
//如果标签中有值,则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(
0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour 
= arr[0];
tiannetMinute 
= arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
else setNow();
tiannetPopCalendar();
}


function setNow(){

}


//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt 
= intDateBeg;
tiannetYearEnd 
= intDateEnd;
}

//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit 
= strDateSplit;
}

//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit 
= strDateTimeSplit;
}

//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit 
= strTimeSplit;
}

//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}

//设置默认的日期。格式为:YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear 
= strDate.substring(0,4);
tiannetMonth 
= strDate.substring(5,7);
tiannetDay 
= strDate.substring(8,10);
}

//设置默认的时间。格式为:HH24:MI
function setDefaultTime(strTime){
tiannetHour 
= strTime.substring(0,2);
tiannetMinute 
= strTime.substring(3,5);
}

// ---------------------- end 用户可调用的函数 -----------------------------//
//
------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("","","","","","","");
document.write('
<div id="divTiannetDate" style="'+s_tiannet_body+'">');
document.write('
<div align="center" id="divTiannetDateText" style="padding-top:2px;">');
document.write('
<span id="tiannetYearHead" style="'+s_tiannet_font+'" '+
'onclick
="spanYearCEvent();"> 年</span>');
document.write('
<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
' onChange
="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';
">');
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln('
<option value="' + i + '">+ i + '年</option>');
}

document.write('
</select>');
document.write('
<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'onclick
="spanMonthCEvent();">  月</span>');
document.write('
<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
'onChange
="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';
">');
for(var i=1;i <= 12;i ++){
document.writeln('
<option value="' + i + '">+ i + '月</option>');
}

document.write('
</select>');
//document.write('</div>');
//
document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '</
分享到:
评论

相关推荐

    JavaScript日期时间选择控件

    JavaScript日期时间选择控件的实现有多种库和框架可供选择,如jQuery UI的Datepicker、Bootstrap的DateTimePicker、Pickadate.js和Flatpickr等。这些库通常提供丰富的API和配置选项,方便开发者根据需求进行定制。 ...

    Javascript日期时间选择控件

    JavaScript日期时间选择控件是网页开发中常用的一种交互元素,它允许用户在界面上方便地选取日期和时间,常用于表单输入、日程安排或事件预订等场景。本控件通常通过JavaScript库实现,例如jQuery UI、Bootstrap ...

    JS日期时间选择控件

    在本案例中,我们讨论的是一款名为"JS日期时间选择控件"的组件。 该控件具有以下关键特性: 1. **跨浏览器兼容性**:控件特别强调支持Firefox和IE等主流浏览器,这意味着开发者可以信赖这个组件在不同浏览器上的...

    好用的js日期时间选择控件

    本篇文章将深入探讨“好用的js日期时间选择控件”这一主题,主要基于提供的标签“源码”和“工具”,我们将讨论日期时间选择控件的实现原理、常见功能、以及如何通过datetimepicker这一组件进行应用。 首先,日期...

    js移动端日期时间选择控件

    `js移动端日期时间选择控件` 是一种常见的交互元素,它允许用户方便地选取日期和时间,提高用户体验。在JavaScript(特别是原生JS)中,我们可以创建自定义的日期时间选择器,或者利用现有的开源库来实现这一功能。 ...

    WebForm下日期时间选择控件

    为了提高用户体验,日期时间选择控件成为必不可少的工具。本文将深入探讨在WebForm下如何使用日期时间选择控件,以及其相关特性。 首先,日期时间选择控件允许用户方便地选取日期和时间,而无需手动输入。在WebForm...

    JavaScript 日期时间选择控件

    弹出层选择日期时间,简单实用。 使用方式: &lt;script type="text/javascript" src="../JS/calendar.js"&gt; &lt;asp:TextBox ID="txtTimeStart" runat="server" Width="80px"&gt;&lt;/asp:TextBox&gt;选择日期" onclick=...

    日期选择时间控件 很强悍的

    日期选择时间控件的实现通常基于JavaScript库,例如jQuery UI中的Datepicker或者Bootstrap的Datetimepicker。这些库提供了丰富的功能,如预设日期范围、禁用特定日期、自定义格式化以及多语言支持等。开发者可以根据...

    移动端日期时间选择控件

    在移动端应用开发中,日期时间选择控件是一个非常常见的组件,它允许用户方便地选取日期和时间,广泛应用于各种场景,如预约、日程安排、表单填写等。本话题将深入探讨移动端日期时间选择控件的设计原理、实现方式...

    js时间实现时间控件

    HTML页面导入此JS,然后如上JS中说明的申明,然后调用getDateString就可以使用了

    选择日期控件(js封装类,javascript,选择日期,文本框选择日期,控件)

    选择日期控件(js封装类,javascript,选择日期,文本框选择日期,控件)

    js日期时间选择控件.rar

    *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能,还有其它小功能。 *使用方法: * (1)只选择日期 (this);"&gt; * (2)...

    日期时间选择控件V1.0

    日期时间选择控件在网页开发中扮演着重要角色,它为用户提供了一种便捷的方式来输入或选择日期和时间,尤其在创建表单时非常实用。"日期时间选择控件V1.0"是一个自编的组件,专为满足这种需求而设计。这个控件的核心...

    HTML日期选择控件

    HTML日期选择控件是网页开发中常用的一种交互元素,它允许用户方便地选取日期,常用于表单提交、日程安排或时间记录等场景。在HTML5中,引入了`&lt;input type="date"&gt;`标签,为开发者提供了一个内置的日期选择控件,但...

    JS日期和时间选择控件升级版(自写)

    1. JS日期时间选择控件的需求背景和功能改进: - 网上现有的日期选择程序存在一些问题,这些程序通常只包含日期选择功能,而没有时间选择功能。 - 为了弥补这一市场空缺,作者决定自行开发一个新的日期和时间选择...

    JS日期和时间选择控件

    JS日期和时间选择控件JS日期和时间选择控件JS日期和时间选择控件

    日期时间选择控件

    像jQuery UI、Bootstrap DateTimePicker、Pickadate.js、Flatpickr、Moment.js等都是常用的JavaScript库,它们提供了丰富的日期时间选择功能,包括自定义格式化、多种语言支持、时间范围限制等。这些库通常可以通过...

    PC移动端日期时间选择控件

    在IT行业中,尤其是在Web开发领域,日期时间选择控件是不可或缺的一部分。无论是PC端还是移动端,用户经常需要输入或选择日期和时间,如预订系统、日程管理、表单填写等场景。本篇文章将深入探讨PC和移动端日期时间...

    js日期时间控件-日期,时间

    可以选择时间的控件,js日期时间...可以选择时间的控件,js日期时间控件可以选择时间的控件,js日期时间控件可以选择时间的控件,js日期时间控件可以选择时间的控件,js日期时间控件可以选择时间的控件,js日期时间控件

Global site tag (gtag.js) - Google Analytics