html时间选择控件 简书,flatpickr好看的日期选择器插件

百度盘链接: https://pan.baidu.com/s/1c2GRktU 密码: jf3v (主要需要的都在dist这个文件夹内)

1.导入日期选择器的css样式(底部有各种颜色对应的样式)

dist文件夹里的flatpickr.min.css

2.导入js包

dist文件夹里的flatpickr.js或flatpickr.min.js，若需要转为中文，则需要再导入src文件夹里的flatpickr.l10n.zh.js

3.HTML示例

4.初始化插件

document.getElementById("time").flatpickr(); // js初始化方法

$("#time").flatpickr(); // jQuery初始化方法

5.配置参数

在配置参数中，所有的类型为string或boolean的参数都可以通过data-属性在HTML标签中进行设置。例如：data-min-date、data-default-date、data-default-date等。

参数

类型

默认值

描述

altFormat

string

"F j, Y"

altInput的日期格式。

altInput

Boolean

false

是否使用某种用户友好的方式来显示日期时间。

altInputClass

String

""

添加到input上的自定义class类。例如bootstrap用户可能需要添加一个form-control class。

allowInput

boolean

false

是否允许用户直接在输入框中输入日期。

clickOpens

boolean

true

是否在点击输入框时打开日期时间选择界面。如果你想通过手动.open()方法来打开，该选项设置为false。

dateFormat

string

"Y-m-d"

设置日期显示格式。

defaultDate

String/Date Object

null

设置一个初始的日期。

disable

array

[]

被禁用的日期。

enableTime

boolean

false

是否启用时间选择。

enableSeconds

boolean

false

在时间选择器中是否可以选择秒。

noCalendar

boolean

false

是否隐藏日历。

hourIncrement

integer

1

小时输入框的步长。

minuteIncrement

integer

5

分钟输入框的步长。

inline

boolean

false

是否以内联的方式显示日历。

static

boolean

false

日期选择器位于包裹容器的位置。

wrap

Boolean

false

包裹元素。

maxDate

String

null

用户可以选择的最大日期。

minDate

String

null

用户可以选择的最小日期。

onChange

function(dateObject, dateString)

null

每次日期被选择的时候都触发该函数。

onOpen

function(dateObject, dateString)

null

每次日历被打开时都会触发该函数。

onClose

function(dateObject, dateString)

null

每次日历被关闭时都会触发该函数。

parseDate

function

false

接收一个日期字符串并返回一个日期对象。

shorthandCurrentMonth

boolean

false

以简写方式显示月份

weekNumbers

boolean

false

是否在日历中显示星期数。

time_24hr

boolean

false

是否以24小时格式来显示时间。

utc

boolean

false

如果为true，日期将会被解析、格式化和显示为UTC格式。

prevArrow

string

<

向前箭头图标。

nextArrow

string

>

向后箭头图标。

日期格式字符

字符

描述

示例

d

月份中的天数，如果不满2个数字的会前导0。

01 - 31

D

一个星期中某一天的简写文本表示

Mon - Sun

l(小写的L)

一个星期中某一天的文本表示

Sunday - Saturday

j

不带前导0的月份中的天数

1 - 31

J

带序号后缀，不带前导0的月份中的天数

1st, 2nd, to 31st

w

使用数字来代表星期中的某一天

0 (星期天) - 6 (星期六)

F

月份的完整文本表示

January - December

m

使用数字来表示月份，前导带0。

01 - 12

n

使用数字来表示月份，前导不带0。

1 - 12

M

月份的简写文本表示

Jan - Dec

U

时间戳

1413704993

y

两个数字代表的年

99 or 03

Y

4个数字代表的年

1999 or 2003

时间格式字符

字符

描述

示例

H

24小时制

00 to 23

h

12小时制

1 to 12

i

分钟

00 to 59

S

秒(不满2位数补0)

00 to 59

s

秒

0 - 59

K

AM/PM

AM or PM

下面是不同颜色样式的日期选择器

1.flatpickr.min.css

默认样式.jpg

2.flatpickr.material_blue.min.css

蓝色.jpg

3.flatpickr.material_red.min.css

红色.jpg

4.flatpickr.material_orange.min.css

橙色.jpg

5.flatpickr.material_green.min.css

原谅色.jpg

6.flatpickr.dark.min.css

黑色.jpg

7.flatpickr.confetti.min.css

金色.jpg

8.flatpickr.grapefruit.min.css

西柚色.jpg

9.flatpickr.base16_flat.min.css

银灰色.jpg