在TempusDominus bootstrap4 datetimepicker中禁用将来的日期

时间:2020-01-30 14:26:21

标签: bootstrap-4 tempus-dominus-datetimepicker

我在html视图中使用TempusDominus bootstrap4 datetimepicker。 所以我在项目中添加了以下脚本。

<script src="~/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="~/js/moment.js"></script>
<link href="~/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />

我的布局中已经包含以下脚本。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

@*scripts for unobtrusive client side validations*@
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>    <scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>


    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

我的html视图如下:

<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"
               name="date"
               id="datetimepicker4"/>
        <div class="input-group-append custom-datetimepicker" data-target="#datetimepicker4" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>

我的JavaScript如下:

 $(function () {
    $('#datetimepicker4').datetimepicker({
        format: 'L',
        useCurrent: false,
        maxDate: new Date()
    });
});

相同的代码在提琴手中工作正常,但在我的应用程序中不起作用。

我可以通过option maxDate:new Date()禁用将来的日期,并且由于option useCurrent:false默认情况下,当前日期不会在页面加载时填充。

但是我这里遇到的问题是,第一次我无法选择当前日期,但是第二次我能够选择它。 因此,我不确定现有的bootstrap js文件是否会覆盖我的日期时间选择器选项。

1 个答案:

答案 0 :(得分:0)

 $(function () {
   $('#datetimepicker4').datetimepicker({
    format: 'L',
    useCurrent: false,
    maxDate: moment().millisecond(999).second(59).minute(59).hour(23)
  });
});