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

【问题标题】：how to fake current date for jquery-ui-datepicker如何伪造 jquery-ui-datepicker 的当前日期
【发布时间】：2017-06-03 12:04:36
【问题描述】：

我正在实施一种自定义算法来禁用日期，这取决于一组规则，这些规则也取决于当前日期。为了测试我需要将当前日期设置为特定日期。

我发现这个thread 只是覆盖了javascripts Date 函数。我的问题是，如果我这样做，日历将不再按预期工作。大多数时候，所有的日子都消失了，有时所有的日子都被禁用了。

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

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

如何使用自定义当前日期测试日期选择器？它应该像设置 jsfiddle 一样简单（如果可能的话）： My current Fiddle

【问题讨论】：

自定义当前日期是什么意思？
假设今天是 2017 年 7 月 4 日。我希望日期选择器表现得好像今天是 2023 年圣诞节前夕。
还是不清楚。 今天是说...... 2023 年的圣诞前夜？
我不确定如何更清楚地说明这一点。您想让日期选择器“相信”今天是您可以定义的特定日期，而不是实际的当前日期。由于 datepicker 基于 javascripts Date 函数（我认为），如果你执行“new Date()”，你想让该函数返回与当前日期不同的日期。

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

我不太确定你需要做什么，我通常会更改操作系统时间，反正很简单：

  
// 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/>

【讨论】：

我有点困惑为什么我的解决方案不起作用而你的解决方案起作用。但确实如此！非常感谢 :) 除非没有人告诉我们为什么不应该使用它。我要奖励你的答案。
在之后调用 Date() 时，你如何覆盖与我如何传递参数有很大的不同。
如果您可以看到我没有检查是否是模拟日期，我会检查参数，如果没有，则模拟数据，如果不是，则使用参数进行通常的日期实例化

【解决方案2】：

设置此属性并尝试希望这对您有所帮助。

转到当前

输入：Boolean

默认：false

当为 true 时，当前日期链接将移动到当前选定的日期而不是今天。 代码示例：使用指定的 gotoCurrent 选项初始化日期选择器：

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

【讨论】：

谢谢。不幸的是，这并没有太大变化。无论如何，日历都会以那个假日期打开。即使这样，日期也丢失了，您也不能更改月份。

【解决方案3】：

我不会试图愚弄 DatePicker，而是在逻辑上这样做。也就是说，如果我正确理解你的问题。考虑以下设计：

您有一个函数，它接受日期输入，并在此基础上运行您的算法，该算法根据输入日期计算无效日期。假设你的无效日期计算器算法有效，那么真实的假日期无论如何都没有关系。
使用此算法，您始终可以根据真实或虚假的当前日期获得一组无效日期。
将该数组提供给 DatePicker，您可以定义要禁用的日期。（在beforeShowDay。）

效果很好，不需要 DatePicker hack。查看示例实现：

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 ]
    }
});

见小提琴here。

【讨论】：

对不起也不起作用。 defaultDate 只是设置应该打开的日期。我已经添加了我自己的beforeShowDay。问题是我的功能取决于当前日期。 IE。如果在当前日期和当前评估日期之间是另一个禁用日期，则执行某些操作。

【解决方案4】：

可能想看看$.datepicker.parseDate( format, value, options ) 功能。

可能会抛出一些异常：

如果格式或值为 null，则“参数无效”

“位置 nn 处缺少数字”，如果格式指示未找到的数值

“位置 nn 的未知名称”如果格式指示的日期或月份名称未找到

“在位置 nn 出现意外的文字”，如果格式指示的文字值随后未找到

'Invalid date' 如果日期无效，例如'31/02/2007'

这是一种检查您是否拥有有效日期的方法，并且可以根据您提供的日期值返回一个日期对象。然后，您可以在脚本中使用它。

一种更快的方法是将您的计算机（或测试虚拟机）日期和时间设置为未来或过去的日期和时间。这将传递给浏览器，然后像 now() 或 date() 这样的函数会给您带来截然不同的结果。

【讨论】：