HTML input date calendar

admin發表於2018-10-21
HTML
將<input>標籤的type屬性值設定為date即可建立日期calendar控制元件。

calendar控制元件是HTML5新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="date" name="date"> 
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

上面的程式碼可以建立年月日日期控制元件，執行效果截圖:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/171329hhwral0clo28chhr.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

控制元件還有一些其他屬性，下面分別做一下介紹:

（1）.value:規定控制元件的value屬性值，也就是控制元件的預設日期。

（2）.required（HTML5）:規定控制元件內容是必填的。

（3）.list（HTML5）:規定輸入域的datalist，具體參閱HTML datalist選項列表一章節。

（4）.form（HTML5）:規定輸入域所屬的一個或多個表單。

（5）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（6）.disabled：設定控制元件為不可用狀態。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  日期:<input type="date" value="2017-03-01" name="date">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

通過value屬性為控制元件設定預設的日期。

特別說明:定義的日期必須要格式正確，否則無效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  日期:<input type="date" required name="date">
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

required屬性只有一個屬性值"required"（可以省略），規定控制元件值是必填，否則報錯。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="date" list="softwhy" required name="date">
  <datalist id="softwhy">
    <option  value="2017-01-02" />
    <option  value="2017-01-03" />
    <option  value="2017-01-04" />
    <option  value="2017-01-05" />
  </datalist>   
  <input type="submit" value="提交表單"/>
</form>
</body>
</html>

<datalist>定義了可選的日期列表，點選列表項可以將日期寫入控制元件，效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/171409wtellde4ze7lsadv.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特別說明:定義的日期必須要格式正確，否則無效。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php"> 
  <input type="submit" value="提交表單"/>
</form>
  日期:<input form="ant" type="date" required name="date"> 
</body>
</html>

form屬性引用所屬表單的id，於是雖然控制元件在<form>之外，但依然是該表單的一部分。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php"> 
  <input type="submit" value="提交表單"/>
</form>
日期:<input form="ant" type="date" disabled name="date"> 
</body>
</html>

通過disabled屬性將控制元件設定為不可用狀態。

相關文章