如何获取jquery日期选择器的所有选项,以安装具有相同选项的新日期选择器

How to get all options of jquery datepicker to instanciate new datepicker with same options?

本文关键字:日期 选择器 选项 安装 新日期 何获取 获取 jquery      更新时间:2023-09-26

如何获取jquery日期选择器的所有选项,以安装具有相同选项的新日期选择器?

我想要克隆一个包含两个具有不同选项的日期选择器的表。您可以在这里看到一个示例:http://jsfiddle.net/qwZ5x/4/

<div class="clonable">
<table><tr><td>
<input type="text" id="datepicker" />
<script>
    jQuery(document).ready(function() {
        jQuery("#datepicker").datepicker({
            showOn: "both",
            buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        });
    });
</script></td><td>
<input type="text" id="datepicker2" />
<script>
    jQuery(document).ready(function() {
        jQuery("#datepicker2").datepicker();
    });
</script>
    </td></tr></table>
</div>
<a href="javascript:void(0);" id="clone">Clone</a>
var id = 0;
jQuery("#clone").on("click", function () {
var clonable = jQuery(".clonable:first").clone(true, true);
jQuery(clonable).find("input").each(function () {
    jQuery(this).attr("id", jQuery(this).attr("id") + "_" + id);
    jQuery(this).siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();
    jQuery(this).removeClass('hasDatepicker');
    jQuery(this).datepicker({
        showOn: "both",
        buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
    });
});
jQuery(clonable).insertBefore("#clone");
id = id + 1;
});

如何在不逐个设置选项的情况下将所有选项设置为克隆日期选择器?

非常感谢。

您可以使用以下方法获得现有日期选择器的选项:

var options = jquery('#datepicker').datepicker('option', 'all');

要获得一个特定选项,例如numberOfMonths:

var numberOfMonths = jquery('#datepicker').datepicker('option', 'numberOfMonths');

在您的特定情况下,请替换此:

jQuery(this).datepicker({
    showOn: "both",
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});

这个:

jQuery(this).datepicker(jQuery(this).datepicker('option', 'all'));

以下是更改的一个jsfiddle:http://jsfiddle.net/puAde/

这是因为您已经克隆了包含选项的输入元素,但它们需要重新应用于新实例。

请注意,您需要传递'all'才能获得当前选项(jQuery文档是错误的)。

现在您可以获得以下所有选项:

$('#datepicker').data('datepicker');
$('#daterangepicker').data('daterangepicker');

输出特定值:

$('#datepicker').data('datepicker').timePickerIncrement
$('#daterangepicker').data('daterangepicker').timePickerIncrement