选择日期控件

最新推荐文章于 2022-02-11 17:20:54 发布
最新推荐文章于 2022-02-11 17:20:54 发布
阅读量922 收藏
点赞数
分类专栏： JavaScript 文章标签： border function class date table button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuwenbing/article/details/751626
版权

//选择时间by zwb
function SelDateById(ControlId)
{
  ArgDate=document.getElementById(ControlId).value;
  ReturnValue=window.showModalDialog("../SelDate.htm",ArgDate,
  "dialogWidth:336px;dialogHeight:280px;Resizable:0;help=no;status:No;center:yes;" );
  if (ReturnValue!=undefined)
    {
      document.getElementById(ControlId).value=ReturnValue;
   return false;
 }
  else
    {
      return false;
 }
}

//SelDate.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 
<HEAD>
<title>选择日期</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var toDay=new Date();
var toDayYear=toDay.getFullYear();
var toDayMonth=toDay.getMonth();
var toDayDate=toDay.getDate();
var selectedDate;
function FormOnLoad()
{
 var year;
 var month;
 var day
 var myDate=new Date();
 try{
  if (window.dialogArguments!=undefined && window.dialogArguments!="")
  {
   var ArgStr=window.dialogArguments;
   var DateArry=ArgStr.split(".");
   if(DateArry.length==3){
    DateArry=ArgStr.split("-");
    myDate=new Date(DateArry[0],DateArry[1]-1,DateArry[2]);
   }
  }
 }catch(e){}
 month=myDate.getMonth();
 document.frmDate.year.value=myDate.getFullYear();
 document.frmDate.month.selectedIndex=month;
 selectedDate=myDate.getDate();
 setDayTab(myDate.getFullYear(),month);
}
function setDayTab(year,month){
 var xxDate=new Date(year,month,1)
 var days=31;
 var d2
 var wd=xxDate.getDay();
 if(month<11){
  d2=new Date(year,month+1,1);
  days=(d2-xxDate)/(24*60*60*1000);
 }
 predays=31;
 if(month>0){
  d2=new Date(year,month-1,1);
  predays=(xxDate-d2)/(24*60*60*1000);
 }
 for(i=0;i<wd;i++){
  xx=predays-wd+i+1;
  document.all["DL1"+i].innerHTML=xx;
  document.all["DL1"+i].className="toDisDay";
 }
 var j;
 var x=1;
 for(j=1;j<=days;){
  for(;wd<7 && j<=days;wd++,j++){
   document.all["DL"+x+""+wd].innerHTML=j;
   if(year==toDayYear && month==toDayMonth && j==toDayDate){
    if(selectedDate==j){
     document.all["DL"+x+""+wd].className="toDaySelectedDay";
    }else{
     document.all["DL"+x+""+wd].className="toDay";
    }
   }else if(selectedDate==j){
    document.all["DL"+x+""+wd].className="toSeletedDay";
   }else{
    document.all["DL"+x+""+wd].className="generDay";
   }
   document.all["DL"+x+""+wd].style.cursor="hand";
   document.all["DL"+x+""+wd].dayValue=j;
   document.all["DL"+x+""+wd].title="双击选择"+year+"年"+document.frmDate.month[month].text+j+"日";
   document.all["DL"+x+""+wd].οnclick=clickToSelected;
   document.all["DL"+x+""+wd].οndblclick=BtnOKOnClick;
  }
  if(j<=days){
   wd=0;
   x++;
  }
 }
 j=1;
 for(;x<7;x++){
  for(;wd<7;wd++,j++){
   document.all["DL"+x+""+wd].innerHTML=j;
   document.all["DL"+x+""+wd].className="toDisDay";
  }
  wd=0;
 }
}
function clickToSelected(){
 if(event.srcElement.dayValue!=null){
  selectedDate=event.srcElement.dayValue;
  setDayTab(document.frmDate.year.value,document.frmDate.month.selectedIndex);
 }
}
function onMonthchange(){
 setDayTab(document.frmDate.year.value,document.frmDate.month.selectedIndex);
}
function btnOk(){
 window.returnValue=document.frmDate.year.value+"-"+(document.frmDate.month.selectedIndex+1)+"-"+selectedDate;
 window.close();   
}
function BtnOKOnClick() 
{
 if(event.srcElement.dayValue!=null){
  window.returnValue=document.frmDate.year.value+"-"+(document.frmDate.month.selectedIndex+1)+"-"+event.srcElement.dayValue;
  window.close();   
 }
}
</script>
<style type="text/css">
<!--
TD {
 font-size: 9pt;
}
th {
 font-size: 9pt;
}
option {
 color: #006699;
 border: 1px solid #003366;
}
select {
 font-size: 9pt;
 border: 1px solid #990000;
}
.toHead {
 color: #FFFFFF;
 background-color: #003366;
}
.toSeletedDay {
 color: #FFFFFF;
 background-color: #003399;
}
.toDisDay {
 color: #999999;
}
.toDay {
 border: 1px solid #990000;
}
.toDaySelectedDay {
 border: 1px solid #990000;
 color: #FFFFFF;
 background-color: #003399;
}
-->
</style>
</HEAD>
<BODY bgcolor="#CCCCCC" leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0" marginwidth="0" marginheight="0" οnlοad="FormOnLoad()">
<form name="frmDate" onSubmit="return false;">
  <div align="center">
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center">
<table border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" bordercolorlight="#000000" bordercolordark="#ffffff" width=90%>
            <tr>
              <td><table border="0" cellpadding="4" cellspacing="1" width=100%>
                  <tr>
                    <th colspan="7"> <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td><input name="year" type="text" id="year" size="6" maxlength="4" onBlur="onMonthchange()">
                          </td>
                          <td align="right"> <select name="month" οnchange="onMonthchange()">
                              <option value="1">一月</option>
                              <option value="2">二月</option>
                              <option value="3">三月</option>
                              <option value="4">四月</option>
                              <option value="5">五月</option>
                              <option value="6">六月</option>
                              <option value="7">七月</option>
                              <option value="8">八月</option>
                              <option value="9">九月</option>
                              <option value="10">十月</option>
                              <option value="11">十一月</option>
                              <option value="12">十二月</option>
                            </select> </td>
                        </tr>
                      </table></th>
                  </tr>
                  <tr>
                    <th class="toHead">日</th>
                    <th class="toHead">一</th>
                    <th class="toHead">二</th>
                    <th class="toHead">三</th>
                    <th class="toHead">四</th>
                    <th class="toHead">五</th>
                    <th class="toHead">六</th>
                  </tr>
                  <tr>
                    <td align="center" id="DL10">&nbsp;</td>
                    <td align="center" id="DL11">&nbsp;</td>
                    <td align="center" id="DL12">&nbsp;</td>
                    <td align="center" id="DL13">&nbsp;</td>
                    <td align="center" id="DL14">&nbsp;</td>
                    <td align="center" id="DL15">&nbsp;</td>
                    <td align="center" id="DL16">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="center" id="DL20">&nbsp;</td>
                    <td align="center" id="DL21">&nbsp;</td>
                    <td align="center" id="DL22">&nbsp;</td>
                    <td align="center" id="DL23">&nbsp;</td>
                    <td align="center" id="DL24">&nbsp;</td>
                    <td align="center" id="DL25">&nbsp;</td>
                    <td align="center" id="DL26">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="center" id="DL30">&nbsp;</td>
                    <td align="center" id="DL31">&nbsp;</td>
                    <td align="center" id="DL32">&nbsp;</td>
                    <td align="center" id="DL33">&nbsp;</td>
                    <td align="center" id="DL34">&nbsp;</td>
                    <td align="center" id="DL35">&nbsp;</td>
                    <td align="center" id="DL36">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="center" id="DL40">&nbsp;</td>
                    <td align="center" id="DL41">&nbsp;</td>
                    <td align="center" id="DL42">&nbsp;</td>
                    <td align="center" id="DL43">&nbsp;</td>
                    <td align="center" id="DL44">&nbsp;</td>
                    <td align="center" id="DL45">&nbsp;</td>
                    <td align="center" id="DL46">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="center" id="DL50">&nbsp;</td>
                    <td align="center" id="DL51">&nbsp;</td>
                    <td align="center" id="DL52">&nbsp;</td>
                    <td align="center" id="DL53">&nbsp;</td>
                    <td align="center" id="DL54">&nbsp;</td>
                    <td align="center" id="DL55">&nbsp;</td>
                    <td align="center" id="DL56">&nbsp;</td>
                  </tr>
                  <tr>
                    <td align="center" id="DL60">&nbsp;</td>
                    <td align="center" id="DL61">&nbsp;</td>
                    <td align="center" id="DL62">&nbsp;</td>
                    <td align="center" id="DL63">&nbsp;</td>
                    <td align="center" id="DL64">&nbsp;</td>
                    <td align="center" id="DL65">&nbsp;</td>
                    <td align="center" id="DL66">&nbsp;</td>
                  </tr>
                </table></td>
            </tr>
          </table>
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="80">
<input name="按钮" type="button" value="确定" οnclick="btnOk()">
              </td>
              <td><input type="button" value="取消" οnclick="window.close();"></td>
            </tr>
          </table></td>
      </tr>
    </table>
  </div>
