急!如何用js实现联动时间选择框。

JavaScript020

急!如何用js实现联动时间选择框。,第1张

<option selected value="month">月</option>

<option value="year" selected>年</option>

这句话有问题,一般都是一个option被选定,没有两个的 改成

<option value="year" selected>年</option>

<option value="month">月</option>

把这个<div style= "display:none"></div>去掉 同时把改成

<div id="year_select" style= "display:block">

<div id="month_select" style= "display:none">

js 为:

function selects(myselect){

if(myselect=="year") {

document.getElementById("year_select").style.display = "block"

document.getElementById("month_select").style.display = "none"

} else if(myselect=="month"){

document.getElementById("year_select").style.display = "none"

document.getElementById("month_select").style.display = "block"

}

}

默认情况下是显示<div id="year_select">这个div的,如果不想显示,则改成

<option value="date" selected>请选择日期</option>

<option value="year">年</option>

<option value="month">月</option>

然后

<div id="year_select" style= "display:none">

<div id="month_select" style= "display:none">

js改为

function selects(myselect){

if(myselect=="year") {

document.getElementById("year_select").style.display = "block"

document.getElementById("month_select").style.display = "none"

} else if(myselect=="month"){

document.getElementById("year_select").style.display = "none"

document.getElementById("month_select").style.display = "block"

} else {

document.getElementById("year_select").style.display = "none"

document.getElementById("month_select").style.display = "none"

}

}

代码太长了,你留个邮箱给我,我发给你

以下是部分代码

/**//**

*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:16pxfont-size:9ptcolor:whiteborder:0 solid #CCCCCCcursor:handbackground-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:64pxdisplay:none"

//月、时、分选择下拉框

var s_tiannet_select2 = "width:46pxdisplay:none"

//日期选择控件体的样式

var s_tiannet_body = "width:150background-color:#2650A6display:nonez-index:9998position:absolute" +

"border-left:1 solid #CCCCCCborder-top:1 solid #CCCCCCborder-right:1 solid #999999border-bottom:1 solid #999999"

//显示日的td的样式

var s_tiannet_day = "width:21pxheight:20pxbackground-color:#D8F0FCfont-size:10pt"

//字体样式

var s_tiannet_font = "color:#FFCC00font-size:9ptcursor:hand"

//链接的样式

var s_tiannet_link = "text-decoration:nonefont-size:9ptcolor:#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 = 8//tiannetDateNow.getHours()

var tiannetMinute = 0//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] = 31m_aMonHead[1] = 28m_aMonHead[2] = 31m_aMonHead[3] = 30m_aMonHead[4] = 31m_aMonHead[5] = 30

m_aMonHead[6] = 31m_aMonHead[7] = 31m_aMonHead[8] = 30m_aMonHead[9] = 31m_aMonHead[10] = 30m_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)

}

tiannetPopCalendar()

}

//设置开始日期和结束日期

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

<html>

<head>

<title>年月日三下拉框联动</title>

<meta http-equiv='Content-Type' content='text/htmlcharset=gb2312'>

</head>

<body>

<form name=form1>

<select name=YYYY onchange="YYYYMM(this.value)">

<option value="">年</option>

</select>

<select name=MM onchange="MMDD(this.value)">

<option value="">月</option>

</select>

<select name=DD>

<option value="">日</option>

</select>

</form>

<script language="JavaScript">

window.onload = function(){

strYYYY = document.form1.YYYY.outerHTML

strMM = document.form1.MM.outerHTML

strDD = document.form1.DD.outerHTML

MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

//先给年下拉框赋内容

var y = new Date().getFullYear()

var str = strYYYY.substring(0, strYYYY.length - 9)

for (var i = (y-30)i <(y+30)i++) //以今年为准,前30年,后30年

{

str += "<option value='" + i + "'>" + i + "</option>\r\n"

}

document.form1.YYYY.outerHTML = str +"</select>"

//赋月份的下拉框

var str = strMM.substring(0, strMM.length - 9)

for (var i = 1i <13i++)

{

str += "<option value='" + i + "'>" + i + "</option>\r\n"

}

document.form1.MM.outerHTML = str +"</select>"

document.form1.YYYY.value = y

document.form1.MM.value = new Date().getMonth() + 1

var n = MonHead[new Date().getMonth()]

if (new Date().getMonth() ==1 &&IsPinYear(YYYYvalue)) n++

writeDay(n)//赋日期下拉框

document.form1.DD.value = new Date().getDate()

}

function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)

{

var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value

if (MMvalue == ""){DD.outerHTML = strDDreturn}

var n = MonHead[MMvalue - 1]

if (MMvalue ==2 &&IsPinYear(str)) n++

writeDay(n)

}

function MMDD(str) //月发生变化时日期联动

{

var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value

if (str == ""){DD.outerHTML = strDDreturn}

var n = MonHead[str - 1]

if (str ==2 &&IsPinYear(YYYYvalue)) n++

writeDay(n)

}

function writeDay(n) //据条件写日期的下拉框

{

var s = strDD.substring(0, strDD.length - 9)

for (var i=1i<(n+1)i++)

s += "<option value='" + i + "'>" + i + "</option>\r\n"

document.form1.DD.outerHTML = s +"</select>"

}

function IsPinYear(year)//判断是否闰平年

{ return(0 == year%4 &&(year%100 !=0 || year%400 == 0))}

//--></script>

</body>

</html>