Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Datepicker


Does Metronic have a datepicker inline?
I mean not in input. Datepicker which I can add on the page as a calendar grid. Metronic 8 demo1


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 (7)


Ensure that the required stylesheets and scripts for Bootstrap and jQuery are included in your heardle project. These are typically already bundled with Metronic.



@geometry dash meltdown Got it. I knew what I needed to do.



Hi,

Thank you for reaching out to us.

Metronic React supports Flatpckr plugin, you can find usage examples in our documentation.
https://preview.keenthemes.com/metronic8/react/docs/flatpickr

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi, thak you for your reply. I want to ask additional question. When i was waiting for your response i found this https://preview.keenthemes.com/metronic/demo7/crud/forms/widgets/bootstrap-datepicker.html. How can i apply this beutiful inline calendar to react metronic? Is it flatpckr too?



Hi,

The page you are referring to is Metronic 7 HTML version, meanwhile, the most recent version is Metronic 8. In Metronic 8 we do not use this datepicker plugin but you can discover various alternatives in Metronic 8 docs.

https://preview.keenthemes.com/html/metronic/docs/forms/tempus-dominus-datepicker

https://preview.keenthemes.com/html/metronic/docs/forms/flatpickr

https://preview.keenthemes.com/html/metronic/docs/forms/daterangepicker

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi, okay i am trying to use flatpickr, cause it is only documentation available in react metronic, but i got some troubles with it. Please help me. I am trying to use inline mode of flatpickr, but metronic theme changing is not affect on calendar. Calendar is white when theme is dark or light, does not matter.



Hi,

Here is an example of using react-flatpickr calendar as inline input:


const [dateState, setDateState] = useState<Date>();

return (
<>
<Flatpickr
value={dateState}
options={{
inline: true
}}
onChange={([date]:Date[]) => {
setDateState(date);
}}
className="form-control"
placeholder="Pick date"
/>
</>


Please let us know if you have any further questions on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(