datpicker自定義日期更改格式

Question

我有一個工作按鈕'CSA'顯示今天日期+ 6個月，但日期顯示爲2014年8月18日。現在我想是2014年8月18日，這對每月，2位數字爲每月.... 工作jsfiddle

$(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: "yy-mm-dd", 
      changeMonth: true, 
      changeYear: true, 
      yearRange: "2014:2034", 
      showButtonPanel: true, 
      beforeShow: function (input) { 
       setTimeout(function() { 
        var buttonPane = $(input) 
         .datepicker("widget") 
         .find(".ui-datepicker-buttonpane"); 

        var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">CSA</button>'); 
        btn.unbind("click") 
         .bind("click", function() { 
          //$.datepicker._clearDate(input); 
          //alert('custom text'); 
          $(input).datepicker("hide"); 
          var date = new Date(); 
          date.setMonth(date.getMonth() + 7); 
          $(input).val(date.getFullYear() + '-' + 
           date.getMonth() + '-' + date.getDate()); 

         }); 


        btn.appendTo(buttonPane); 

       }, 1); 
      } 
     }); 

}); 

Answer 1

你可以調整你的代碼是：（？date.getMonth（）+ 7 < 10 '0' + date.getMonth（）+ 7：date.getMonth（）+ 7）

如果是今年下半年，我忘記了下一年的情況。如果超過6個月說20個月，那麼這也是一個問題。這裏是mod運算符（％）派上用場的地方。它在右邊除以後給出餘數（例子見documentation）。

讓我們做一個叫monthsToAdd

變量

那麼你可以說

var resultingMonth = (date.getMonth()+monthsToAdd)%12, 
    displayedMonth = (resultingMonth < 10 ? '0'+ resultingMonth : resultingMonth); 

所以完整的代碼是：

$(function() { 
    var resultingMonth = (date.getMonth()+monthsToAdd)%12, 
     displayedMonth = (resultingMonth < 10 ? '0'+ resultingMonth : resultingMonth); 
    $(".datepicker").datepicker({ 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     changeYear: true, 
     yearRange: "2014:2034", 
     showButtonPanel: true, 
     beforeShow: function (input) { 
      setTimeout(function() { 
       var buttonPane = $(input) 
        .datepicker("widget") 
        .find(".ui-datepicker-buttonpane"); 

       var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">CSA</button>'); 
       btn.unbind("click") 
        .bind("click", function() { 
         //$.datepicker._clearDate(input); 
         //alert('custom text'); 
         $(input).datepicker("hide"); 
         var date = new Date(); 
         date.setMonth(displayedMonth); 
         $(input).val(date.getFullYear() + '-' + 
          date.getMonth() + '-' + date.getDate()); 

        }); 


       btn.appendTo(buttonPane); 

      }, 1); 
     } 
    }); 
}); 

我才意識到，這是在錯誤的範圍。所以：

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     changeYear: true, 
     yearRange: "2014:2034", 
     showButtonPanel: true, 
     beforeShow: function (input) { 
      setTimeout(function() { 
       var buttonPane = $(input) 
        .datepicker("widget") 
        .find(".ui-datepicker-buttonpane"); 

       var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">CSA</button>'); 
       btn.unbind("click") 
        .bind("click", function() { 
         //$.datepicker._clearDate(input); 
         //alert('custom text'); 
         var date = new Date(), 
          monthsToAdd = 7, 
          resultMonth =((date.getMonth()+monthsToAdd)%12), 
          displayMonth = (resultMonth < 10 ? '0'+ resultMonth: resultMonth); 
          $(input).datepicker("hide"); 
          $(input).val(date.getFullYear() + '-' + 
          displayMonth + '-' + date.getDate()); 

        }); 


       btn.appendTo(buttonPane); 

      }, 1); 
     } 
    }); 
}); 

這裏是我的fiddle

Answer 2

我建議使用DateJS。這也將處理你的「邊緣情況」，如閏年。

下面是一個例子：

var date = new Date(); 
var dataPlus6Months = date.addMonths(6); 

參考。 https://code.google.com/p/datejs/wiki/APIDocumentation