使用 altFields 动态生成 jQuery Datepicker

发布于 2024-09-18 05:05:21 字数 1031 浏览 12 评论 0原文

我通过简单地将字段 HTML 附加到 div 来动态生成日期选择器:

<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" tabindex="6" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="">

由于我们存储日期的方式,我们有一个单独的日期选择器字段(altfield),它存储用户选择的数据库格式日期。

为了处理多个日期选择器的选择,我分配一个类并使用 livequery 以便在页面加载后检测 onClicks:

$(".publication_date").livequery(function() {
                $(this).datepicker({
                    dateFormat: "dd M yy",
                    changeYear: true,
                    changeMonth: true,
                    onSelect: function(dateText, inst) {
                        console.log(inst);
                    }
                });
            });

我有一个问题,日期选择器如何知道要填充哪个替代字段?在单个日期选择器上,通常包括:

altField: '#start_date_datepicker_altfield', 
altFormat: 'yy-mm-dd',

人口发生情况。

I'm dynamically generating datepicker's by simply appending the field HTML to a div:

<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" tabindex="6" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="">

Due to the way we store dates, we have a separate field (altfield) for the datepicker which stores our database formatted date selected by the user.

To handle selection of the multiple date pickers I assign a class and use livequery in order to detect onClicks after the page has loaded:

$(".publication_date").livequery(function() {
                $(this).datepicker({
                    dateFormat: "dd M yy",
                    changeYear: true,
                    changeMonth: true,
                    onSelect: function(dateText, inst) {
                        console.log(inst);
                    }
                });
            });

I have a problem in that, how does the datepicker know which altfield to populate? On a single datepicker, one would normally include:

altField: '#start_date_datepicker_altfield', 
altFormat: 'yy-mm-dd',

for the population to occur.

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

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

发布评论

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

评论(2

长发绾君心 2024-09-25 05:05:25

我没有使用livequery,但是从它的外观来看,你可以从this.id中获取匹配元素的id。在您的示例 HTML 中,这将是“publication_date_2”,从中可以相对轻松地为替代字段“publication_date_db_2”创建必要的 ID(您可以通过更改命名字段的策略来使其变得更加容易)。

所以也许:

$(".publication_date").livequery(function() {
    $(this).datepicker({
        dateFormat: "dd M yy",
        changeYear: true,
        changeMonth: true,
        onSelect: function(dateText, inst) {
            console.log(inst);
        },
        altField: "#" + this.id.replace("_date_", "_date_db_"),
        altFormat: 'yy-mm-dd'
    });
});

I haven't used livequery, but from the looks of it, you can get the id of the matched element from this.id. In your example HTML, that will be "publication_date_2", from which it's relatively easy to create the necessary ID for the altfield "publication_date_db_2" (you can make it even easier by changing your strategy of naming the field).

So perhaps:

$(".publication_date").livequery(function() {
    $(this).datepicker({
        dateFormat: "dd M yy",
        changeYear: true,
        changeMonth: true,
        onSelect: function(dateText, inst) {
            console.log(inst);
        },
        altField: "#" + this.id.replace("_date_", "_date_db_"),
        altFormat: 'yy-mm-dd'
    });
});
落花浅忆 2024-09-25 05:05:24

我知道文档说它需要一个选择器,但它也可以接受一个 jQuery 对象,所以只需使用 $ (this).next() 获取隐藏字段,如下所示:

$(".publication_date").livequery(function() {
   $(this).datepicker({
      altField: $(this).next(), 
      altFormat: 'yy-mm-dd',
      dateFormat: "dd M yy",
      changeYear: true,
      changeMonth: true,
      onSelect: function(dateText, inst) {
        console.log(inst);
      }
   });
});

由于大多数插件都归结为 $(input),因此输入可以是选择器 < em>或者一个 jQuery 对象或者一个 DOM 元素,它仍然可以正常工作:)

I know the documentation says it takes a selector, but it can also take a jQuery object, so just use $(this).next() to get the hidden field, like this:

$(".publication_date").livequery(function() {
   $(this).datepicker({
      altField: $(this).next(), 
      altFormat: 'yy-mm-dd',
      dateFormat: "dd M yy",
      changeYear: true,
      changeMonth: true,
      onSelect: function(dateText, inst) {
        console.log(inst);
      }
   });
});

Since most of the plugins boil down to $(input) that input can be a selector or a jQuery object or a DOM element and it'll still work just fine :)

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