引导日期时间选择器验证

Posted 2023-05-09

【中文标题】引导日期时间选择器验证

【英文标题】：Bootstrap date time picker validate

【发布时间】：2019-08-10 18:42:57

【问题描述】：

我正在使用引导程序 DateTime 控件，我无法验证日期 "最大日期是今天"

html 代码

<div class="col-md-3">
   <div id="datepicker-popup" class="input-group date datepicker">                            
      @Html.TextBoxFor(model => model.FromDate, new  @class = "form-control" , @placeholder = "dd/MM/yyyy", @autocomplete = "off", @readonly = "readonly" )
      <span class="input-group-addon input-group-append border-left">
        <span class="mdi mdi-calendar input-group-text"></span>
      </span>
   </div>
</div>

jQuery 代码

$('#FromDate').datepicker(
      format: 'mm-dd-yyyy',
      autoclose: true,           
      maxDate: new Date()
 );

我无法找到我做错了什么，请让我知道 可以的话解决办法。

谢谢

【问题讨论】：

尝试使用endDate: '0d' 而不是maxDate: new Date()。没有 maxdate 这样的选项。

我试了一下，这里也不行

您是否在寻找这个：***.com/questions/7934252/…？您使用的是哪个日期选择器？

@TetsuyaYamamoto，是的，但它不起作用

我无法理解为什么该解决方案在我的应用程序中不起作用

【参考方案1】：

可能有许多不同版本的引导日期选择器。

我尝试了一个使用datetimepicker 而不是datepicker 的示例。

$('#FromDate').datetimepicker(
      format: 'mm-dd-yyyy',        
      maxDate: 'now'
 );

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-3">
                    <div id="datepicker-popup" class="input-group date datepicker">                            
                       <input type="text" class="form-control" id="FromDate" />
                        <span class="input-group-addon input-group-append border-left">
                            <span class="mdi mdi-calendar input-group-text"></span>
                        </span>
                    </div>
                </div>