两个 jQuery UI 具有不同选项的日期选择器

Question

有 2 个日期选择器。

<input type="text" class="datepicker" id="date_first_registration">
<input type="text" class="datepicker" id="inspection_valid_until">

想要日期范围从 100 年前开始到今年结束。另一个是从当年开始到当年结束后 20 年。

试过这个：

$(function() {
    $(".datepicker").datepicker({
        inline: true,
        showOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Frid ", "Sat"],
        dateFormat: "yy-mm-dd"
    }).val()
    $("#date_first_registration").datepicker({
        yearRange: "-100:+0"
    }).val()
    $("#inspection_valid_until").datepicker({
        yearRange: "-1:+20"
    }).val()
});

但是不起作用。根据我的理解，我将所有设置都设置为 .datepicker，然后为每个 ID 设置不同的日期范围。但不起作用。需要纠正什么？

Answer 1

删除 .datepicker class 通用代码并为每个日期选择器实现单独的代码，例如

$("#date_first_registration").datepicker({ 
    changeMonth: true,
    changeYear: true,
    dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Frid ", "Sat"],  
yearRange: "-100:+0"
}).val()


$("#inspection_valid_until").datepicker({ 
    changeMonth: true,
    changeYear: true,
    dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Frid ", "Sat"],  
    yearRange: "-1:+20"
}).val()

Demo

Answer 2

1:可以使用option参数：

$(function() {
  $(".datepicker").datepicker({
    showOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Frid ", "Sat"],
    dateFormat: "yy-mm-dd"
  });
  $("#date_first_registration").datepicker("option", "yearRange", "-100:+0");
  $("#inspection_valid_until").datepicker("option", "yearRange", "-1:+20");
});

@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.min.css");

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<input class="datepicker" id="date_first_registration">
<input class="datepicker" id="inspection_valid_until">

2: 另一种方法是使用对象和 jQuery.extend:

$(function() {
  var defaults = {
    showOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Frid ", "Sat"],
    dateFormat: "yy-mm-dd"
  };
  $("#date_first_registration").datepicker($.extend({}, defaults, {
    yearRange: "-100:+0"
  }));
  $("#inspection_valid_until").datepicker($.extend({}, defaults, {
    yearRange: "-1:+20"
  }));
});

@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.min.css");

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<input class="datepicker" id="date_first_registration">
<input class="datepicker" id="inspection_valid_until">

两个 jQuery UI 具有不同选项的日期选择器

Two jQuery UI datepickers with different options

jquery

jquery-ui

jquery-ui-datepicker