Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(