2017-09-17 54 views
-1

私はここにこの入力セットを持っています。<input type = "date">に曜日を追加する方法>

Days:<select id="select"> 
     <option value="150 days">150 days</option> 
     <option value="200 days">200 days</option> 
     </select> 
Date1:<input type="date" id="date1"> 
Date2:<input type="date" id="date2"> 

私はこれを適切に説明する方法を知らないが、何が起こることになっていますがこのです:

ユーザーが150日を選択した場合、それは(また、ユーザによって入力された)日付1に追加されます

と日付2に自動的に表示されます。

現在の日付が日付1ではないことに注意してくださいは...

+0

があなたの問題の詳細を説明します。 – pritesh

答えて

1

あなたは、日付に変換し日付1の値を取得し、あなたのselect要素から日それに追加して、date2のフィールドにそれを配置する必要があります。あなたはjavascriptで 'date1'フィールドの変更をトリガする関数を作成することができます。

HTML:あなたは仕事にそれを必要とする場合は、編集---

--- https://jsfiddle.net/vk1ujuu2/

Days:<select id="select"> 
     <option value="150">150 days</option> 
     <option value="200">200 days</option> 
     </select> 
Date1:<input type="date" onchange="setSecondDate();" id="date1"> 
Date2:<input type="date" id="date2"> 

のjavascript:ここ

function setSecondDate() { 
    var days = document.getElementById("select").value; 
    var date = new Date(document.getElementById("date1").value); 
    date.setDate(date.getDate() + parseInt(days)); 
    document.getElementById("date2").valueAsDate = date; 
} 

はjsfiddle例ですすべてのブラウザでJQueryUIのdatepickerを使用できます。 JqueryとJqueryのUIをインクルードし、日付を解析するための追加の関数を文字列に書き込むだけです。

に含まれるもの:

<link rel="stylesheet" href="jquery-ui.min.css"> 
<script src="external/jquery/jquery.js"></script> 
<script src="jquery-ui.min.js"></script> 

解析機能:

Date.prototype.yyyymmdd = function() { 
    var mm = this.getMonth() + 1; 
    var dd = this.getDate(); 

    return [this.getFullYear(), 
      (mm>9 ? '' : '0') + mm, 
      (dd>9 ? '' : '0') + dd 
     ].join('-'); 
}; 

JsFiddle:https://jsfiddle.net/vk1ujuu2/5/

+1

ブラウザが入力タイプの日付または* valueAsDate *をサポートしていない場合もカバーする必要があります。 – RobG

関連する問題