</form>
</BODY>
</HTML>

zhuwenbing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript 日期选择控件 [My97DatePicker]
02-29
个人推荐一个非常好用的网页前台日期选择控件。 非常方便，强力推荐！
FRM计算器使用流程你知道吗？
rongyuejiaoyu的博客
07-22 327
金融计算器对于FRM考试有多重要，从进考场必备用品就可以看出来。 准考证，计算器是必须带的，忘了准考证，你就只能明年再战，忘了计算器，哪怕你是学神，想要通过考试大概率也是要烧香的。 FRM考试与其他类型的考试有所不同，因为考试大多数为计算型的题，一般要使用计算器。 那么，FRM考试有专用的计算器吗？FRM考试计算器又该怎样使用呢？下面，融跃带你作详细了解。 FRM考试德州仪器 BA II Plus 是GARP协会指定在考试过程中使用的计算器。其他非指定的计算器都是不允许在考试中使用的！ 根据协会官网要求，共
系统学习前端之FormData详解
weixin_34228387的博客
08-25 1696
FormData 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用ap...
计算机的次要功能,FRM考试时所用计算器的操作指南
weixin_35864328的博客
07-28 398
原标题：FRM考试时所用计算器的操作指南FRM考试费用采取"Early Bird",越早报名越便宜.建议大家尽早报名!2017年11月份FRM报名时间从5月1日开始，请各位考友悉知!尽管FRM考试中的计算器型号已经被协会规定了，依然有不少考生在这几个型号中纠结。这些计算机和我们以前在中学期间常用的计算器使用起来还是有所不同的，对于金融相关计算非常方便。这些都是比较符合中国人思维习惯的专业财务计算器...
Appium滑动选择日期
qq_33840688的博客
02-11 2731
Appium封装对日期控件的操作 在app中针对日期控件的常见处理方式 如果是第三方库，并且有公开的api接口，就可以直接使用python或者android的uiautomator这个工具直接去调用，从而设置日期的值，避免从界面上操作，效率非常高 通过界面方式进行滑动选择操作，这种方式比较通用，没有api也可以直接使用，但比较麻烦，编程和操作效率都比较低 from appium import webdriver ​ ​ def select_date(year, month): .
date_format(date,frm) 详解
cuizhu0832的博客
05-26 225
DATE_FORMAT(date,format) Formats the date value according to the format string...
日历时间选择 开始时间到结束时间
weixin_47766946的博客
05-31 1291
日历时间选择 开始时间到结束时间 文章目录前言一、使用步骤1.编写activity_main.xml2.自定义日历样式 新建date.xml文件3.编写Java里MainActivity类4.Java里新建类DoubleDatePickerDialog总结 前言 1.效果图 一、使用步骤 1.编写activity_main.xml 代码如下（示例）： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=
Cypress系列（15）- Cypress 元素定位选择器
qq_33801641的博客
06-08 3250
如果想从头学起Cypress，可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 做 UI 自动化测试，每个测试用例都会包含对元素的操作 健壮、可靠的元素定位策略可以保障测试成功率的提高 相对于其他测试框架来说，Cypress 提供了特别的定位策略，让你无须过多担心因定位失败而导致的测试失败 ...
滑动选择日期
leigong2013的专栏
12-30 583
最近做项目要做滑动选择日期，于是花了时间做了分享一下吧
QT自定义的日期选择控件
07-21
QDateTimeEdit 或 QCalendarWidget 不好操作，美化界面时都比较难实现，很多效果实现不了，就有了想要自定义一个日期选择的控制，操作简单，界面可以结合整体界面的样式通过QSS美化。提供自定义的日期控制源码、demo...
Web选择日期时间控件
02-05
1、极好的用于WEB页面的选择日期、时间的javascript控件。 2、包含4个javascript函数，其中Calendar.js,CalendarSetup.js是必须的,视情况使用calendar-zh.js(中文)或calendar-en.js(英文) 3、有8个不同的css文件，定义了不同的的页面风格 4、有1 个范例Calendar.html,已经在FireFox(3.0.6)、IE7、Opera9.63、Chorme2.0.156.1中测试通过。 5、在使用时注意定义相关HTML元素的ID，同时，Calendar.setup时一定是在页面最后加载
c# 可输入可选择时间日期控件
01-25
c# 可输入可选择时间日期控件。包含源代码与编译好的DLL，功能用户可以再次开发，实现可输入与可以选择功能
JS日历控件(可选多个日期、很简单)
12-01
提供多日期选择操作，只有一个关联js文件，简单易懂，对兼容性要求高的项目比较实用，适合初学者
日期选择时间控件 很强悍的
09-24
日期选择时间控件 里面有好几个可以选择 自己随便选 欢迎来下载 O(∩_∩)O~
日期时间选择控件（可以只显示日期选择或者只显示时间选择）
05-22
可以直接在项目中使用的日期时间选择DEMO，demo结构简单
选择日期控件UncCalendar.zip
04-10
兼容ie的日期选择解决方案。使用ie时js调用日期可用。使用非ie时html5的date属性可用。日期选择兼容ie。
java swing 时间日期选择控件
06-30
使用纯java swing 编写的日期时间选择控件,免去了以前的手动输入造成的输入错误,输入丢失的不必要的错误
Android 非常漂亮的滚动选择日期控件.zip
最新发布
07-17
Android 非常漂亮的滚动选择日期控件
JAVA Swing日期选择控件datepicker
04-15
1、JAVA Swing日期选择控件datepicker 2、附带该控件的使用
excel日期选择控件
05-23
Excel 中没有内置的日期选择控件，但可以通过以下两种方法来实现： 1. 使用数据验证功能来限制用户输入日期，并且提供日期格式的提示。可以按照以下步骤进行设置： - 选中需要添加日期选择控件的单元格 - 点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值