3

我在所有表单上都定义了以下 jQuery 脚本。

$( "input:text.datepicker" ).datepicker({ 
    yearRange: "1900:+0",
    changeMonth: true,
    changeYear: true
});

基本上，这会在任何输入元素上调用日期选择器，该输入元素是文本类型并且具有类“datepicker”。

这在所有页面上都可以正常工作，除了我在下面描述的一种情况。

我必须通过 ajax 加载表单，然后将其显示在 jQueryUI 对话框中。在这个对话框中，如果我再次包含 java 脚本代码，我只能显示日期选择器。显然我不想包含两次代码。有没有办法让新加载的文本框以某种方式显示日期选择器？

谢谢

4

2 回答 2

11

一种选择是以不推荐的方式和事件使用on方法来初始化 Datepicker： liveclick

$('body').on('click', 'input.datepicker', function(event) {
    $(this).datepicker({
        showOn: 'focus',
        yearRange: '1900:+0',
        changeMonth: true,
        changeYear: true
    }).focus();
});

这段代码应该放在$(document).readysection中。

注意初始化后的showOn: 'focus'选项和触发focus事件。

演示：http: //jsfiddle.net/Mq93s/

于 2012-05-06T09:53:27.753 回答
2

这里的问题是，当执行日期选择器代码时，您的表单元素还不存在，因此它无法将其转换为日期选择器。您可以通过以下任一方式绕过此问题：

  1. 将 datepicker 代码移动到一个单独的函数中，然后您将从document.ready事件中的所有页面手动调用该函数。这样它只会被声明一次，你也可以在你的ajax页面中调用它，只有当ajax调用完成而不是ready事件时你才会调用它。
  2. 由于您知道要在表单中加载什么，因此您可以将给定的输入转换为日期选择器。这不是一个干净的解决方案，因为如果您要更改日期选择器中的某些内容，至少有两个地方可以修改。

这两种方法都是有效的，选择取决于您，因为您知道哪个版本更适合您的项目:)

于 2012-05-06T10:12:40.920 回答