尝试使用 momentjs 设置日期格式 - 不工作

Question

目前我正在尝试使用工作正常的 moment.js 计算他的天数，但是当我尝试格式化日期时出现错误。

这是我的 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');
});

错误

TypeError: $fromDate.format is not a function

这是我正在查看的日期格式 22-Nov-2021

Answer 1

$formDate 是一个 jQuery 对象，因此它不支持 Moment 库中的 format() 方法。

您可以使用jQueryUI datepicker 库的datFormat 参数来设置日期格式：

$(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>