如何伪造jquery-ui-datepicker的当前日期

Question

I'm implementing a custom algorithm to disable dates depending on a set of rules that also depend on what the current day is. To test that I would need to set the current date to a specific date.

I found this thread that just overwrites javascripts Date function. My problem is that if I do that the calendar doesn't work as expected anymore. Most of the time all days are just missing, sometimes all are disabled.

var oldDate = Date;
Date = function (fake)
{
    if( ! fake ) return new oldDate('02/26/2017');

    return new oldDate(fake);
}
Date.prototype = oldDate.prototype;

How can I test the datepicker with a custom current date? It should be as easy as setting up a jsfiddle (if possible): My current Fiddle

Answer 1

I'm not so sure about what you need to do, I usually change operating system time, anyway, plain an simple:

 // DEMO mock date js browser // comment uncoment to play arround, if you need to automate with or without mock date plain an simple: mockDateTime('2018/02/02'); // with mock // mockDateTime() // no mock $('#date1').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: "m/d/yy" }); function mockDateTime(mockDate){ // to do: validate mock date if (mockDate !== undefined && mockDate.length > 0) { var __Date = Date; Date = undefined; Date = function() { // to do: more deep checks on arguments if (arguments.length > 0) { return new __Date(arguments[0], arguments[1], arguments[2]); } return new __Date(mockDate); }; Date.prototype = __Date.prototype; } } 

 #ui-datepicker-div { font-size: 12px; } 

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/> 

Answer 2

Set this property and try hope this one hep you.

gotoCurrent

Type: Boolean

Default: false

When true, the current day link moves to the currently selected date instead of today. Code examples: Initialize the datepicker with the gotoCurrent option specified:

$( ".selector" ).datepicker({
  gotoCurrent: true
});

Answer 3

Instead of trying to fool the DatePicker I would do it in logic. That is, If I understand your question correctly. Consider the following design:

1. You have a function, that accepts a date input, and based on that runs your algorithm which calculates invalid dates based on the input date. Be that real of fake date, doesn't matter works anyway, assuming your invalid date calculator algorithm works.

2. Using this algo, you can always have an array of invalid dates based on the real or fake current date.

3. Giving that array to DatePicker, you can define what dates to disable. (In the beforeShowDay .)

Works well, does not need DatePicker hack. See example implementation:

function calculateInvalidDatesBasedOnInputDate(inputDate) {
    // your algorithm
    // fake result here, to demonstrate how it works.
    return ["2/14/2017","2/19/2017","2/28/2017"];
}

var fakeCurrentDate = new Date("2017/02/02");

$('input').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "m/d/yy",
    defaultDate: fakeCurrentDate,
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('m/d/yy', date);
        return [ calculateInvalidDatesBasedOnInputDate(fakeCurrentDate).indexOf(string) == -1 ]
    }
});

See Fiddle here .

Answer 4

Might want to look at $.datepicker.parseDate( format, value, options ) feature.

A number of exceptions may be thrown:

• 'Invalid arguments' if either format or value is null
• 'Missing number at position nn' if format indicated a numeric value that is not then found
• 'Unknown name at position nn' if format indicated day or month name that is not then found
• 'Unexpected literal at position nn' if format indicated a literal value that is not then found
• 'Invalid date' if the date is invalid, such as '31/02/2007'

This is a way to check that you have a valid date and can return a date object built off the date value you've supplied. You can then use this in your script.

A faster way is simply to set your computer (or a test VM) Date & Time to a date and time in the future or past. This will be past to the browser and then functions like now() or date() will give you much different results.