2017-07-11 15 views
6

type=dateinputボックスがあります。私は現在の日付から1週間後にすべての日付を無効にしたい。現在の日付が2011年11月7日であると仮定します.2017年7月18日以降のすべての日付を無効にします。したがって、ユーザーは今日から1週間以内の日付のみを選択できます。私はすでに自分のコードで過去の日付を無効にしました。input type = dateで1週間後に将来の日付を無効にする方法はありますか?

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>

+1

「今日」に7日を追加してから、 「最小」から「最大」 – Dumisani

答えて

2

更新されたコードを参照してください。

[after how many number of days to be disabled i.e. 6 in this case] * 24 * 60 * 60 * 1000 

minmax属性がタイプ=「日付」あなたは将来の日付を無効にするには、「最大」を使用することができます

function validDate(){ 
 
\t  var today = new Date().toISOString().split('T')[0]; 
 
\t  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) 
 
\t }
<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>

1

の最小値と最大日付を設定するために使用されています:

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

ヨーuのようなものを持つことができます

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/

あなたはそれ以上の助け

1

あなたはmaxを使用することができますが必要な場合は、私に教えてください日付ピッカーの属性。

function getInputDateFormat(date) { 
 
    return date.toISOString().split('T')[0]; 
 
} 
 

 
function validDate() { 
 
    var today = new Date(); 
 
    var maxDate = new Date(); 
 
    maxDate.setDate(maxDate.getDate() + 7); 
 

 
    document.getElementsByName("date")[0].setAttribute('min', getInputDateFormat(today)); 
 
    document.getElementsByName("date")[0].setAttribute('max', getInputDateFormat(maxDate)); 
 
}
<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>

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); 
} 
0

は、単にコード

以下の入力日付チェックで最小値と最大値のパラメータを渡すためにPHPの日付を使用
<input type="date" name="date" min="<?=date('Y-m-d')?>" max="<?=date('Y-m-d',strtotime(date('Y-m-d').'+7 days'))?>"> 
関連する問題