Introducing CrudHunt:Open-source Full-stack CRUDs for Next.js by KeenThemes
Browse CrudHunt

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


As a result, these people use marijuana in large amounts for longer periods of time than what they intend to. 
letsvpn



I read this article. I think You put a lot of effort to create this article. I appreciate your work.
telegram中文语言包



Hey, you used to write wonderful, but the last few posts have been kinda boring¡K I miss your great writings. Past few posts are just a bit out of track! come on!
telegram下载安装包



Consequently, starting in the amount of electronic marketing strategy, is whenever a company's existing website, which will be to review the present site and its purpose is to improve the potency of the future. There is no evidence that the development an
telegram下载



wow, great, I was wondering how to cure acne naturally. and found your site by google, learned a lot, now i’m a bit clear. I’ve bookmark your site and also add rss. keep us updated…
google



Consequently, starting in the amount of electronic marketing strategy, is whenever a company's existing website, which will be to review the present site and its purpose is to improve the potency of the future. There is no evidence that the development an
BOLASENJA



Yes, great US Military force. Also, in his post you have given a chance to listen about US Military. I really appreciate your work. Thanks for sharing it.
casino online



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