【问题标题】:How to disable future dates in datepicker using jquery?如何使用 jquery 禁用 datepicker 中的未来日期?
【发布时间】:2017-03-25 13:36:39
【问题描述】:

日期选择器未来日期未禁用。这是我在 HTML 中的 datepicker 代码

<div class="input-group input-append date" id="dp3" data-date="" data-date-format="mm-dd-yyyy">
    <input class="form-control" style="width: 106px; height: 30px;" type="text" id="nodate" value="<?php echo date('m-j-Y');?>"  readonly=""/>
        <div class="input-group-addon add-on" style="width: 35px; height: 25px;"><i class="icon-calendar"></i></div>
        &emsp;
        <button type="button" class="btn btn-primary" onclick="window.location = '<?php echo base_url().'index.php/attendance/noRecordDate/';?>'+ $('#nodate').val()">Add Attendance</button>
</div>

这是我的脚本:

<script>
    $(function() {
    $( "#nodate" ).datepicker({  maxDate: new Date() });
});
</script>

【问题讨论】:

    标签: jquery html datepicker


    【解决方案1】:

    maxDate

    多种类型 支持:

    Date: A date object containing the maximum date.
    Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
    String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
    

    所以您需要正确设置日期对象,或者简单地设置为字符串或数字,如下所示:

    <script>
        $(function() {
        $( "#nodate" ).datepicker({  maxDate: '0' });
    });
    </script>
    

    【讨论】:

    • 引用如下:{ maxDate: '0' }
    • 我的意思是我完全使用了你的代码,但它不起作用。
    • 请确保您的浏览器没有缓存js,CTRL+F5重新加载您的js文件
    • 我没有放入js文件。我只输入了我的头html。
    • 就像一个魅力! jsfiddle.net/9v7f7r0p,PS我必须静态设置日期值,只要jsfiddle不解析php;
    【解决方案2】:

    $(document).ready(function () {
    
        var dbDate = "2017-03-24";
        var date2 = new Date(dbDate);
    
        $( "#nodate" ).datepicker({ 
        
          
         dateFormat: 'mm-dd-yy',
         maxDate: new Date()
        
        }).datepicker('setDate', date2);
    
        
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.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>
    
    
    <div class="input-group input-append date" id="dp3" data-date="" data-date-format="mm-dd-yyyy">
        <input class="form-control" style="width: 106px; height: 30px;" type="text" id="nodate" value=""  readonly=""/>
            <div class="input-group-addon add-on" style="width: 35px; height: 25px;"><i class="icon-calendar"></i></div>
            &emsp;
            <button type="button" class="btn btn-primary" onclick="window.location = '<?php echo base_url().'index.php/attendance/noRecordDate/';?>'+ $('#nodate').val()">Add Attendance</button>
    </div>

    【讨论】:

    • 我不知道为什么它对我的不起作用,顺便说一句,我的 datepicker 来自 bootstrap。
    • 如果 javascript 文件出错,则所有功能都将不起作用,或者如果您添加多个 javascript 源文件,则它将无法正常工作
    猜你喜欢
    • 1970-01-01
    • 2017-08-08
    • 2011-04-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多