我在初始化flatpickr 时间选择控件【后】，先在时间控件选择框里面乱选了一个结束时间。然后选择一条带有开始时间和结束时间的信息。并且同时设置flatpickr的最大和最小时间。 在我没有重新设置最大最小时间时flatpickr设置defaultHour都是有用且正常的。但是只要我一重新设置最大和最小时间，defaultHour就没用了。后来发现实际上是因为我设置的最大时间没用包含我之前乱选的时间【---------最大时间2019.1.7--------乱选时间2019.1.8】。所以导致时分秒的选择变成0了。所以我后来怎么选defaultHour都没用了。
一、开始随便选择一个时间。结束时间的defaultHour 是23
二、设置一个maxDate 和 minDate
三、此时再次选择结束时间，时分秒就会为0，而不是defaultHour设置的23
我的解决办法：
在设置maxDate 和 minDate的时候。手动把之前的值置空。就可以了。
因为flatpickr虽然设置了defaultHour，但是我们在手动修改time的时候它下一次选择不会重回defaultHour。我之前设置maxDate的时候，因为不在一个范围，选择的时分秒就被自动置为0了。以后每次选择就都是0【唉，这个问题想了老半天了。怪我不熟】
我在初始化flatpickr 时间选择控件【后】，先在时间控件选择框里面乱选了一个结束时间。然后选择一条带有开始时间和结束时间的信息。并且同时设置flatpickr的最大和最小时间。 在我没有重新设置最大最小时间时flatpickr设置defaultHour都是有用且正常的。但是只要我一重新设置最大和最小时间，defaultHour就没用了。后来发现实际上是因为我设置的最大时间没用包含我之前乱...
下载 演示 GitHub
flat
pic
kr
不依赖于任何库。更小的用户界面，但有很多主题。丰富的 API 和事件系统使其适用于任何环境。可用于 webpack ，也可作为 jQuery 插件使用。
安装
flat
pic
kr
模块
使用 NPM 安装
flat
pic
kr
模块。包管理工具： https://www.npmjs.com/package/bower-npm-resolver
# using npm install
npm i
flat
pic
kr
--save
flat
pic
kr
-JavaScript日期时间选择器
几乎每个大型SPA或项目都涉及日期和时间输入。 这些浏览器的本机实现是不一致的，并且功能受到限制。 其他大多数库都要求您引入大量依赖项，例如jQuery，Bootstrap和moment.js。 我想要的东西开箱即用，无依赖，功能强大且可扩展。
功能概述：
无依赖（无no肿的捆绑包）
简单，精致的UX
日期+时间输入
可以选择多个日期
可以用作时间选择器
以人类友好的格式显示日期
使用任意逻辑轻松禁用特定日期，日期范围或任何日期
51个地区
8种丰富多彩的主题（包括深色和深色）
可用于React，Angular，Vue，Ember等的库
flat
pic
kr
提供的其他功能只有其他库的一小部分。
IE9及更高版本，Edge，iOS Safari 6 +，Chrome 8 +，Firefo
要创建的最棘手的字段之一是日期/时间选择 。 开发人员通常在月/日/年使用简单的选择菜单，或者依靠各种插件来完成工作。
选择的字段工作正常，但有些笨拙。 相反，您可以使用
Flat
pic
kr
插件来完善您的表单。 这是一个免费的，开源JavaScript日历选择器，具有零依赖关系 。
它在设计时考虑了极简主义 ，因此它可以适合任何网站布局，任何Web形式，并且可以在任何现代设备中使用。
一、使用方法：1. 在页面中引入
flat
pic
ker.css和
flat
pic
ker.js文件。
<link rel="stylesheet" type="text/css" href="/path/to/
flat
pic
kr
.css">
<script src="/path/to/
flat
pic
kr
.js"></script>
2. HTM...
npm install vue-
flat
pic
kr
-component --save
Yarn安装：
yarn add vue-
flat
pic
kr
-component
<template>
<div class="form-group row pb-4 border-bo...
第一次接触该插件我就对‘强大’二字感觉好奇，是什么样的插件才可以配的上这两个字，带着好奇心我该插件的中文文档上查看了一番。首先该插件界面简单实用，不仅支持PC端也支持移动手机端。内置提供了主题效果（目前博主还没有用到该功能），并支持中文。它有以
实用SVG作为界面图标。
兼容JQuery。
支持对日期格式的解析。
轻量级...
如下可以将 id = 1 作为 props 传入每个子组件中
React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
id: 1,
详细示例如下
import React, { PureComponent } from 'react';
export
default
class DecorateChildren extends PureC
给这段代码配一个google风格的css样式。 <!DOCTYPE html> <html> <head> <title>用户登录</title> <link rel="stylesheet" type="text/css" href="login.css"> </head> <body> <h1>用户登录</h1> <form action="登录.HTML" method="post"> <label style="display: inline-block;" for="username">用户名：</label> <input style="display: inline;"type="text" id="username" name="username"><br><br> <label style="display: inline-block;" for="password">密 码：</label> <input style="display: inline;"type="password" id="password" name="password"><br><br> <label style="display: inline-block;" for="remember">记住我：</label> <input style="display: inline;"type="checkbox" id="remember" name="remember"><br><br> <input type="submit" value="登录"> </form> </body> </html>
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/
flat
pic
kr
/dist/
flat
pic
kr
.min.css">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f2f2f2;
text-align: center;
color: #4285f4;
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
padding: 20px;
margin: 0 auto;
max-width: 400px;
label {
display: block;
margin-bottom: 10px;
color: #555;
input[type="text"], input[type="password"], input[type="checkbox"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
input[type="submit"] {
background-color: #4285f4;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
input[type="submit"]:hover {
background-color: #3367d6;
</style>
</head>
<h1>用户登录</h1>
<form action="登录.HTML" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<label for="remember">记住我：</label>
<input type="checkbox" id="remember" name="remember">
<input type="submit" value="登录">
</form>
</body>
</html>
