Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (28)


@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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(