有人可以解释一下这个 jquery datepicker 示例吗

发布于 2024-11-29 13:36:01 字数 446 浏览 0 评论 0原文

这是该网站的链接: http://www.kelvinluck.com/assets/jquery/datePicker /v2/demo/datePickerClickInput.html

我正在查看名为“日期 1”的文本框。

该文本框旁边有一个小日历图标。单击后,日期选择器将打开。是什么让这行得通?我似乎无法弄清楚。

我理解文本框是如何工作的,因为它有一个名为 .date-pick 的类,它使用 jquery 获取 datepicker 函数。

但日历是通过一个名为 dp-choose-date 的类来应用的。我在源代码中找不到这个类。

我想我在这里有点困惑。

Here is a link to the site:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html

I'm looking at the text box called date 1.

There is a little calendar icon next to the text box. When it's clicked, the datepicker opens. What makes this work? I can't seem to figure it out.

I understand how the text box works because it has a class called .date-pick which gets the datepicker function with the jquery.

But the calendar is applied with a class called dp-choose-date. No where in the source can I find this class.

I think I'm confused a little here.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

流年已逝 2024-12-06 13:36:01

该类由日期选择器插件应用,可能使用 addClass 函数。该插件在初始化时可能会创建一个 DIV (id=;dp-popup'),其中包含当前月份的必要值。该 DIV 是隐藏的 (display:none),但在首次初始化时仍然具有 dp-popup 类。当您单击文本框或单击按钮时,系统会为这些事件分配一个事件处理程序(文本框为 focus,按钮为 click),用于设置DIV 不被隐藏,并且还将其放置在文本框的正下方。

我没有深入研究代码,但稍微看了一下标记,我怀疑它是如何工作的。

The class is being applied by the date picker plug-in, probably using the addClass function. The plug-in, when it's initialized, probably creates a DIV (id=;dp-popup') that has the necessary values for the current month. That DIV is hidden (display:none) but still has the class of dp-popup when first initialized. When you click in the textbox or click the button, there's an event handler assigned to those events (focus for the textbox, click for the button) that sets the display style of the DIV to not be hidden and it also positions it right below the text box.

I didn't dig into the code a whole lot, but looking at the markup a little, that's how I suspect it's working.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文