Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Datepicker date format


Hello,

How do I change the format of the date displayed in the frontend for the datepicker from M/DD/YYYY (e.g 10/25/2022) to DD/M/YYYY(e.g 25/10/2022).

I have tried setting this in my own custom js by specifying the format at DD/M/YYYY (and also tried DD/MM/YYYY) and by setting the locale in my js. However, this doesn't works.

What do I need to change in the global plugins/js bundle to change the format as detailed above?

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

Replies (3)


Hi,

If you are reffering to Flatpickr plugin here you should refer to the plugin's official documentation here. You will need to set the date format for each instance of Flatpickr input.

Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Regards.



Hi Sean,

No, I am referring to the date picker here as mentioned in the ticket title: https://preview.keenthemes.com/html/metronic/docs/forms/daterangepicker

The official documentation shows how to set the date format locally (using locale & format) which I have followed but something in your plugins bundle is overriding this. We just don't know what.

Any idea?

Thanks,



Hi,

Can you please paste your code here inside the PRE tag to highlight a code? By right, if you initialized a new instance of Daterangepicker with a custom format it should work as expected. We do not have any global format settings for the Daterangepicker.

Are you able to compile the assets from the src folder using gulp or webpack?

To customize the JS you will need to use the build tools.

Regards.


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