How to spoof current date for jquery-ui-datepicker
I use my own algorithm to disable dates based on a set of rules that also depend on the current day. To check that I will need to set the current date to a specific date.
I found this thread that just overwrites the javascripts Date function. My problem is that if I do this, the calendar won't work as expected. In most cases, all days are simply missing, sometimes all are off.
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 try out a datepicker with a custom current date? It should be as easy as setting up a jsfiddle (if possible): My current Fiddle
source to share
I'm not so sure about what you need to do, I usually change the time in the operating system, anyway, just:
// 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/>
source to share
Set this property and try to hope you like it.
gotoCurrent
A type: Boolean
Default: false
When true, the current day link will jump to the currently selected date instead of today. Code examples: Initialize datepicker with gotoCurrent option:
$( ".selector" ).datepicker({
gotoCurrent: true
});
source to share
Instead of trying to trick the DatePicker, I would do it in logic. That is, if I understand your question correctly. Consider the following design:
-
You have a function that takes a date input, and based on that, it runs your algorithm that calculates invalid dates based on the input date. Whether it's a real fake date, it doesn't matter, works anyway, assuming your wrong date calculator algorithm is working.
-
Using this algorithm, you can always have an array of invalid dates based on the real or fake current date.
-
By providing this DatePicker array, you can determine which dates to disable. (B.
beforeShowDay
)
Works well, no need to hack DatePicker. See implementation example:
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 the Fiddle here .
source to share
You might want to take a look $.datepicker.parseDate( format, value, options )
.
There are a few exceptions:
- Invalid arguments if format or value is null
- 'Missing number at position nn' if the format specifies a numeric value that was not found
- 'Unknown name at position nn' if the format specifies a day or month name that was not found.
- 'Unexpected literal at position nn' if format specifies a literal value that was not found
- "Invalid date" if the date is not valid, for example "02/31/2007"
It is a way to check that you have a valid date and can return a date object built with the provided date value. Then you can use this in your script.
A faster way is to simply set the date and time of your computer (or test virtual machine) to a date and time in the future or in the past. This will be carried over to the browser and then functions like now()
or date()
will give you different results.
source to share