JS实现动态的日期选择表单

最新推荐文章于 2023-11-12 20:42:30 发布
最新推荐文章于 2023-11-12 20:42:30 发布
阅读量2.4k 收藏 2
点赞数
文章标签： date javascript function border action input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netleaf/article/details/1743366
版权

JS实现动态的日期选择表单,使用方法:

  showDateSelect("date1")

其中参数为表单项select的名称,然后可以用date1.value获取选择的日期.

 

<html>
<head>
<title> 动态的日期选择表单 </title>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
<script language="JavaScript">
<!--
function yearList(num){
 var d=new Date();
 var t=d.getFullYear();
 var yStr="";
 for(var i=t-num;i<=t+num;i++){
  yStr=yStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
 }
 return yStr;
}
function monthList(){
 var d=new Date();
 var t=d.getMonth()+1;
 mStr="";
 for(var i=1;i<=12;i++){
  mStr=mStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
 }
 return mStr;
}
function dateList(fName){
 var d=new Date();
 var t=document.all[fName+"_dd"].value==""?d.getDate():document.all[fName+"_dd"].value;
 d=new Date(document.all[fName+"_yy"].value+"/"+document.all[fName+"_mm"].value+"/1");
 dStr="";
 for(var i=1;i<=31;i++){
  d.setDate(i);
  if(d.getDate()!=i){break;}
  dStr=dStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
 }
 document.all[fName+"_dx"].innerHTML="<select name='"+fName+"_dd' οnchange='javascript:setDateValue(/""+fName+"/");'>"+dStr+"</select>";
}
function setDateValue(name){
 var dValue=document.all[name+"_yy"].value+"-"+document.all[name+"_mm"].value+"-"+document.all[name+"_dd"].value;
 document.all[name].value=dValue;
}
function showDateSelect(name){
 document.write("<select name='"+name+"_yy' οnchange='javascript:dateList(/""+name+"/");setDateValue(/""+name+"/");'>"+yearList(10)+"</select>");
 document.write("<select name='"+name+"_mm' οnchange='javascript:dateList(/""+name+"/");setDateValue(/""+name+"/");'>"+monthList()+"</select>");
 document.write("<span id='"+name+"_dx'><select name='"+name+"_dd'>"+"</select></span>");
 dateList(name);
 document.write("<input type='hidden' name='"+name+"' value=''>");
 setDateValue(name);
}
//-->
</script>
</head>

<body>
<center><h3>动态日期选择表单示例</h3></center>
<table align="center" width="300" cellspacing="1" cellpadding="5" border >
<FORM METHOD=POST ACTION="" οnsubmit="alert('date1:'+this.date1.value+'/ndate2:'+this.date2.value+'/ndate3:'+this.date3.value);return false;">
 
<tr>
 <td>日期1: <script language="JavaScript">showDateSelect("date1");</script></td>
</tr>
<tr>
 <td>日期2: <script language="JavaScript">showDateSelect("date2");</script></td>
</tr>
<tr>
 <td>日期3: <script language="JavaScript">showDateSelect("date3");</script></td>
</tr>
<tr>
 <td><CENTER><INPUT TYPE="submit" value="SUBMIT"></CENTER></td>
</tr>
</FORM>
</table>
</body>
</html>

