Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$ 
Datepicker
How can i implement double datepicker? it can only work the first one
<div class="row fv-row mb-7">
<div class="col-md-3 text-md-end">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="required">Join Date</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Set join date"></i>
</label>
<!--end::Label-->
</div>
<div class="col-md-9">
<!--begin::Input-->
<input class="form-control form-control-solid" name="join_date" placeholder="Pick a join date" id="kt_datepicker_1" />
<!--end::Input-->
</div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row fv-row mb-7">
<div class="col-md-3 text-md-end">
<!--begin::Label-->
<label class="fs-6 fw-bold form-label mt-3">
<span class="">Resign Date</span>
<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Set the name of the store"></i>
</label>
<!--end::Label-->
</div>
<div class="col-md-9">
<!--begin::Input-->
<input class="form-control form-control-solid" name="resign_date" placeholder="Pick a resign date" id="kt_datepicker_1" />
<!--end::Input-->
</div>
</div>
Replies (1)
Hi Bowi andreyano
You have both inputs with the same id attribute. Please try to change the to a different name.
In the sample js file, we initialize the datepicker in this file
src/js/custom/apps/projects/settings/settings.js
$("#kt_datepicker_1").flatpickr();Thanks
