datpicker пользовательский формат смены даты

Question

У меня есть рабочая кнопка cusom 'CSA' для отображения сегодняшней даты + 6 месяцев, но дата отображается как 2014-8-18. Теперь то, что я хочу это 2014-08-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); 

Ref. https://code.google.com/p/datejs/wiki/APIDocumentation