js选择日期

var DS_x,DS_y;

function dateSelector() //构造dateSelector对象,用来实现一个日历形式的日期输入框。
{
var myDate=new Date();
this.year=myDate.getYear(); //定义year属性,年份,默认值为当前系统年份。
this.month=myDate.getMonth()+1; //定义month属性,月份,默认值为当前系统月份。
this.date=myDate.getDate(); //定义date属性,日,默认值为当前系统的日。
this.inputName=''; //定义inputName属性,即输入框的name,默认值为空。注意:在同一页中出现多个日期输入框,不能有重复的name!
this.display=display; //定义display方法,用来显示日期输入框。
}

function display() //定义dateSelector的display方法,它将实现一个日历形式的日期选择框。
{
var week=new Array('日','一','二','三','四','五','六');

document.write("");
document.write(" .ds_font td,span { font: normal 12px 宋体; color: #000000; }");
document.write(" .ds_border { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
document.write(" .ds_border2 { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
document.write("");

document.write("");
document.write("选择日期");

document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

");
document.write("

<< < "+this.year+""+this.month+" > >>

");

document.write("

");
document.write("

");
for(i=0;i"+week[i]+"

");
document.write("

");
document.write("

");

document.write("

");
for(i=0;i");
for(j=0;j

");
document.write("

");
}
document.write("

");

document.write(" 【关闭】");
document.write("

");
document.write("

");

dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)
}

function subYear(obj) //减小年份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function addYear(obj) //增加年份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function subMonth(obj) //减小月份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
var month=eval(myObj[2].innerHTML)-1;
if(month==0)
{
month=12;
subYear(obj);
}
myObj[2].innerHTML=month;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function addMonth(obj) //增加月份
{
var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
var month=eval(myObj[2].innerHTML)+1;
if(month==13)
{
month=1;
addYear(obj);
}
myObj[2].innerHTML=month;
dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
}

function dateShow(obj,year,month) //显示各月份的日
{
var myDate=new Date(year,month-1,1);
var today=new Date();
var day=myDate.getDay();
var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split('-');
var length;
switch(month)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
length=31;
break;
case 4:
case 6:
case 9:
case 11:
length=30;
break;
case 2:
if((year%4==0)&&(year%100!=0)||(year%400==0))
length=29;
else
length=28;
}
for(i=0;i

function getValue(obj,inputObj) //把选择的日期传给输入框
{
var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;
if(obj.innerHTML)
inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
inputObj.nextSibling.nextSibling.style.display='none';
for(i=0;i

function dsMove(obj) //实现层的拖移
{
if(event.button==1)
{
var X=obj.clientLeft;
var Y=obj.clientTop;
obj.style.pixelLeft=X+(event.x-DS_x);
obj.style.pixelTop=Y+(event.y-DS_y);
}
}

入住日期: var myDate=new dateSelector();

myDate.inputName='start_date'; //注意这里设置输入框的name,同一页中日期输入框,不能出现重复的name。
myDate.display();

离店日期:

myDate.inputName='end_date'; //注意这里设置输入框的name,同一页中的日期输入框,不能出现重复的name。
myDate.display();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js简单的年月联动实现代码

    HTML 复制代码 代码如下: <SELECT NAME="SelTjYear"> </SELECT> <SELECT NAME="SelTjMonth"> </SELECT> 源码: 复制代码 代码如下: function vYearMonth(yearObjId, monthObjId) { var selYear = document.getElementById(yearObjId); var selMonth

  • javascript英文日期(有时间)选择器

    var languageCode = 'en';    // Possible values:     en,ge,no,nl,es,pt-br,fr                                 // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 

  • javascript 09年最新版的省市联动

    请选择 请选择 请选择 var areaData = "110000|北京市,110100|市辖区,110101|东城区,110102|西城区,110103|崇文区,110104|宣武区,110105|朝阳区,110106|丰台区,110107|石景山区,110108|海淀区,110109|门头沟区,110111|房山区,110112|通州区,110113|顺义区,110114|昌平区,110115|大兴区,110116|怀柔区,110117|平谷区,110200|县,110228|密云县,11

  • javascript 年月日联动实现核心代码

    复制代码 代码如下: var StartYear = 1980; var EndYear = 2500; function MonthAndDay() { this.initDDL = function(objYear,objMonth,objDay,hidYear,hidMonth,hidDay) { this.init(objYear,objMonth,objDay,hidYear,hidMonth,hidDay); this.SelectChange(objYear,objMonth,ob

  • javascript 表单日期选择效果

    Agenda BODY { FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; } A { FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000 } A:hover { TEXT-DECORATION: none; color: #000000 } A:link { TEXT-DEC

  • 实现一个年、月、季度联动SELECT的javascript代码

    请选择报告类型 月度报告 季度报告 半年报告 年度报告 function GetValue(){ var objlist = document.getElementsByTagName("SELECT"); var tmp = new Array(); var tap = objlist[0].options[objlist[0].selectedIndex].text; strTmp=""; var j = 1; for(var i=1;i0){ select.o

  • input 日期选择功能的javascript代码

    document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' <'); document.writeln(' '); document.writeln('

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

    鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

  • js实现年月日表单三级联动

    用Html实现人人网注册界面 ,Js实现生日栏表单三级联动 1. 效果 2.Html代码部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>人人网日期表单联动</title> <style> select { font:20px/40px '宋体'; } option {width: 100

  • javascript实现日期三级联动下拉框选择菜单

    由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimu

随机推荐