這篇文章將為大家詳細講解有關JavaScript如何輸出所選擇起始與結束日期，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具體如下：
一直在用公司的報表工具做報表，報表里最常用的查詢條件就是開始日期、結束日期。
自己會一點html和js，于是就想用html+JavaScript來實現選擇查詢日期，以及做出相應。
實現之后，覺得這個還是比較簡單的，N年前學的html和javascript，總算是派上用場了，人人都可以開發網頁。
這個代碼要在谷歌的chrome瀏覽器中，日期選擇才能有效果(代碼中的input元素Type屬性值date為HTML5元素，需要支持HTML5的瀏覽器運行)
代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="charset=gbk"></meta>
<script type="text/javascript">
function query()
{
var xx = document.getElementsByName("day");
var s="";
for (var i=0;i<xx.length ;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<hr>");
//alert(xx.length);
}
</script>
</head>
<body>
<table>
<tr>
<td name="day">開始日期: <input type="date" name="day" /></td>
<td name="day">結束日期：<input type="date" name="day" /></td>
<td><input type="button" value="查 詢" onclick="query()" />
</td>
</tr>
<tr>
<td><span id="sp"></span></td>
</tr>
</table>
</body>
</html>寫完這個代碼后，第一個感覺是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中就可以了。
關于“JavaScript如何輸出所選擇起始與結束日期”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
