0

我正在开发一个项目管理应用程序，该应用程序有一个用于编辑“任务”记录的页面。这个页面可以如何从 0 到无限的任务记录进行编辑。

每个任务记录 HTML 都是使用 JAvaScript 函数生成并注入到页面 DOM 中的。在这个 JS 函数的末尾，它当前运行一些类似下面的代码，以将日期选择器库附加到每个任务到期日期文本输入字段！

想象一个有 100 个任务的页面！在页面加载时启动了 100 个日期选择器......我想象的不是那么好！

var $datepicker = $(task).find(".date_due").pikaday({
    format: 'MM/DD/YYYY',   
});

我正在使用的库编码非常好，称为 Pikaday - https://github.com/dbushell/Pikaday

因此，为了尝试根据提交日期的需要按需加载它，我使用了下面的代码......

$( "body" ).on( "click", ".date_due", function() {
  var $datepicker = $( this ).pikaday({
       format: 'MM/DD/YYYY'    
   });
   $datepicker.show();
});

这几乎可以满足我的需要。它现在确实按需加载，但是当用户单击文本输入时，我需要加载它并一键显示日期选择器！

这需要 1 次点击加载，再一次打开它！

您可以看到我试图通过调用库函数来触发打开，$datepicker.show();但它似乎不起作用。

https://github.com/dbushell/Pikaday上的文档说...

picker.show()
Make the picker visible.

在这个 JSFiddle 中，您可以看到它没有使其可见，因为它仍然需要单击 2 次才能查看日期选择。 http://jsfiddle.net/jasondavis/uuu96ckL/14/

请问有什么帮助吗？

4

1 回答 1

1

您的插件式包装器发生了一些事情，我承认我现在懒得去研究，但这有效：

$( "body" ).on( "click", ".date_due:not(.pikaday)", function() {
  var pikaday = new Pikaday({
       field: this,
       theme: 'dark-theme',
       format: 'MM/DD/YYYY',
       defaultDate: '2015-01-01'       
   });

   $(this).data('pikaday', pikaday).addClass('pikaday');

   pikaday.show();
});

更新了小提琴。

于 2015-03-29T10:38:13.580 回答