Shulou(Shulou.com)06/03 Report--

This article will explain in detail how the pure JavaScript flat style date and time selector is. The content of the article is of high quality. Therefore, Xiaobian shares it with you as a reference. I hope that after reading this article, you will have a certain understanding of relevant knowledge.

Flatpickr is a powerful pure JS flat style date-time picker plugin. The date-time picker supports mobile phones, provides multiple built-in theme effects, uses SVG as an icon for the interface, and supports parsing of various date formats.

installation

The flatpickr date-time picker plug-in can be installed via npm or bower.

npm install flatpickr bower install flatpickr-calendar

use method

Introduction of flatpickr.css and flatpickr.js files to the page.

HTML structure

The HTML structure of one of the simplest date-time selectors is as follows:

Initialize plug-ins

There are several ways to instantiate a date-time selector. As follows:

//Returns an array by class name document.getElementsByClassName("myClass").flatpickr({.. config}); //by ID document.getElementById("myID").flatpickr(); //using jQuery $(".calendar").flatpickr();

configuration parameters

In configuration parameters, all parameters of type string or boolean can be set in HTML tags via the data-attribute. For example: data-min-date, data-default-date, data-default-date, etc.

Parameter Type Default Description

altFormatstring"F j, Y" Date format for altInput. altInputBooleanfalse Whether to display the date and time in some user-friendly way. altInputClassString"" Custom class added to input. For example, bootstrap users may need to add a form-control class. allowInput booleanfalse Whether to allow users to enter dates directly into the input box. clickOpensbooleantrue Whether to open the date-time selection interface when clicking the input box. If you want to open it manually with the.open() method, set this option to false. dateFormatstring"Y-m-d" Sets the date display format. defaultDateString/ObjectDate null Sets an initial date. disablearray[] Date on which it was disabled. enableTimebooleanfalse Whether to enable time selection. enableSecondsbooleanfalse Whether seconds can be selected in the Time Selector. noCalendarbooleanfalse Whether to hide the calendar. hourIncrementinteger Step size of the 1 hour input box. minuteIncrementinteger Step size of the 5 minute input box. inlinebooleanfalse Whether to display the calendar inline. staticbooleanfalse The date selector is located at the location of the package container. wrapBooleanFalse wraps elements. maxDateStringnull The maximum date the user can select. minDateStringnull The smallest date the user can select. onChangefunction(dateObject, dateString)null Triggers this function every time a date is selected. onOpenfunction(dateObject, dateString)null This function is triggered every time the calendar is opened. onClosefunction(dateObject, dateString)null Triggers every time the calendar is closed. parseDatefunctionfalse Takes a date string and returns a date object. shorthandCurrentMonthbooleanfalse Display month in shorthand weekNumbersbooleanfalse Whether to display the number of weeks in the calendar. time_24hrbooleanfalse Whether to display time in 24 hour format. utcbooleanfalse If true, the date will be parsed, formatted, and displayed in UTC format. prevArrowstring Backward arrow icon.

date format character

Character Description Example

d The number of days in the month, preceded by 0 if less than 2 digits. 01 - 31D Abbreviated text for a day of the week Mon - Sunl(lowercase L) Text for a day of the week Sunday - Saturdayj Days of the month without a leading 0 1 - 31J Days of the month without a leading 0 1st, 2nd, to 31stw uses a number to represent a day of the week 0 (Sunday) - 6 (Saturday)F Full text representation of month January-Decemberm uses a number to represent the month, preceded by 0. 01 - 12n Use numbers to represent months without leading zeros. 1 - 12M Abbreviated text for months Jan-DecU Timestamp 1413704993y Two digits for year 99 or 03Y Four digits for year 1999 or 2003

time format characters

Character Description Example

H24 hours 00 to 23h22 hours 1 to 12i minutes 00 to 59 s (less than 2 digits add 0) 00 to 59s 0 - 59KAM/PMAM or PM

For localization of this date-time selector and some other ways to use it, see Demo DEMO.

About pure JavaScript flat style date and time selector is how to share here, I hope the above content can have some help for everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.