{"id":40553,"date":"2017-11-16T21:01:23","date_gmt":"2017-11-16T13:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=40553"},"modified":"2017-11-16T19:03:05","modified_gmt":"2017-11-16T11:03:05","slug":"flatpickr-date-picker-plugin","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/flatpickr-date-picker-plugin\/","title":{"rendered":"Create Minimalist Datetime Input Select with Flatpickr"},"content":{"rendered":"

One of the trickiest fields to create is the date\/time select<\/strong>. Developers often resort to simple select menus for the month\/day\/year or rely on various plugins<\/a> to do the job.<\/p>\n

Select fields work fine but they\u2019re a little clunky. Instead, you can jazz up your form with the Flatpickr plugin<\/a><\/strong>. It\u2019s a free, open-source JavaScript calendar picker with zero dependencies<\/strong>.<\/p>\n

It was designed with minimalism in mind<\/a><\/strong>, so it can fit into any website layout, any web form, and should be usable from any modern device.<\/p>\n

\"Flatpickr<\/a><\/figure>\n

Read Also:<\/strong> A Definitive Way to Format Dates for International Sites<\/a><\/p>\n

One nice thing about this plugin is the variety of custom options<\/strong>. You can restyle how the dates appear in the text field and where the calendar starts (defaults on \u201ctoday\u201d).<\/p>\n

But, you can also use it as strictly a date picker<\/strong> if you have no need for the time selection. It\u2019s merely an optional feature that lets you pass more data through the form with this one picker.<\/p>\n

Take a look at the Examples page<\/a><\/strong> to see Flatpickr in action.<\/p>\n

You can also set targeted options<\/strong> to limit the date picker\u2019s behavior, such as:<\/p>\n