从 html5 datepicker 禁用某些日期

Posted

技术标签:

【中文标题】从 html5 datepicker 禁用某些日期【英文标题】:Disable certain dates from html5 datepicker 【发布时间】:2013-06-15 11:23:02 【问题描述】:

是否可以在我使用时禁用日期 我想为一种情况禁用当前日期,为另一种情况禁用未来日期。 我应该如何禁用日期?

【问题讨论】:

【参考方案1】:

对于 react 和类似的库,您可以使用它来禁用今天之前的所有日期。

<input type='date' min=new Date().toISOString().split('T')[0] >

【讨论】:

【参考方案2】:

You can add a min or max attribute to the input type=date。日期必须采用 ISO 格式 (yyyy-mm-dd)。尽管用户可以在不使用日期选择器的情况下手动输入无效日期,但许多移动浏览器和当前版本的 Chrome 都支持这一点。

<input name="somedate" type="date" min="2013-12-25">

minmax 属性必须是一个完整的日期;无法指定“今天”或“+0”。为此,您需要使用 javascript 或服务器端语言:

var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);

http://jsfiddle.net/mblase75/kz7d2/

只排除今天,同时允许过去或未来的日期,这不是这里的选项。但是,如果您的意思是希望明天成为 min 日期(删除今天和所有过去的日期),请参阅 this question 以将 today 增加一天。

与涉及 html 表单的所有其他情况一样,您应该始终在服务器端验证字段,无论您如何在客户端约束它。

【讨论】:

@Pasta 是的,确实如此。您在实现它时遇到了具体问题吗? 如果用户通过输入而不是日历插入日期,这不起作用:( @smartmouse 确实如此;需要某种 JavaScript onblur 事件(除了服务器端验证)来处理它。 谢谢你这对我有用。我正在使用 Laravel 和 Livewire,所以根据我的业务逻辑,我正在像这样从 livewire 模块加载最小日期。 Carbon::now()->format('Y-m-d');【参考方案3】:

在纯 HTML 中,您可以对日期设置的唯一限制是通过 minmax 属性设置的下限和上限。在下面的示例中,仅允许我发布此问题的一周中的日期,其他日期显示为灰色并且单击它们不会更新输入值:

&lt;input type="date" min="2019-06-02" max="2019-06-08"/&gt;

您也可以通过使用几行 JavaScript 来禁用任何无效日期,但这并没有附带所有原生 &lt;input type="date"&gt; 功能,如灰色日期。您可以将日期值设置为'',以防日期无效,也可能会显示错误消息。以下是不接受周末日期的输入示例:

// Everything except weekend days
const validate = dateString => 
  const day = (new Date(dateString)).getDay();
  if (day==0 || day==6) 
    return false;
  
  return true;


// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => 
  if (!validate(evt.target.value)) 
    evt.target.value = '';
  
&lt;input type="date"/&gt;

【讨论】:

如果一个人想改变它,所以只有今天和明天是不可选择的?谢谢【参考方案4】:

您可以使用它来禁用未来的日期: 在你里面document.ready函数,放置

//Display Only Date till today //

var dtToday = new Date();
var month = dtToday.getMonth() + 1;     // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);

形式上

<input id="dateID" type="date"/>

这是工作的jFiddle Demo

【讨论】:

【参考方案5】:

HTML datepicker (&lt;input type=date&gt;) 支持min/max 属性,但它是not widely supported。

同时您可以考虑使用bootstrap-datepicker,v1.2.0 在github上。

参考资料:

W3C spec

【讨论】:

以上是关于从 html5 datepicker 禁用某些日期的主要内容,如果未能解决你的问题,请参考以下文章

如何从日期数组中禁用 Angular Material Datepicker 日期?

从html datepicker jquery禁用特定日期

在jQuery UI datepicker上禁用一周中的特定日期[重复]

datepicker 禁用期货日期

在 jQuery datepicker 中分配从 mysql 获取的日期

在 Bootstrap DatePicker 中启用/禁用日期范围