让jQuery库按需启动DatePicker并在完成后销毁它?

时间:2015-05-18 23:32:04

标签: javascript jquery datepicker

过去一个月我一直在测试一个好的10多个jQuery DatePicker库,以便在我的应用中使用。他们都有我喜欢和不喜欢的东西。

我真正想要的是超轻量级,因为我的应用程序的一部分只需要允许用户选择日期并使用AJAX帖子保存它。然后,我在同一元素上反复重新加载/更新Date值,因为不同的任务记录被加载到Modal窗口中。

大多数库都适用于该功能,因为我只使用了一个DatePicker实例。

我现在关注的是我的应用程序中的另一个屏幕,它将DatePicker附加到屏幕上每个可编辑任务记录的字段中。屏幕上最多可以有200个DatePickers!

出于这个原因,我希望有一个DatePicker库,它允许我在用户点击日期值时按需初始化DatePicker。因此,在200个DatePicker日期字段中,用户单击以更改其中一个,并且此时DatePicker将被初始化并允许用户选择日期。当它们完成后,它将使用AJAX保存并关闭DatePicker也会破坏它!

所以这里的关键是一个正常工作的库,但允许按需init并在完成时销毁。这允许任何数字在页面上,但实际上一次只能使用非常小的数量!

如前所述,我一直在测试所有流行的图书馆。其中大多数是2-3,000行代码。这不是问题,但今天我在这里找到了较旧的 Bootstrap DatePicker库 http://www.eyecon.ro/bootstrap-datepicker/,并且很高兴看到它实际上甚至不需要加载Bootstrap库而且它只是432行opf代码,效果很好!它有一个onChange回调允许我的AJAX保存以及一些设置日期函数,允许我重复使用我的任务模式上的1个DatePicker字段。

但缺少的是能够按需启动并在完成后销毁。

所以我不得不以某种方式将其添加到其中。

以下是我在场上设置库的快速演示。是否有任何JavaScript专家知道如何根据需要在几个字段上添加init按需启用此日期选择器的功能,然后在我被触发的onChange事件中销毁它?

我的演示JSFiddle:http://jsfiddle.net/jasondavis/2etw5ehd/

DatePicker库源代码:https://github.com/Aymkdn/Datepicker-for-Bootstrap/blob/master/bootstrap-datepicker.js

0 个答案:

没有答案