如何在输入类型=日期一周后禁用未来日期?

时间:2017-07-11 07:37:22

标签: javascript html

我有一个inputtype=date。我希望它在当前日期一周后禁用所有日期。假设当前日期是2017年7月11日,我希望所有日期从2017年7月18日起被禁用。因此,用户只能在今天的一周内选择日期。我已经在代码中禁用了过去的日期。



function validDate(){
    var today = new Date().toISOString().split('T')[0];
    document.getElementsByName("date")[0].setAttribute('min', today);
}

<body onload="validDate()">
  <div class="form-group">
     <p>Date<span>*</span></p>
     <input type="date" name="date" id="date" class="form-control input-sm " required />
  </div>
</body>
&#13;
&#13;
&#13;

6 个答案:

答案 0 :(得分:3)

请参阅更新的代码。

min

maxfunction validDate(){ var today = new Date().toISOString().split('T')[0]; var nextWeekDate = new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] document.getElementsByName("date")[0].setAttribute('min', today); document.getElementsByName("date")[0].setAttribute('max', nextWeekDate) }属性用于设置type =“date”的最短和最长日期

<body onload="validDate()">
<div class="form-group">
            <p>Date<span>*</span></p>
            <input type="date" name="date" id="date" class="form-control input-sm " required />
          </div>
</body>
Command

答案 1 :(得分:1)

您可以使用'max'禁用将来的日期:

var nextWeek = new Date();
nextWeek = nextWeek.setDate(nextWeek.getDate() + 1).toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('max', nextWeek);

答案 2 :(得分:1)

您可以拥有类似

的内容

HTML

<table width="68%" border="0" align="center" cellpadding="0" cellspacing="6">

      <tr>
        <td align="left" valign="middle" class="search-filter-headings">Start Date:</td>
        <td align="left" valign="middle">
        <input type="text" name="start_date" id="start_date" class="filter-textfields" placeholder="Start Date"/>
        </td>
      </tr>
      <tr>
        <td align="left" valign="middle" class="search-filter-headings">End Date:</td>
        <td align="left" valign="middle">
        <input type="text" name="end_date" id="end_date" class="filter-textfields" placeholder="End Date"/>
        </td>
      </tr>

    </table>

JAVASCRIPT

    $( "#start_date" ).datepicker(

        { 
            maxDate: '0', 
            beforeShow : function()
            {
                jQuery( this ).datepicker({  maxDate: 0 });
            },
            altFormat: "dd/mm/yy", 
            dateFormat: 'dd/mm/yy'

        }

);

$( "#end_date" ).datepicker( 

        {
            maxDate: '7', 
            beforeShow : function()
            {
                jQuery( this ).datepicker('option','minDate', jQuery('#start_date').val() );
            } , 
            altFormat: "dd/mm/yy", 
            dateFormat: 'dd/mm/yy'

        }

);

工作演示http://jsfiddle.net/X82aC/544/

如果您需要任何进一步的帮助,请告诉我

答案 3 :(得分:1)

您可以使用日期选择器的max属性。

&#13;
&#13;
<body onload="validDate()">
  <div class="form-group">
    <p>Date<span>*</span></p>
    <input type="date" name="date" id="date" class="form-control input-sm " required />
  </div>
</body>
&#13;
v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
&#13;
&#13;
&#13;

答案 4 :(得分:1)

您应该能够为日期设置max属性:

function validDate(){
    var today = new Date().toISOString().split('T')[0];
    var newDate = today()today.setDate(today.getDate() + 7);
    document.getElementsByName("date")[0].setAttribute('min', today);
    document.getElementsByName("date")[0].setAttribute('max', newDate);
} 

答案 5 :(得分:0)

只需使用php date在输入日期中传递min和max参数,然后检查代码

<input type="date" name="date" min="<?=date('Y-m-d')?>" max="<?=date('Y-m-d',strtotime(date('Y-m-d').'+7 days'))?>">