datpicker custom date change format

Question

i have a working cusom button 'CSA' to display todays date + 6 months, but the date gets displayed as 2014-8-18. Now what i wish is 2014-08-18 and this for every month, 2 digits for every month.... working 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

You can adjust your code to this:

(date.getMonth()+7 < 10 ? '0'+date.getMonth()+7: date.getMonth()+7)

I forgot the fact that we wrap around to the next year if it's the second half of the year. Also if it's more than 6 months say 20 months then that's an issue too. Here's where the mod operator(%) comes in handy. It gives you the remainder when dividing by the right hand side (for examples see documentation).

Let's make a variable called monthsToAdd

Then you can say

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

So the full code would be:

$(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);
      }
  });
});

I just realized that this is in the wrong scope. So:

$(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);
      }
  });
});

Here's my fiddle

Answer 2

I recommend using DateJS. This will also handle your "edge cases" such as leap years.

Here's an example:

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

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