jQuery Datepicker：setDate 不是函数

Posted 2023-02-24

【中文标题】jQuery Datepicker：setDate 不是函数

【英文标题】：jQuery Datepicker: setDate is not a function

【发布时间】：2016-11-01 10:36:48

【问题描述】：

我目前正在尝试使内联日期选择器对象与日期输入交互，并且除了一件事之外已经管理了所有内容。当我尝试使用输入的更改事件时，它会抛出一个错误：

Uncaught TypeError: $.start_widget.setDate is not a function

我的 Django 模板/jQuery 代码如下，包含在插入文档头部的脚本标签中：

$(document).ready(function()

  % for string in datepickerstrings %
    jQuery. string _widget = $('#datepicker- string ');

    $. string _widget.datepicker(
      inline: true,
      altField: '#event- string ',
      onSelect: function (date, instance) 
        $('#event- string ').val(date);
      
    );
    $. string _widget.hide();

    $('#event- string ').focusin(function () 
        $. string _widget.show();
    );

    $('# string -close').on("click", function (e) 
        e.preventDefault();
        $. string _widget.hide();
    );

    $('#event- string ').change(function () 
        console.log("Changed date value from field: " + $(this).val());
        $. string _widget.setDate($(this).val());
    );
  % endfor %

);

然后在像这样发送到客户端之前对其进行处理（仅相关循环）：

$(document).ready(function()


    jQuery.start_widget = $('#datepicker-start');

    $.start_widget.datepicker(
      inline: true,
      altField: '#event-start',
      onSelect: function (date, instance) 
        $('#event-start').val(date);
      
    );
    $.start_widget.hide();

    $('#event-start').focusin(function () 
        $.start_widget.show();
    );

    $('#start-close').on("click", function (e) 
        e.preventDefault();
        $.start_widget.hide();
    );

    $('#event-start').change(function () 
        console.log("Changed date value from field: " + $(this).val());
        $.start_widget.setDate($(this).val());
    );

);

在我看来，$.start_widget-object 在更改事件处理程序之前已明确定义和初始化，但它会引发上述异常。 console.log 调用显示正确的日期。

我还尝试将 setDate 调用替换为：

$.start_widget.datepicker( "setDate", $(this).val() );

但是，我得到了相同的结果。我一直试图解决这个问题几个小时，但似乎无法自己解决。我的代码有什么问题？

编辑 1：根据 ImBack 的建议，我得到了这个错误：

Uncaught TypeError: date.getDate is not a function
    _setDate @ ui.datepicker.js:1077
    _setDateDatepicker @ ui.datepicker.js:243
    (anonymous function) @ ui.datepicker.js:1426
    each @ jquery-1.8.3.min.js:2
    each @ jquery-1.8.3.min.js:2
    $.fn.datepicker @ ui.datepicker.js:1424
    (anonymous function) @ (index):66
    dispatch @ jquery-1.8.3.min.js:2
    u @ jquery-1.8.3.min.js:2

【问题讨论】：

使用这个jQuery.start_widget.datepicker( "setDate", $(this).val());它会为你工作

@I'mBack 遗憾的是，它没有。我收到了相同类型的错误，但描述略有不同。我将它包含在问题的编辑中。

【参考方案1】：

尝试以下方法：

$(document).ready(function () 
    var start_widget = $('#datepicker-start').datepicker(
        inline: true,
        altField: '#event-start',
        onSelect: function (date, instance) 
            $('#event-start').val(date);
        
    );
    start_widget.hide();

    $('#event-start').focusin(function () 
        start_widget.show();
    );

    $('#start-close').on("click", function (e) 
        e.preventDefault();
        start_widget.hide();
    );

    $('#event-start').change(function () 
        console.log("Changed date value from field: " + $(this).val());
        start_widget.datepicker("setDate", $(this).val());
    );
);

我将您的widget 存储在一个变量中，然后以正确的方式调用setDate。

【讨论】：

我看不出这有什么改变。我将它存储为 jQuery 对象的公共成员，这样就可以在函数内部调用它。 .show() 和 .hide() 都已经按照我的方式工作了。如果确实存在差异（当然除了范围界定），您能向我解释一下吗？ :)

我怀疑jQuery 和$ 引用的是同一个东西，我的意思是如果它们是引用而不是副本。另外，我习惯于不污染“全球”范围。我还有一个担心：datepicker -> onSelect 和 $('#event-start').change(...) 看起来是递归的：你更改 datepicker 中的日期会触发 $('#event-start') 中的值更改，这会触发 setDate。

我确实尝试过，但是收到了同样的错误：Uncaught TypeError: start_widget.setDate is not a function。我认为 Datepicker 就是为此而设计的：它不会触发更改事件（例如：this question）。至于全球范围，我完全同意。这就是为什么我使用 jQuery 对象而不是“窗口”:)

【参考方案2】：

我自己解决了这个问题。显然，唯一需要做的就是将$(this).val() 转换为new Date($(this).val())，因为库无法自行将字符串解析为日期。这让我相信我有一个非标准版本的插件，因为文档清楚地说明了：

setDate(日期)

设置日期选择器的日期。新日期可以是日期对象或当前日期格式的字符串（例如，“01/26/2009”）、从今天开始的天数（例如，+7）或一串值和句点（“y " 代表年，"m" 代表月，"w" 代表周，"d" 代表天，例如，"+1m +7d")，或 null 以清除所选日期。