如何在同一页面上使用两个引导日期范围选择器

How to use two bootstrap daterangepickers on same page

本文关键字：两个 选择器 范围 日期 一页      更新时间：2023-09-26

这是我使用引导程序实现daterangepicker1的代码。

<div class="input-group input-large custom-date-range" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                            <input type="text" class="form-control dpd1" name="from_total"  required placeholder="Start date" id="from_total">
                                            <span class="input-group-addon">To</span>
                                            <input type="text" class="form-control dpd1" name="to_total"   required placeholder="End date" id="to_total">
                                        </div>

这是我实现第二个日期范围选择器的代码...

 <div class="input-group input-large custom-date-range" data-date="13/07/2013" data-date-format="mm/dd/yyyy">
                                            <input type="text" class="form-control dpd1" name="from_owner"  placeholder="Start date" id="from_owner" >
                                            <span class="input-group-addon">To</span>
                                            <input type="text" class="form-control dpd1" name="to_owner" placeholder="End date" id="to_owner"  >
                                        </div>

两个日期范围选择器都工作正常，因为单击每个输入框时都会打开日历，我可以获取值，关于字段"from_total"和"to_total"[前两个]当我在"from_total"中选择值时，它会直接转到"to_toal"这很好，这正是我想要的,,,,但是第二个日期范围选择器出现问题，当我在"from_owner"中选择值时，它不会转到"to_owner"而是光标移动到"to_total"，这是第一个日期范围选择器中的第二个输入字段，这是不正确的，我希望它移动到"to_owner"，如果您曾经使用引导程序在单个页面上使用过两个日期范围选择器，我希望你能理解我并提供帮助。提前感谢.....

您可以将不同的 id 分配给日期选择器

<div class="input-group input-large custom-date-range" data-date="13/07/2013" data-date-format="mm/dd/yyyy" id="date1">
<input type="text" class="form-control dpd1" name="from_total"  required placeholder="Start date" id="from_total">
<span class="input-group-addon">To</span>
<input type="text" class="form-control dpd1" name="to_total"   required placeholder="End date" id="to_total">
</div>
<div class="input-group input-large custom-date-range" data-date="13/07/2013" data-date-    format="mm/dd/yyyy" id="date2">
<input type="text" class="form-control dpd1" name="from_owner"  placeholder="Start date" id="from_owner" >
<span class="input-group-addon">To</span>
<input type="text" class="form-control dpd1" name="to_owner" placeholder="End date" id="to_owner"  >
</div>
相关文章：