`

Select date

JavaScriptCSSMicrosoftJ# 
阅读更多

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<script language=javascript>
var DS_x,DS_y;

function dateSelector()  //构造dateSelector对象，用来实现一个日历形式的日期输入框。
{
  var myDate=new Date();
 
  this.year=myDate.getFullYear();  //定义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("<style type=text/css>");
  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("</style>");
 
  var M=new String(this.month);
  var d=new String(this.date);
 
  if(M.length==1&&d.length==1){
  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-0"+this.month+"-0"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
  else if(M.length==1&&d.length==2){
  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-0"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
   else if(M.length==2&&d.length==1){
  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-0"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}
   else if(M.length==2&&d.length==2){
  document.write("<input style='text-align:center;' id='DS_"+this.inputName+"' name='"+this.inputName+"' value='"+this.year+"-"+this.month+"-"+this.date+"' title=双击可进行编缉 ondblclick='this.readOnly=false;this.focus()' onblur='this.readOnly=true' readonly>");}


  document.write("<button style='width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;' type=button onclick=this.nextSibling.style.display='block' onfocus=this.blur()>选择日期</button>");

  document.write("<div style='position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible' onselectstart='return false;'>");
  document.write("  <div style='position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;' class=ds_font>");
  document.write("    <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
  document.write("      <tr align=center>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subYear(this) title='减小年份'>&lt;&lt;</td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=subMonth(this) title='减小月份'>&lt;</td>");
  document.write("        <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addMonth(this) title='增加月份'>&gt;</td>");
  document.write("        <td width=12% onmouseover=this.className='ds_border' onmouseout=this.className='' onclick=addYear(this) title='增加年份'>&gt;&gt;</td>");
  document.write("      </tr>");
  document.write("    </table>");

  document.write("    <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown='DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='dsMove(this.parentNode)' style='cursor:move;'>");
  document.write("      <tr align=center>");
  for(i=0;i<7;i++)
 document.write("      <td>"+week[i]+"</td>");
  document.write("      </tr>");
  document.write("    </table>");

  document.write("    <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");
  for(i=0;i<6;i++)
  {
    document.write("    <tr align=center>");
 for(j=0;j<7;j++)
      document.write("    <td width=10% height=16 onmouseover=if(this.innerText!=''&&this.className!='ds_border2')this.className='ds_border' onmouseout=if(this.className!='ds_border2')this.className='' onclick=getValue(this,document.all('DS_"+this.inputName+"'))></td>");
    document.write("    </tr>");
  }
  document.write("    </table>");

  document.write("    <span style=cursor:hand onclick=this.parentNode.parentNode.style.display='none'>【关闭】</span>");
  document.write("  </div>");
  document.write("</div>");

  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<obj.cells.length;i++)
  {
    obj.cells[i].innerHTML='';
    obj.cells[i].style.color='';
    obj.cells[i].className='';
  }
  for(i=0;i<length;i++)
  {
    obj.cells[i+day].innerHTML=(i+1);
    if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
      obj.cells[i+day].style.color='red';
    if(year==eval(selectDate[0])&&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))
      obj.cells[i+day].className='ds_border2';
  }
}

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

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);
  }
}
</script>
</head>

<body>
从 
<script language=javascript>
  var myDate=new dateSelector();
  myDate.year--;
 
  myDate.inputName='start_date';  //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。
  myDate.display();
</script>
 到 
<script language=javascript>
  myDate.year++;
  myDate.inputName='end_date';  //注意这里设置输入框的name，同一页中的日期输入框，不能出现重复的name。
  myDate.display();
</script>


</body>

</html>

分享到：
| message in struts
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    selectDate.rar

    【标题解析】：“selectDate.rar”这个标题暗示我们这是一个与日期选择相关的压缩包，很可能包含一个示例项目或代码库，用于在uni-app前端开发中处理日期选择功能。 【描述解析】：描述部分只给出了文件名“select...

    SelectDate.zip

    首先，"SelectDate.zip"包含一个名为"SelectDate-master"的文件夹，这通常意味着这是一个Git仓库的克隆版，可能包含了源代码、资源文件以及项目构建所需的配置。在这个项目中，开发者创建了一个自定义的日期选择器类...

    OC Control SelectDate(日期选择器).zip

    在iOS开发中，日期选择器（SelectDate）是一种常见的用户界面元素，用于让用户方便地选取日期。本项目“OC Control SelectDate.zip”显然是一个Objective-C（OC）开发的控件，它封装了一个自定义的日期选择功能。在...

    js选择时间控件-方便实用

    onclick="SelectDate(this)" 年月日，默认格式yyyy-MM-dd onclick="SelectDate(this,'yyyy 年')" 年份 onclick="SelectDate(this,'yyyy 年 MM 月')" 年月 onclick="SelectDate(this,'yyyy\-MM\-dd')" 年月日 onclick...

    DateSelect日期选择.zip

    本话题主要涉及一个名为"DateSelect日期选择.zip"的压缩包，它包含了一个用于简化日期选择功能的C++接口类。这个类是从CStatic类派生而来的，CStatic是MFC（Microsoft Foundation Classes）库中的一个基础控件，通常...

    mobileSelect.js

    《mobileSelect.js：一款强大的移动端滚动选择器》 在当今移动优先的设计趋势下，高效的用户交互体验至关重要。mobileSelect.js 是一个专为移动端设计的多功能滚动选择器，它旨在简化多选、级联选择和自定义功能的...

    jquery.jSelectDate.js 下拉列表式日期选择插件实例.rar

    jquery.jSelectDate.js 下拉列表式日期选择器插件实例，裸体版基本没有美化，其实这样更方便使用者自己美化，有些人可能会比较喜欢这种select列表式的日期选择功能，和个人习惯有关。功能介绍：1.支持闰年、大小月和...

    mobile-select-date：手机联动选择日期

    移动选择日期 手机联动选择日期效果图如下： 例子见 用法 &lt;!DOCTYPE&gt; ...link rel="stylesheet" type="text/css" href="../dist/mobile-select-area.css"&gt; &lt;script type="text/javascript

    MySQL DATE-FORMAT 函数完整实例和代码

    SELECT DATE_FORMAT(event_date, '%Y 年 %m 月 %d 日 %l:%i %p %W') AS formatted_date FROM events; ``` 这将显示带 AM/PM 和星期的完整日期，如 "2023 年 08 月 15 日 1:30 下午 Monday"。 **实例 10：** 只显示...

    mysql的日期和时间函数

     -&gt; ’Thursday’ MONTHNAME(date) 返回 date 的月份名： mysql&gt; SELECT MONTHNAME("1998-02-05"); -&gt; ’February’ QUARTER(date) 返回 date 在一年中的季度，范围为 1 到 4： mysql&gt; SELECT ...

    mysql日期函数总结

    SELECT DATE_FORMAT(NOW(), '%Y-%m-%d %H:%i:%s %W'); SELECT DATE_FORMAT('2008-08-08', '%W'); ``` 在上面的例子中，`%Y`代表四位数的年份，`%m`代表月份，`%d`代表月份中的天数，`%H`代表24小时制的小时数，`...

    几个实用的MySQL内置函数实用说明

    SELECT DATE_FORMAT(date, format); ``` - `date`: 需要被格式化的日期或时间值。 - `format`: 指定的格式化参数。该参数使用一系列占位符来表示不同的日期和时间元素，例如 `%Y` 表示四位数的年份，`%m` 表示两位...

    date_select.rar_dateSelect

    在IT行业中，日期选择器（Date Select）是一个常见的交互组件，尤其在网页开发中，它允许用户方便地选择日期，并将选定的日期值传递给后端或者显示在页面上。"date_select.rar_dateSelect"这个文件很可能是某种日期...

    DB2 日期数据库的sql语句

    #### 获取当前日期（Current Date） 在DB2中，`CURRENTDATE`函数可以用来获取当前系统的日期。这是一个非常实用的功能，在很多场景下都需要用到当前日期。下面是一个简单的示例： ```sql SELECT CURRENTDATE FROM ...

    MySql用DATE_FORMAT截取DateTime字段的日期值

    SELECT DATE_FORMAT(crt_time,'%Y-%m-%d') FROM ad_n_advertise_t 您可能感兴趣的文章:MySQL中日期比较时遇到的编码问题解决办法PHP以及MYSQL日期比较方法mysql 获取当前日期函数及时间格式化参数详解mysql unix准...

    greenplum常用命令

    SELECT date(date '20171018') - interval '18 days'; SELECT date '20171018' - interval '1 day 2 hours 20 minutes 30 seconds'; ``` ### 数学函数 #### 1. 绝对值：`abs` `abs` 函数返回数值的绝对值。 ```sql...

    SQL按照日、周、月、年统计数据的方法分享

    SELECT DATE_FORMAT(create_time, '%Y%m%d') AS days, COUNT(caseid) AS count FROM tc_case GROUP BY days; SELECT DATE_FORMAT(create_time, '%Y%m') AS months, COUNT(caseid) AS count FROM tc_case GROUP BY ...

    DateSelect.rar

    平时我们做QT应用程序时，大部分用的都是直接QCalendarWidget控件，但是这样效果比较理想，很多时候无法达到美工设计效果。本资源实现了年月左右翻页按钮定制化，实现了日期展示的圆形展示，通过重绘界面控件，实现...

    MySQL与Oracle的语法区别详细对比

    Oracle和mysql的一些简单... mysql&gt; select date_format(now(),’%Y-%m-%d’); mysql&gt; select time_format(now(),’%H-%i-%S’); 日期函数 增加一个月： SQL&gt; select to_char(add_months(to_date (‘20000101′,’yyy

    Mysql中通过生日计算年龄的多种方法

    以前使用mysql不是很多，对mysql的函数也不是很熟悉，遇到这个问题第一时间百度搜索，搜索到这两种方法，这两种方法是排在...SELECT DATE_FORMAT(NOW(), '%Y') - DATE_FORMAT(birthday, '%Y') - (DATE_FORMAT(NOW(), '

Magicbox
Global site tag (gtag.js) - Google Analytics