【JQuery】DatePicker及日期相差幾天

使用JQuery前,需要引用Jquery元件及DatePicker元件

HTML 頁面
<form action="" method="post" name="form1">
<p class="style1">Icon Button</p>
從 西元 <input id="from_date" type="text" size="15" maxlength="12"  class="datepicker">   
&nbsp;&nbsp;至
西元 <input id="to_date" type="text" size="15" maxlength="12"  class="datepicker">    
<br/><br/>
<input name="diff_date" type="button" onClick="Date_substr();" value="日期相差天數">
<br/><br/><br/>
<p class="style1">下拉式Date</p>
西元  <input id="datepicker" type="text"  size="15" maxlength="12">
</form>

Javascript 部份
<script type="text/javascript"> 
  // DatePicker設定
 $(function() {
  $( ".datepicker" ).datepicker({
   dateFormat: 'yy/mm/dd',   //輸出格式
   changeMonth: true,   //可改變年
   changeYear: true,    //可改變月
   showOn: "button",    //值為 both 兩者都可以使用(下拉及點選icon)
   buttonImage: "datepicker/images/calendar.gif",   //Icon 路徑
   buttonImageOnly: true

  });

  $( "#datepicker" ).datepicker({
      dateFormat: 'yy-mm-dd'   //輸出格式
   });

 });
</script>

<script language=javascript>
//計算日期相差天數
function Date_substr()
{
   //定義起始 年月日
    var StartDate=$( "#from_date" ).val();
  //定義結束 年月日
    var EndDate=$( "#to_date" ).val();

alert('相差 '+ (DateDifference(StartDate,EndDate))+'天');
}
// 算出日期與日期間的差距有幾天
function DateDifference(StartDate,EndDate)
{

   var myStartDate = new Date(StartDate);
   var myEndDate = new Date(EndDate);

   // 天數，86400000是24*60*60*1000，除以86400000就是有幾天
     return (myEndDate - myStartDate)/ 86400000 ;

}
</script>

PS: 判斷日期合法性, 可參考 my blog: checkDate函數 使用

執行畫面(點選Icon)

執行畫面(按下Button)

執行畫面(下拉式Date)

參考資源 :
http://jqueryui.com/demos/datepicker/
官網  datepicker demo

http://docs.jquery.com/UI/Datepicker#options
官網  datepicker參數