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

Question

jQueryUI datepicker doesn't seem to play nicely with moment.js

I need my datepicker to preset to last 90 days, so FromDate should be 90 days ago and ToDate is today.

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

This throws an error

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

Is there something I am missing? It looks like a formatting issue?

Answer 1

From jQuery UI setDate doc:

Sets the date for the datepicker. The new date may be a Date object or a string in the current date format (eg, "01/26/2009" ), a number of days from today (eg, +7 ) or a string of values and periods ( "y" for years, "m" for months, "w" for weeks, "d" for days, eg, "+1m +7d" ), or null to clear the selected date.

In your code, you are passing a moment object as argument of setDate so the jQuery datepicker is not able to manage it. You can convert your moment objects to native JavaScript dat using toDate() method.

Here a live sample:

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <input type="text" id="FromDate"> <input type="text" id="ToDate">

Answer 2

I think you are using a different DatePicker as format , todayHighlight , autoclose , and orientation are not options for jQuery UI DatePicker.

Here is a pure jQuery UI example:

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

See More: jQuery UI API | DatePicker | setDate