Trying to set date format using momentjs

Currently I am trying to calculate he days using moment.js that is working fine but when I am trying to format the date I am getting error.

Here is my jsfiddle link

 $fromDate.datepicker().on('change', function () {
    $toDate.datepicker('option', 'minDate', $(this).val());

    $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
    $fromDate.format('YYYY-MMM-DD');
});

Error

TypeError: $fromDate.format is not a function

This is the date format I am looking 22-Nov-2021

CodePudding user response：

$formDate is a jQuery object, so it does not support the format() method, which is part of the Moment library.

To do what you require you can use the datFormat argument of the jQueryUI datepicker library to set the date format:

$(function() {
  let $fromDate = $('#fromdate'),
    $toDate = $('#todate'),
    $numberDays = $('#numberdays');

  $fromDate.datepicker({
    dateFormat: 'yy-mm-dd'
  }).on('change', function() {
    $toDate.datepicker('option', 'minDate', $(this).val());
    $numberDays.val(calculateDateDiff($toDate.val(), $(this).val()));
  });

  $toDate.datepicker({
    dateFormat: 'yy-mm-dd'
  }).on('change', function() {
    $fromDate.datepicker('option', 'maxDate', $(this).val());
    $numberDays.val(calculateDateDiff($(this).val(), $fromDate.val()));
  });;

  function calculateDateDiff(endDate, startDate) {
    if (endDate && startDate) {
      let e = moment(endDate),
        s = moment(startDate);

      return e.diff(s, "days");
    }

    return null;
  }
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
  <div class="row">
    <div class="col-12 form-group has-feedback">
      <label>From <span class="text-danger">*</span></label>
      <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="YYYY-MM-DD" name="fromdate">
    </div>
    <div class="col-12 form-group has-feedback">
      <label>To <span class="text-danger">*</span></label>
      <input type="text" class="form-control has-feedback-left" id="todate" placeholder="YYYY-MM-DD" name="todate">
    </div>
    <div class="col-12 form-group has-feedback">
      <label>Number of days <span class="text-danger">*</span></label>
      <input type="text" class="form-control has-feedback-left" name="numberdays" id="numberdays" disabled>
    </div>
  </div>
</div>