netleaf
关注
javascript 表单日期选择效果
10-30
javascript 表单日期选择效果
javascript 表单日期选择
04-26
javascript 表单日期选择
17个Javascript日期选择器
weixin_30895603的博客
03-30 153
用键盘输入日期数字快，还是用鼠标操作JavaScript日期选择器进行选择快呢？似乎并没有人进行这样无聊的统计。但在表单中需输入日期的地方增加一个Javascript日期选择器被认为是一项提升用户体验的良好设计，毕竟，这是增加，而不是替换。让各种不同操作习惯的用户都有自己的选择。 17个Javascript日期选择器，也许在你下一次要优化你的网站设计时能用到:) 1. Aeron Calend...
日期输入表单
sinat_31250617的博客
11-23 2798
日期输入表单 选择开始时间与结束时间，并可以提示“开始时间不能晚于结束时间，请重新选择”。需要引入jQ和datepicker。 起始时间早于结束时间时正常选择，无提示。 起始时间晚于结束时间时正常选择，提示重新选择。 --> div id="starttime_main" class="control-group"> label class="control-label"
表单中日期选择、年月日时分秒的选择
hello，是翠花呀
08-04 1万+
直接提供方法 JS代码：（选择年月日）(function(){ var d=document, w=window, isIE=w.navigator.appVersion.indexOf("MSIE")>-1, now=new Date(), nowM=now.getMonth(); nowY=now.getF
JavaScript实现移动端滑动选择日期功能
10-22
JavaScript实现移动端滑动选择日期功能的知识点主要包括以下方面： 1. 基于sui-mobile的移动端实现：sui-mobile是一个基于jQuery Mobile和Bootstrap的前端开发框架，主要用于快速开发移动端Web应用。在本文中，...
原生js实现日期选择插件
11-20
【原生JS实现日期选择插件】是一种使用纯JavaScript编写的用于选取日期的交互组件。在前端开发中，这样的插件通常用于表单输入，让用户能够方便地选择日期，而不是手动输入。以下是对该插件实现原理的详细解析： 1....
javascript实现的日期选择器
04-04
4. **CSS样式**：通过JavaScript动态改变元素的CSS属性，如`style.display`，实现日期选择器的显示和隐藏。 5. **循环与条件判断**：在遍历日期或处理用户输入时，会用到循环（`for`、`while`）和条件语句（`if......
JavaScript实现的日期控件具体代码
10-26
总的来说，这个JavaScript日期控件通过自定义的CSS和JavaScript实现了动态的日历显示，允许用户方便地选择日期并将其插入到指定的输入字段。这样的控件在网页表单中非常常见，特别是在需要用户输入日期的场景下，极...
html js 日期表单,一个表单日期输入的JS脚本 非常实用
weixin_33376046的博客
06-26 680
var DS_x,DS_y;function dateSelector()//构造dateSelector对象，用来实现一个日历形式的日期输入框。{var myDate=new Date();this.year=myDate.getFullYear(); //定义year属性，年份，默认值为当前系统年份。this.month=myDate.getMonth()+1; //定义month属性，月份，...
表单中输入日期
03-16
NULL 博文链接：https://djlijian.iteye.com/blog/409713
form表单日期输入控件
03-01
form表单日期输入控件，用于输入form表单中的日期时间。
动态设置筛选选择条件（时间，日期，时间段，单选，多选，不限层级的树状结构选择）
03-20
动态配置筛选条件，仿照58，京东筛选框设计，动态配置筛选条件，Buidler模式设置数据源，状态模式设置具体筛选类型，工厂模式创建筛选对象，支持异步设置数据源，支持自行扩展筛选条件类型
多个JS表单日期组件
04-03
多个JS表单日期组件
JS日期时间选择器
热门推荐
yanwushu的博客
08-06 2万+
本文介绍一种日期和时间选择器的用法。此选择器由jqueryUI实现，支持精确到毫秒的时间选择。此选择器项目地址为http://trentrichardson.com/examples/timepicker/ Demo地址为：http://www.helloweba.com/demo/timepicker/ 效果图 另外关于js时间选择器还可以参考其他项目 http://www.
使用日期和时间表单帮助方法
qwbtc的博客
07-28 1890
你可以选择不使用生成 HTML5 日期和时间输入框的帮助方法，而使用生成日期和时间选择列表的帮助方法。生成日期和时间选择列表的帮助方法和其他表单帮助方法有两个重要的不同点： 日期和时间不在单个 input 元素中输入，而是每个时间单位都有各自的元素，因此在 params 中就没有单个值能表示完整的日期和时间； 其他帮助方法通过 _tag 后缀区分是独立的帮助方法还是操作模型对象的帮助方
2.10 快速添加日期选择/多选/动作表单/地图等自定义表单 [iOS开发中的神兵利器]
互动教程网[www.hdjc8.com]
05-11 395
原文：http://coolketang.com/staticCoding/5a995103fe88c21c80b2e3fb.html1. 本节课将为您创建一个更加强大的表单。首先打开浏览器，并进入当前的页面，然后点击此处的下载按钮。 2. 在弹出的面板中，点击下载压缩包按钮，下载整个项目的源代码。 3. 压缩包下载之后，将被自动解压成一个文件夹。点击示例文件夹左侧的箭头，显示该文件夹下的所有文件...
js和html写时间选择器,JS日期和时间选择控件升级版(自写)
weixin_30709179的博客
06-03 923
鉴于网上找到的几个日期选择程序有些问题，遂着手重写一个程序，大部分还是借鉴前人的代码，添加了时间选择功能，隐藏会遮挡控件的标签select，object。开始本想使用window.createPopup()来弹出日历的选择，这样就可以跨过任何标签。不过做到中途发现用createPopup窗口实现理论上是行不通的：一是因为不在窗体里单击任何地方都会关闭窗口，而当用下拉框选择年份时，很有可能会单击到窗...
js设置日期和时间方法,js怎么设置时间
最新发布
chatgpt002的博客
11-12 381
大家好，本文将围绕js设置日期和时间方法展开说明，js怎么设置时间是一个很多人都想弄明白的事情，想搞清楚js设置时间延迟需要先了解以下几个事情。当前在 JavaScript 中管理日期和时间的方法是使用Date()对象。还行，但不太好。它具有从字符串创建Date()对象、格式化日期和时间以及取回特定值的方法。但它缺乏从日期中添加或减去时间的原生方法。时区支持也很糟糕。。它目前是第 3 阶段的提案，这意味着它与标准流程相距甚远。那么，我们先来看看Date()的一些用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值