日期选择器应仅在jquery中的未来日期中启用2年和6个月

时间:2018-01-15 07:44:16

标签: javascript jquery

日期选择器中的日期应仅在未来2年和6个月后启用,此日期之后应禁用。(不应接受当前日期或过去日期)

        $(document).ready(function () {
            $('.datepickerOne').datepicker({
                format: 'mm/dd/yyyy',
                endDate: '+0d',
                autoclose: true
            }).on("change", function () {
                $("#studentDetailsForm").bootstrapValidator('revalidateField', 'certification_date');
            })
        });

5 个答案:

答案 0 :(得分:3)

由于 Surjit SD 表示使用minDate和maxDate将其设置为今天之前的值,将来最多30个月。代码应该是这样的:

$(document).ready(function () {
    $('.datepickerOne').datepicker({
        format: 'mm/dd/yyyy',
        minDate: -0,
        maxDate: "+30M"
        autoclose: true
    }).on("change", function () {
        $("#studentDetailsForm").bootstrapValidator('revalidateField', 'certification_date');
    })
});

答案 1 :(得分:1)

如果您使用的是jquery datepicker小部件,那么它可以选择限制日期。

使用minDate和maxDate选项限制可选日期的范围。

参考Jquery https://jqueryui.com/datepicker/#min-max

实施例

$( ".selector" ).datepicker({
  minDate: new Date(2007, 1 - 1, 1)
});

答案 2 :(得分:1)

如果您使用的是jQuery UI Datepicker:

看看:  jQuery UI mindatejQuery UI maxdate

答案 3 :(得分:1)

您正在使用 bootstrap-datepicker

所以你使用了正确的选项endDate但是2年零6个月你需要这个值:

endDate: '+910d'

在您的代码中

$(document).ready(function() {
  $('.datepickerOne').datepicker({
    format: 'mm/dd/yyyy',
    endDate: '+910d',
    autoclose: true
  }).on("change", function() {
    $("#studentDetailsForm").bootstrapValidator('revalidateField', 'certification_date');
  })
});

注意:910天意味着2年零6个月



$(document).ready(function() {
  $('.datepickerOne').datepicker({
    format: 'mm/dd/yyyy',
    endDate: '+910d',
    autoclose: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />


<input type="text" class="datepickerOne">
&#13;
&#13;
&#13;

答案 4 :(得分:0)

&#13;
&#13;
$(document).ready(function() {

var expireDate = new Date();
expireDate.setFullYear(expireDate.getFullYear() + 2);
expireDate.setMonth(expireDate.getMonth() + 6)
expireDate.setDate(expireDate.getDate() -1);
$( "#expires" ).datepicker({
  maxDate: expireDate,
});
})
&#13;
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input name="expires" type="text" id="expires" readonly/>
&#13;
&#13;
&#13;

我使用自定义函数来确定最大日期,这样您就可以根据自己的逻辑来确定哪些是有效日期。