【问题标题】:Disable or gray a previous days in datepicker在日期选择器中禁用或灰色前几天
【发布时间】:2017-02-24 12:08:41
【问题描述】:

我想灰色或禁用前几天的用户无法选择它们,我试过minDate= 0new date()但它不起作用,所以我手动做了但我仍然有这段代码使它们变灰。

日期选择器:

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
                <input class="form-control" type="text" readonly />
                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>

当日期选择器的日期小于今天更改时显示警报的代码

 //Disable pastdays

 var today = new Date();
 var dd = today.getDate();
 var mm = today.getMonth()+1;
 var yyyy = today.getFullYear();
 if(dd<10){dd='0'+dd;}
 if(mm<10){mm='0'+mm;}
 var today = dd+'-'+mm+'-'+yyyy;
   jQuery( "#datepicker .form-control" ).change(function() {
      if (jQuery("#datepicker .form-control").val() < today) {
              alert('You can not select a date lower than today!')
      }
   });
 //end Disable pastDay

【问题讨论】:

  • 你在使用 40 亿个日期选择器中的哪一个?他们有办法禁用特定日期
  • &lt;符号比较日期好吗?
  • 我不知道我用过这个:codepen.io/Yuping/pen/xqrjE@Jamiec
  • 好的,startDate 的工作方式与docs 中描述的完全一样。例如:codepen.io/anon/pen/OpJYBa你有什么问题?
  • 在我使用 minDate 之前,它适用于 startDate。谢谢

标签: javascript jquery date datepicker jquery-ui-datepicker


【解决方案1】:

startDate: new Date() 放入您的日期选择器配置对象中

 $("#datepicker").datepicker({ 
      autoclose: true, 
      todayHighlight: true,
      startDate: new Date()
 });

【讨论】:

  • 它的工作原理感谢@Atanu Mallick 只是我想知道是否可以在这些禁用的日子里添加一些颜色?
  • @user7616808 你会注意到它添加了一个类 .disabled 到所有具有禁用日期的表格单元格。您可以使用 css 来设置样式
【解决方案2】:

使用下面的代码禁用日期选择器

jQuery("#datepicker .form-control").change(function (e) {
            if (jQuery("#datepicker .form-control").val() < today) {
                alert('You can not select a date lower than today!');
                jQuery(this).attr("disabled", "disabled");
            }
        });

【讨论】:

    【解决方案3】:

    试试这个。根据文档,这在提供的 codepen 中有效。

    <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" data-date-end-date="0d">
    

    data-date-end-date="0d" 将禁用今天之后的所有日期。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-04-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多