Question

我有三个使用datepicker的输入字段：

    <input id="issue_date" name="issue_date" class="form-control date_class" type="text" required />
    <input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required />

我可以像这样使用jquery（我试图在ID上应用的代码似乎不起作用）：

  $(".date_class").datepicker({
    monthNamesShort: [ "Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec" ],
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd-mm-yy"
  });

  $("#issue_date").datepicker({ 
    yearRange: "-110:+0",
    maxDate: "today"
  });

  $("#expiry_date").datepicker({
    minDate: "today"
  });

我意识到我只能使用ID选择器，但我想缩短代码。我做错了什么或者我不能这样做吗？

Answer 1

您只能初始化插件一次。

一种解决方案是使用$ .extend（）来创建

之类的选项

var opts = {
  monthNamesShort: ["Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec"],
  changeMonth: true,
  changeYear: true,
  dateFormat: "dd-mm-yy"
};

$("#issue_date").datepicker($.extend({}, opts, {
  yearRange: "-110:+0",
  maxDate: "today",
}));

$("#expiry_date").datepicker($.extend({}, opts, {
  minDate: "today"
}));

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input id="issue_date" name="issue_date" class="form-control date_class" type="text" required />
<input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required />

另一种方法是使用选项方法

$(".date_class").datepicker({
  monthNamesShort: ["Jan", "Feb", "Mart", "Apr", "Maj", "Jun", "Jul", "Avg", "Sep", "Okt", "Nov", "Dec"],
  changeMonth: true,
  changeYear: true,
  dateFormat: "dd-mm-yy"
});

$("#issue_date").datepicker('option', {
  yearRange: "-110:+0",
  maxDate: "today"
});

$("#expiry_date").datepicker('option', {
  minDate: "today"
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input id="issue_date" name="issue_date" class="form-control date_class" type="text" required />
<input id="expiry_date" name="expiry_date" class="form-control date_class" type="text" required />

我可以在类上使用datepicker，然后在相同元素的id上使用吗？

1 个答案: