Question

jQueryUI datepicker似乎不能与moment.js很好地配合

我需要将日期选择器预设为持续90天，因此FromDate应该是90天之前，而ToDate是今天。

$('#FromDate').datepicker({
    format: 'dd-M-yyyy',
    todayHighlight: true,
    autoclose: true,
    orientation: 'auto bottom'
});

$('#ToDate').datepicker({
    format: 'dd-M-yyyy',
    todayHighlight: true,
    autoclose: true,
    orientation: 'auto bottom'
});

var todate = new moment();
var fromdate = new moment().subtract(90, "days");
$("#FromDate").datepicker("setDate", fromdate);
$("#ToDate").datepicker("setDate", todate);

这会引发错误

JavaScript runtime error: Object doesn't support property or method 'getTime'

我缺少什么吗？看起来是格式问题吗？

Answer 1

通过jQuery UI setDate文档：

设置日期选择器的日期。新日期可以是Date对象或当前date format中的字符串（例如"01/26/2009"），从今天起的几天（例如+7）或值和周期的字符串（"y"代表年份，"m"代表几个月，"w"代表星期，"d"代表几天，例如"+1m +7d"）或{{ 1}}清除所选日期。

在您的代码中，您要传递一个矩对象作为setDate的参数，因此jQuery datepicker无法对其进行管理。您可以使用toDate()方法将moment对象转换为原生JavaScript dat。

这里有一个现场样本：

null

$('#FromDate').datepicker({
  format: 'dd-M-yyyy',
  todayHighlight: true,
  autoclose: true,
  orientation: 'auto bottom'
});

$('#ToDate').datepicker({
  format: 'dd-M-yyyy',
  todayHighlight: true,
  autoclose: true,
  orientation: 'auto bottom'
});

var todate = moment();
var fromdate = moment().subtract(90, "days");
$("#FromDate").datepicker("setDate", fromdate.toDate());
$("#ToDate").datepicker("setDate", todate.toDate());

Answer 2

我认为您正在使用其他DatePicker，因为format，todayHighlight，autoclose和orientation不是jQuery UI DatePicker的选项。

这是一个纯jQuery UI示例：

$(function() {
  $('#FromDate').datepicker({
    dateFormat: 'dd-M-yy'
  });

  $('#ToDate').datepicker({
    dateFormat: 'dd-M-yy'
  });

  $('#FromDate').datepicker("setDate", "-90d");
  $('#ToDate').datepicker("setDate", "0");
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <p>From
    <input type="text" id="FromDate" />
  </p>
  <p>To <input type="text" id="ToDate" /></p>
</div>

查看更多：jQuery UI API | DatePicker | setDate

jQuery UI日期选择器setDate和moment.js

2 个答案: