限制HTML 5日期输入中的未来日期 [英] Restrict future dates in HTML 5 date input

问题描述

我想限制用户只能在HTML日期输入中添加未来日期。

我想添加HTML 5而不是jQuery UI日期选择器压延机。任何人都可以告诉我如何限制输入到未来日期？

解决方案

您可以使用HTML5输入日期的min和max属性

HTML5代码

 < input type =datename =bdaymin =2014-05-11max =2014-05-20> 
  

编辑

您需要使用jQuery来实现它

jQuery代码

  $（function（）{
 var dtToday = new Date（）; 
 
 var month = dtToday.getMonth（）+ 1; 
 var day = dtToday.getDate（）; 
 var year = dtToday.getFullYear（）; 
 $ b $ if（month <10）
 month ='0'+ month.toString（）; 
 if（day <10）
 day ='0'+ day.toString（）; 
 
 var maxDate = year +' - '+月+' - '+日; 
 $（'＃txtDate'）。attr（'max'，maxDate）; 
}）; 
  

解释 HTML5输入日期的
max属性需要月（月）无效，而05（月）有效
例如：1（日）无效而01（日）是有效的

所以我已经添加了下面的代码

  if（month <10）
 month ='0'+ month.toString（）; 
 if（day <10）
 day ='0'+ day.toString（）; 
  

检查我更新的小提琴

a href =http://jsfiddle.net/chiragvidani/9WVY8/>小提琴演示

I want to restrict a user to only being able to add future dates in a HTML date input.

Instead of jQuery UI date picker I want to add HTML 5 calender. Can anyone tell me how can I restrict the input to future dates?

解决方案

You can use min and max attributes of HTML5 input date

HTML5 code

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

EDIT

You need to use jQuery to achieve it

jQuery code

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    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;    
    $('#txtDate').attr('max', maxDate);
});

Explanation max attribute of HTML5 input date takes month and day in double digit format.

Ex: 5 (Month) is not valid whereas 05 (Month) is valid Ex: 1 (Day) is not valid whereas 01 (Day) is valid

So I have added below code

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

Check my updated fiddle

Refer fiddle demo

这篇关于限制HTML 5日期输入中的未来日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！