代码之家  ›  专栏  ›  技术社区  ›  netrox

jQuery datepicker防止过去日期

  •  73
  • netrox  · 技术社区  · 15 年前

    如何禁用jquery datepicker上的过去日期?我寻找选择,但似乎没有找到任何迹象表明能够禁用过去日期。

    更新:感谢yall的快速反应我没有运气就试过了天仍然没有像我预期的那样灰显,仍然接受选定的过去日期。

    我试过这个:

    $('#datepicker').datepicker({ minDate: '0' });
    

    不起作用。

    我试过这个:

    $('#datepicker').datepicker({ minDate: new Date() });
    

    也不管用。

    它可以很好地显示日历小部件。它只是不会变灰或阻止过去几天的输入。我在过去尝试过minDate和maxDate,但运气不好,所以我想一定不是他们。

    14 回复  |  直到 12 年前
        1
  •  137
  •   DarthJDG chetan borse    13 年前

    试试这个:

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

    从中删除引号 0 .

        2
  •  34
  •   Russ Cam    15 年前

    您只需要指定一个最小日期-将其设置为0意味着最小日期是从今天开始的0天,即今天。你可以把绳子传过去 '0d' 相反(默认单位是天)。

    $(function () {
        $('#date').datepicker({ minDate: 0 });
    });
    
        3
  •  24
  •   Zephyr was a Friend of Mine    12 年前

    如果要处理以前绑定的日期选择器,请设置

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

    不会起作用的。该语法仅在创建小部件时适用。

    要设置绑定日期选择器的最小日期,请使用以下命令:

    $("#datePicker").datepicker("option", "minDate", 0);
    
        4
  •  23
  •   Rahul Desai    8 年前

    删除周围的引号 0 它会起作用的。

    工作代码段:

    // set minDate to 0 for today's date
    $('#datepicker').datepicker({ minDate: 0 });
    body {
        font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
    }
    <!-- load jQuery and jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    
    <!-- load jQuery UI CSS theme -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    
    <!-- the datepicker input -->
    <input type='text' id='datepicker' placeholder='Select date' />
        5
  •  14
  •   Bill    15 年前

    使用mindate选项设置可能的最短日期。 http://jqueryui.com/demos/datepicker/#option-minDate

        6
  •  10
  •   Sonu Sindhu    11 年前

    把零给mindate,它就会取消过去的约会。

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

    Live example

    read more here

        7
  •  9
  •   Tim Stone    13 年前

    这是有效的:

    $("#datepicker").datepicker({ minDate: +0 });
    
        8
  •  7
  •   Dev    9 年前

    //禁用未来日期

    $('#datetimepicker1').datetimepicker({
                format: 'DD-MM-YYYY',
                maxDate: new Date
            }); 
    

    //禁用过去日期

     $('#datetimepicker2').datetimepicker({
            format: 'DD-MM-YYYY',
            minDate: new Date
        });
    
        9
  •  5
  •   Akhil Yadav    8 年前

    $("#datePicker").datePicker({startDate: new Date() }); . 这对我有用

        10
  •  2
  •   animuson    13 年前

    我正在使用以下代码格式化日期并在日历中显示2个月…

    <script>
    $(function() {
    
        var dates = $( "#from, #to" ).datepicker({
    
            showOn: "button",
            buttonImage: "imgs/calendar-month.png",
            buttonImageOnly: true,                           
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
    
            onSelect: function( selectedDate ) {
    
    
    
    
                $( ".selector" ).datepicker({ defaultDate: +7 });
                var option = this.id == "from" ? "minDate" : "maxDate",
    
    
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
    
                dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
    
    
            }
        });
    });
    
    </script>
    

    问题是我不知道如何限制以前的日期选择。

        11
  •  1
  •   Ed Birm    12 年前

    请确保将多个属性放在同一行(因为您只显示了一行代码,所以可能遇到了与我相同的问题)。

    我的会设置默认日期,但不会灰掉旧日期这不起作用:

    $('#date_end').datepicker({ defaultDate: +31 })
    $('#date_end').datepicker({ minDate: 1 })
    

    这两个功能都可以:

    $('#date_end').datepicker({ defaultDate: +31, minDate: 1 })
    

    1和+1的工作原理相同(或者在您的情况下是0和+0)。

    Me:Windows 7 x64、Rails 3.2.3、Ruby 1.9.3

        12
  •  1
  •   MeowRude    11 年前
    var givenStartDate = $('#startDate').val();
            alert('START DATE'+givenStartDate);
            var givenEndDate = $('#endDate').val();
            alert('END DATE'+givenEndDate);
            var date = new Date();
            var month = date.getMonth()+1;
            var day = date.getDate();
            var currentDate = date.getFullYear() + '-' +
                (month<10 ? '0' : '') + month + '-' +
                (day<10 ? '0' : '') + day;
            if(givenStartDate < currentDate || givenEndDate < currentDate)
             { 
            $("#updateButton").attr("disabled","disabled"); 
             }
             if(givenStartDate < currentDate && givenEndDate > currentDate)
                {
                $("#updateButton").attr("enabled","enabled");
                }
             if(givenStartDate > currentDate || givenEndDate > currentDate) { 
            $("#updateButton").attr("enabled","enabled"); 
             }
    

    试试这个。如果有任何错误,请纠正我:)谢谢大家。

        13
  •  0
  •   Tim Stone    13 年前

    尝试设置 startDate 到当前日期。例如:

    $('.date-pick').datePicker({startDate:'01/01/1996'});
    
        14
  •  0
  •   mbigras    8 年前

    我使用了min属性: min="' + (new Date()).toISOString().substring(0,10) + '"

    这是我的代码,它起作用了。

    <input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>
    

    enter image description here