[英]jquery populate input text fields based on datepicker
我正在嘗試創建一個表格，該表格將允許用戶以表格形式輸入他們在兩周內工作的小時數。
該表單有14行，其中包含要求開始和結束時間的字段。 我能做的
我需要做的是在表單中：用戶選擇一個周末日期，然后在14個文本字段中填充基於前14個日期的日期。
現在，我知道可以使用以下腳本來完成一個日期，但是如何在沒有那么多行代碼的情況下立即執行多個字段。
樣品：
<script>
$(document).ready(function(){
$( "#datepicker1" ).datepicker({
onClose: function() {
var date2 = $('#datepicker1').datepicker('getDate');
date2.setDate(date2.getDate()+3)
$( "#datepicker2" ).datepicker("setDate", date2);
}
});
$( "#datepicker2" ).datepicker();
});
</head>
<body>
<p>Date1: <input type="text" id="datepicker1"></p>
<p>Date2: <input type="text" id="datepicker2"></p>
如果要設置14個日期，則每個datepicker具有不同的值時，可以使用each()遍歷datepicker 。 下面的例子。
如果所有14個datepicker都具有相同的值。 您可以使用該類作為選擇器來分配值。 像$( ".datepicker-to-fill" ).datepicker("setDate",date2);
$(document).ready(function(){ $( "#datepicker" ).datepicker({ onClose: function() { $( ".datepicker-to-fill" ).each(function(){ var days = parseInt( $(this).data("days") ); var date2 = $("#datepicker").datepicker('getDate'); date2.setDate( date2.getDate() + days ); $( this ).datepicker("setDate",date2); }); } }); $( ".datepicker-to-fill" ).datepicker(); });
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <p>Main Date: <input type="text" id="datepicker"></p> <p>Date1: <input type="text" class="datepicker-to-fill" data-days="1" id="datepicker1"></p> <p>Date2: <input type="text" class="datepicker-to-fill" data-days="2" id="datepicker2"></p> <p>Date3: <input type="text" class="datepicker-to-fill" data-days="3" id="datepicker3"></p> <p>Date4: <input type="text" class="datepicker-to-fill" data-days="4" id="datepicker4"></p> <p>Date5: <input type="text" class="datepicker-to-fill" data-days="5" id="datepicker5"></p> <p>Date6: <input type="text" class="datepicker-to-fill" data-days="6" id="datepicker6"></p> <p>Date7: <input type="text" class="datepicker-to-fill" data-days="7" id="datepicker7"></p> <p>Date8: <input type="text" class="datepicker-to-fill" data-days="8" id="datepicker8"></p> <p>Date9: <input type="text" class="datepicker-to-fill" data-days="9" id="datepicker9"></p> <p>Date10: <input type="text" class="datepicker-to-fill" data-days="10" id="datepicker10"></p> <p>Date11: <input type="text" class="datepicker-to-fill" data-days="11" id="datepicker11"></p> <p>Date12: <input type="text" class="datepicker-to-fill" data-days="12" id="datepicker12"></p> <p>Date13: <input type="text" class="datepicker-to-fill" data-days="13" id="datepicker13"></p> <p>Date14: <input type="text" class="datepicker-to-fill" data-days="14" id="datepicker14"></p>
基於2個輸入字段的值進行ajax調用以填充jquery自動完成
[英]ajax call based on the value of 2 input fields to populate jquery autocomplete
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.