第1集丨你好 flatpickr

秋堂主

已于 2022-07-12 15:50:50 修改

阅读量405

点赞数

文章标签： javascript 前端开发语言

于 2022-07-12 11:29:51 首次发布

本文链接：https://blog.csdn.net/DUQGQG/article/details/125739249

版权

官网

https://flatpickr.js.org/

安装

通过npm安装

flatpickr is delivered primarily via npm.
Bower users: please use https://www.npmjs.com/package/bower-npm-resolver

# 安装
npm install -g bower-npm-resolver

# using npm install
npm i flatpickr --save

在线获取

从flatpickr jsdelivr 提取最新的版本

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

如何使用

引入

引入 flatpickr.css 样式
该插件基于jQuery开发，需要先引入jQuery
引入 flatpickr.min.js

<link rel="stylesheet" type="text/css" href="./dist/flatpickr.css">

<script type="text/javascript" src="./jquery-1.8.0.min.js">
<script type="text/javascript" src="./dist/flatpickr.min.js">

创建flatpickr日期

$("#myID").flatpickr({         //初始化插件
	enableTime: true,
    dateFormat: "Y-m-d H:i",
    disable: [  //禁用日期
        "2020-01-20",
        {
            from: "2020-01-02",
            to: "2020-01-05"
        },
        {
            from: "2020-01-08",
            to: "2020-01-10"
        }
    ], //禁用日期
	time_24hr: true,		   //24小时制
    minDate: "2020-01-01",     //最小日期
    maxDate: "2020-01-28"      //最大日期

});

完整代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<!-- Put your page Title here -->
<title>	通用测试 </title>


<link rel="stylesheet" type="text/css" href="./dist/flatpickr.css">
<link rel="stylesheet" type="text/css" href="./dist/themes/material_blue.css">
<STYLE type='text/css'>
</STYLE>

<script type="text/javascript" src="./jquery-1.8.0.min.js"></script>
<!--script type="text/javascript" src="generalTest.js"></script-->
<script type="text/javascript" src="./dist/flatpickr.min.js"></script>

</head>

<body>
<input id="myID" value="2017-01-01" class="form-control">

<script type="text/javascript">
$("#myID").flatpickr({         //初始化插件
	enableTime: true,
    dateFormat: "Y-m-d H:i",
    disable: [  //禁用日期
        "2020-01-20",
        {
            from: "2020-01-02",
            to: "2020-01-05"
        },
        {
            from: "2020-01-08",
            to: "2020-01-10"
        }
    ], //禁用日期
	time_24hr: true,		   //24小时制
    minDate: "2020-01-01",     //最小日期
    maxDate: "2020-01-28"      //最大日期

});
</script>
</body>
</html>

秋堂主

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
第1集丨你好 flatpickr

flatpickr 是一个轻量级和强大的日期时间选择器。安装通过npm安装flatpickr is delivered primarily via npm.Bower users: please use https://www.npmjs.com/package/bower-npm-resolver在线获取从flatpickr jsdelivr 提取最新的版本引入引入 flatpickr.css 样式该插件基于jQuery开发，需要先引入jQuery引入 flatpickr.m
复制链接

扫一扫