input 起止时间_JavaScript输出所选择起始与结束日期的方法
本文实例讲述了JavaScript输出所选择起始与结束日期的方法。分享给大家供大家参考,具体如下:
一直在用公司的报表工具做报表,报表里最常用的查询条件就是开始日期、结束日期。
自己会一点html和js,于是就想用html+JavaScript来实现选择查询日期,以及做出相应。
实现之后,觉得这个还是比较简单的,N年前学的html和javascript,总算是派上用场了,人人都可以开发网页。
这个代码要在谷歌的chrome浏览器中,日期选择才能有效果(代码中的input元素Type属性值date为HTML5元素,需要支持HTML5的浏览器运行)
代码如下:
function query()
{
var xx = document.getElementsByName("day");
var s="";
for (var i=0;i
{
if(xx[i].tagName == 'TD')
s= s + xx[i].innerText;
//alert(xx[i].innerText);
else
{
if(xx[i].tagName == 'INPUT')
{
s += xx[i].value;
//由于没有选择日期,默认值是空串
//if(xx[i].value == null || xx[i].value == 'Undefined' || xx[i].value == "")
// alert(xx[i].value);
}
}
if( i % 2 == 1)
s+=";";
}
var yy = document.getElementById("sp");
yy.innerHTML = s;
//document.write("abcdefg
");
//alert(xx.length);
}
开始日期: | 结束日期: | |
写完这个代码后,第一个感觉是javascript是一个区分大小写的编程语言,在我印象中好像就VB、SQL是不区分大小写的,而其他的c#、java、python都是区分大小写的,今天在写js代码时,很大一个坑就是定义的变量是小写s,但是写出大写的S了,过了5分钟才发现总是报错:变量没有定义。。。
运行效果如下:
通过这个例子,我感觉自己对js 、html更加了解:
1、日期选择的输入,这里通过input标签的 type=date来实现。
2、当选择日期之后,点击按钮,这个按钮上的文字,是通过 input type=button的value属性来实现。
3、点击按钮之后,怎么响应?写上onclick数学=“处理函数” 就可以
4、这个onclick事件的响应函数要怎么写?这里点击之后,会输出选择的日期。
5、如何获取到选择的日期呢?这里通过document对象的 getElementsByName函数来找标签属性name="day"的标签。
6、找到这些标签之后,接下来判断上又遇到了麻烦。对于标签内容可以用 .innerText(只是文本而不包含其他标签),而对于网页的内容则是.innerHTML。另外,对于选择的日期值,可以用.value属性 来取。
7、接下来的一个问题是,既要取标签内容,又要取所选择的日期值,如何区分呢?
可以用.tagName属性来判断,如果是INPUT,那么用.value取值,如果是TD,那么用.innerText。
8、假设没有选择日期,那么获取到的value是什么呢?实验证明返回了空串,而不是null。如果变量s初始化,那么s的值就是Undefined。
9、字符串的赋值可以用+=运算符,那么代码s=s+xx ,可以改成s+=xx,这种写法普遍的写法,现在连sql语句也是支持的
10、对于代码中的if else语句,着实觉得写着不方便,尽然没有elseif或者elif,而是一定要else,然后再写if -else。。。
11、i%2 == 1这个是因为i是0、1、2、3,当到了i=1时,才在变量s中加上分号,效果:
开始日期: 2017-01-03;结束日期:2017-01-19;
12、输出结果放哪里?这里在报表中增加了1行:span标签,name=sp,一开始不会显示出来。当然,要把输出作为这个标签的内容,首先要找到标签,这里通过getElementById来找到标签,然后把输出结果放到.innerHTML中就可以了。
PS:这里再为大家推荐几款比较实用的天数计算在线工具供大家使用:
希望本文所述对大家JavaScript程序设计有所帮助。
input 起止时间_JavaScript输出所选择起始与结束日期的方法相关推荐
- input 起止时间_给表单验证控件添加结束时间不得小于开始时间的验证方法
//引入验证控件JS function getDate(strDate) { var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$) ...
- vue elementUI 时间控件优化 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前
时间控件优化 elementUI 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前 <el-form-item label="起始时间:" class=" ...
- input 起止时间_几种常用的控件(下拉框 可选框 起止日期 在HTML页面直接读取当前时间)...
下拉框 状态 ----请选择---- 制单 已提交 已审核 可选框 value="Y" checked="checked" id="isValid&q ...
- input 起止时间_CSS过渡时间
CSS过渡时间 基础知识 在了解CSS过渡时间之前,你应该先了解一下CSS的变形动画,可以参考之前的一篇博客. 我们的元素在属性发生变化时,如果没有特地的为它设置过渡时间,整个变化过程其实是以毫秒级别 ...
- input 起止时间_完整的时间(开始和结束时间)输入框验证js
1.html (1)时间输入框 当使用时间插件改变时间时,会触发onchange()事件 起始时间: οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd HH ...
- input 起止时间_input时间输入框小解
date 年月日 month 年月 week 年周(ios上不可用,android部分会显示当前是第几周) time 时分(ios不显示时/分的字样) datetime 为一输入框,基本 ...
- mysql起止时间怎么写_【Mysql 学习】日期函数函数
--curdate()返回当前日期mysql> select curdate(); +------------+ | curdate() | +------------+ | 2011-01- ...
- java当前时间转化毫秒_Java中将毫秒转化为日期的方法
Java中将毫秒转化为日期的方法 将毫秒转化为日期 import java.awt.BorderLayout; import java.awt.Frame;import java.awt.TextAr ...
- java 自然周_java 使用Calendar类计算每月有多少自然周,并输出每周的开始和结束日期...
思路:首先是获取该月的实际天数,然后从1号遍历直至该月最后一天,利用Calendar类找出该日是一周中的第几天, (1)若该日是周日,则视为一周结束,并用该日期减去6找到该周的开始日期,若相减结果小于 ...
最新文章
- SUBSTRING函數用法
- 基于深度学习的OCR-from 美團技術團隊
- 浅析网站域名申请注册的四种常见方式
- 存在于实数域的微观粒子5-可分类性
- set nocount on
- 包邮送 36 本书,已全部打包好!
- E:Johnny and Grandmaster
- python实现贝叶斯分类器_python实现简单的朴素贝叶斯分类器
- c#:mysql高效查询_C# LLSQL快速查询框架
- hosts文件作用及如何修改hosts文件
- winform安装包签名
- ARCore快速入门--在模拟器(Emulator)上运行AR应用
- centos官网下载地址
- 计算机专业群名有内涵,有内涵高大上的群名
- Exchange Server 2013 共享邮箱
- 【UV打印机】RYPC打印软件教程(三)-参数设置
- 压测报502 badgateway问题解决
- PCF8574AT的I2C地址和单独IO操作
- 网络io和磁盘io_在磁盘IO上,第1部分:IO的风味
- 微信小程序如何添加业务域名