jquery加载附加日期选择器功能答案

【问题标题】：jquery load append datepicker functionjquery加载附加日期选择器功能
【发布时间】：2011-05-23 19:43:52
【问题描述】：

我有以下函数，该函数生成带有 ids 和 names 的编号输入字段，它们是创建的当前时间戳。我正在尝试为每个创建的日期选择器附加一个日期选择器，因此是唯一/时间戳 id。

任何人都可以建议我这样做的方法吗？

我认为需要在创建的每个输入字段下生成 datepicker 函数，但我不知道如何使用 JavaScript 生成 JavaScript 函数。我在想也许我可以使用 jQuery 的 load() 函数并调用一个 PHP 脚本来生成一个独特的函数并将其加载到一个 div 中。这是解决这个问题的最好方法吗？谢谢！

<script>
    var number = 0;
    var num;
    $('#add_date').click(function(event) {
    number++;
    var d=new Date();
    var year = d.getFullYear();
    var day = d.getDate();
    var month = d.getMonth() + 1;
    if (month<10){var month = "0"+month;}
    if (day<10){var day = "0"+day;} 
    var fullyear = month+"/"+day+"/"+year;
    num = event.timeStamp
    $('#box').append( number+". <input type='text' id='" + num + "' name='" + num + "' value='"+ fullyear + "' size='10'/><br><br>");
    var idtag = "#"+num;
});
</script>

【问题讨论】：

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

为什么不在创建输入时设置日期选择器？

var picker = $("<input/>", {
  type: 'text',
  id: num,
  name: num,
  value: fullyear
}).datepicker();

$('#box').append(number).append(picker);

您还应该使“id”值看起来像有效标识符而不是普通数字。

【讨论】：

感谢您的回复，几乎完美。我试图只使用一个附加如下 $('#box').append("
"+numbers+". "+picker+" 删除
");但是选择器应该在哪里......它说“[object Object]”有什么想法吗？
我不认为你可以通过调用“append”来做到这一点，除非你还创建了一个环绕的“”或其他东西。问题是 jQuery 在内部知道如何处理不是字符串的“append()”参数，因此当您尝试使用字符串连接时，它根本不起作用。
感谢您的帮助！我用这个 $('#box').append("
"); var标签=“#”+idtag； $(tag).prepend(numbers+".").append(picker); $(tag).append(" X a>

");

【解决方案2】：

看@Pointy的回答，实际解决办法，他比我快，我的回答并不能真正解决你的问题，我只想提几点注意。

尝试正确缩进您的代码，以便您在一个月后查看它后易于阅读。您现在可能知道它的确切作用，但从长远来看，要弄清楚它会很痛苦。

虽然不太可能，但不能保证同一事件不会在同一毫秒内触发两次，我会避免使用 event.timeStamp 生成唯一 ID。不过，这只是个人喜好，可能永远不会发生，我只是不喜欢依靠计时器来获得独特性。你已经有了递增的number 变量，你应该使用它，它肯定是独一无二的。

在将 HTML 写入字符串时，我宁愿使用正确的标准标记。使用 ' 作为字符串边界，使用 " 作为 HTML 属性。

最后，在您的if(month<10){...} 条件中，不要重新定义您已经在函数中定义的变量。它可能不会引发错误或产生任何负面影响，但我们只能感谢当前宽容的 javascript 实现，不应允许在同一范围内重新定义。

最后确保将所有 jQuery 初始化代码放入 jQuery 就绪函数中，以确保 DOM 和 jQuery 本身已完全加载。

对于咆哮感到抱歉... ;)

$(function(){
    var number = 0;

    $('#add_date').click(function(event) {
        number++;

        var d=new Date();
        var year = d.getFullYear();
        var day = d.getDate();
        var month = d.getMonth() + 1;

        if (month<10) month = "0"+month;
        if (day<10) day = "0"+day;
        var fullyear = month+"/"+day+"/"+year;

        // Insert @Pointy's solution in here...
    });
});

【讨论】：

【解决方案3】：

你可以添加一个虚构

<input type='text' id='" + num + "' name='" + num + "' value='"+ fullyear + "' size='10' class='fake-class'/>

然后，您可以像这样加载 datepicker 对象：

$('.fake-class').each(function(){
    $(this).datepicker();
});

希望对你有帮助

【讨论】：

你甚至不需要“.each”； $('.fake-class').datepicker() 也可以。
如果你想走这条路，你也可以$('.fake-class').datepicker().removeClass('fake-class');，这样你就可以在生成一些新控件后再次运行它。

【解决方案4】：

只是对变量 num 和 number 进行了一点修正，@Pointy 使用的是 num 而@DarthJDG 使用的是 number。这是对我有用的完整代码

在脚本中：

   var num = 0;
   $('#btn').click(function(event) {
        <!-- Set the default date to be todays date, can be removed for blank-->
        num++;  
        var d=new Date();
        var year = d.getFullYear();
        var day = d.getDate();
        var month = d.getMonth() + 1;

        if (month<10) month = "0"+month;
        if (day<10) day = "0"+day;
        var fullyear = month+"/"+day+"/"+year;
        <!-- End -->

        var picker = $("<input/>", {
          type: 'text',
          id: num,
          name: num,
          value: fullyear
        }).datepicker();
        $('#holder').append(num).append(picker);
    }

在 HTML 中：

<input type="button" id="btn" value="button">
<div id="holder">
</div>

【讨论】：