Question

我正在开发一个项目管理应用程序，它有一个用于编辑的页面＆＃34;任务＆＃34;记录。这个页面可以随时随地从0到无限任务记录进行编辑。

使用JAvaScript函数生成每个任务记录HTML并将其注入页面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/

请帮忙吗？

Answer 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();
});

Updated fiddle

根据需要将Pikaday Datepicker库附加到文本字段并在1次单击中显示所有内容？

1 个答案: