前言：
在實際項目開發中，日期選擇是一個十分常見而且重要的問題，在表單中設計到日期的驗證時，如果讓用戶自己輸入時間的話，那么使用正則進行驗證其正確性是不可取的，因為他一般只能驗證日期的格式，無法准確的驗證其日期正確性。此時可以使用日期選擇器組件來幫助我們完整。
用法：
使用日期在選擇其組件其實很簡單，我們只需要在*.html文件里面引入日期選擇器的*.js文件，並在input輸入框中設置'onclick'事件即可。
演示：
現在我使用兩種日期選擇器組件進行演示，：
第一個是：My97DatePicker，下載鏈接：http://files.cnblogs.com/files/XYQ-208910/My97DatePickerBeta.zip
第二個是自定義的日期選擇器代碼，我將其放在MyCustomDatePicker文件中：下載鏈接：http://files.cnblogs.com/files/XYQ-208910/MyCustomDatePicker.zip
測試代碼如下：
方式一：使用My97DatePicker
PickDdate.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="description" content="pick date!"> <meta name="keywords" content="javascript,html,css"> <!--引入My97DatePicker日期組件的js文件 --> <script type="text/javascript" src="My97DatePicker/WdatePicker.js"> </script> <title>日期選擇器的使用</title> </head> <body> <!--觸發事件使用My97DatePicker日期組件 --> <font color="green">Pick Date:</font><input type="text" onClick="WdatePicker()" readonly="readonly"> </body> </html>>
效果圖：
方式二：使用MyCustomDatePicker
PickDdate.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="description" content="pick date!"> <meta name="keywords" content="javascript,html,css"> <!-- 引入使用自定義的日期組件的就是文件 --> <script type="text/javascript" src="MyCustomDatePicker/Calendar.js"> </script> <title>日期選擇器的使用</title> </head> <body> <!-- 觸發事件使用日期組件 --> <font color="red">Pick Date:</font><input type="text" onclick="fPopCalendar(event,this,this)" readonly="readonly"> </body> </html>>
效果圖：
完整代碼下載：http://files.cnblogs.com/files/XYQ-208910/pickDate.zip