Javascript – dd-MM-yyyy date format with moment.js

datepickerjavascriptjquerymomentjs

Would like to get date format like 12-September-2017 after adding months with moment.js.
I'm using datepicker for date fields.

current output is Th-10-yyyy.

Also, getting warning

moment.min.js:6 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

$(document).on("change", "#inputmonthadded", function (evt) {

    var input_value_inputstartdate = $('#inputstartdate').val();
    var input_value_inputmonthpurchased = $('#inputmonthpurchased').val();
    var input_value_inputmonthadded = $('#inputmonthadded').val();

    if (typeof input_value_inputstartdate != 'undefined' && input_value_inputstartdate) {

        var inputstartdate = moment(input_value_inputstartdate);

        var portalexpdate = inputstartdate.add(input_value_inputmonthadded, 'months');

        var formatedportalexpdate = portalexpdate.format('dd-MM-yyyy');

        $('#inputportalexpirydate').val(formatedportalexpdate);

    }
    else {

        $('#inputportalexpirydate').val('');
    }

});

Best Answer

You have to use:

var formatedportalexpdate = portalexpdate.format('DD-MMMM-YYYY');

as stated in the format docs.

Moment tokens are case sensitive, dd stands as day of the week, while DD stands for day of the month, use MMMM to get full month name and YYYYto get the 4 digit year.

Use moment(String, String) instead of moment(input_value_inputstartdate) to avoid Deprecation warning while parsing input_value_inputstartdate, in your case you can do something like:

var inputstartdate = moment(input_value_inputstartdate, 'DD-MMMM-YYYY');

The full code could be like the following:

$(document).on("change", "#inputmonthadded", function (evt) {
  var input_value_inputstartdate = $('#inputstartdate').val();
  var input_value_inputmonthpurchased = $('#inputmonthpurchased').val();
  var input_value_inputmonthadded = $('#inputmonthadded').val();

  if (typeof input_value_inputstartdate != 'undefined' && input_value_inputstartdate) {
    var inputstartdate = moment(input_value_inputstartdate, 'DD-MMMM-YYYY');
    var portalexpdate = inputstartdate.add(input_value_inputmonthadded, 'months');
    var formatedportalexpdate = portalexpdate.format('DD-MMMM-YYYY');
    $('#inputportalexpirydate').val(formatedportalexpdate);
  }
  else {
     $('#inputportalexpirydate').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<input type="number" id="inputmonthadded">
<input type="text" id="inputstartdate" value="12-September-2017" readonly>
<input type="text" id="inputportalexpirydate" readonly>
<input type="text" id="inputmonthpurchased">

Related Topic