【Vue FlatPickr Component】中文配置示例

【Vue FlatPickr Component】配置示例

核心代码
:config="{allowInput: true, locale: 'zh', enableTime: true, dateFormat: 'Y-m-d H:i:S', time_24hr: true, enableSeconds: true }"

详情
locale: 'zh'：使用中文
enableTime: true：开启选择时间
dateFormat: 'Y-m-d H:i:S'：格式化日期
time_24hr: true 24小时制
enableSeconds: true 开启选择秒

完整示例

<flat-pickr slot-scope="{focus, blur}"
            @on-open="focus"
            @on-close="blur"
            v-model="purchase_time"
            :config="{allowInput: true, locale: 'zh', enableTime: true, dateFormat: 'Y-m-d H:i'}"
            class="form-control datepicker"
            placeholder="购入时间">
</flat-pickr>
<script>
// 引入示例，具体如何引用请自行调整
import FlatPickr from 'vue-flatpickr-component';

import 'flatpickr/dist/flatpickr.css';
import 'flatpickr/dist/l10n/zh.js';

export default {
  components: {
    FlatPickr
  }
}
</script>

完整的config 配置：

官方文档：https://flatpickr.js.org/options/

Config Option	Type	Default	Description (中文翻译)
altFormat	String	“F j, Y”	完全与日期格式相同，但用于altInput字段的格式
altInput	Boolean	false	显示用户可读的日期（按照altFormat），但返回给服务器的是完全不同的日期
altInputClass	String	“”	此类将添加到altInput选项创建的输入元素中。请注意，altInput已经继承了原始输入的类。
allowInput	Boolean	false	允许用户直接在输入框中输入日期。默认情况下，禁用直接输入。
allowInvalidPreload	Boolean	false	允许预加载无效日期。当禁用时，如果提供的日期无效，字段将被清除
appendTo	HTMLElement	null	将日历附加到指定节点而不是body。
ariaDateFormat	String	“F j, Y”	定义日期在日历天数的aria-label中的格式，使用与dateFormat相同的标记。如果更改此值，应选择一个在屏幕阅读器读出时有意义的值。
conjunction	String	null	在“multiple”模式下，用于分隔输入字段中的日期的连接词。
clickOpens	Boolean	true	单击输入框是否应打开选择器。如果希望手动打开日历，则可以禁用此选项并使用.open()方法打开日历。
dateFormat	String	“Y-m-d”	用于定义日期在输入框中显示方式的字符字符串。支持的字符在下表中定义。
defaultDate	String	null	设置初始选择的日期（们）。
			如果使用mode: "multiple"或范围日历，则提供一个日期对象数组或符合dateFormat的日期字符串数组。
			否则，您可以提供单个日期对象或日期字符串。
defaultHour	Number	12	小时元素的初始值。
defaultMinute	Number	0	分钟元素的初始值。
disable	Array	[]	参见禁用日期
disableMobile	Boolean	false	将disableMobile设置为true，始终使用非原生选择器。
			默认情况下，除非使用某些选项（例如disable），否则flatpickr将使用原生日期时间小部件。
enable	Array	undefined	参见启用日期
enableTime	Boolean	false	启用时间选择器
enableSeconds	Boolean	false	在时间选择器中启用秒。
formatDate	Function	null	允许使用自定义日期格式化函数，而不是使用内置的日期格式处理功能（如dateFormat、altFormat等）。
hourIncrement	Integer	1	调整小时输入的步长（包括滚动）
inline	Boolean	false	内联显示日历
maxDate	String/Date	null	用户可以选择的最大日期（包括该日期）。
minDate	String/Date	null	用户可以开始选择的最小日期（包括该日期）。
minuteIncrement	Integer	5	调整分钟输入的步长（包括滚动）
mode	String	“single”	“single”、"multiple"或"range"之一
nextArrow	String	>	用于切换月份的箭头图标的HTML
noCalendar	Boolean	false	在日历中隐藏日期选择。
			与enableTime一起使用，可以创建时间选择器。
onChange	Function, [functions]	null	在每次选择日期时触发的函数。参见Events API
onClose	Function, [functions]	null	在每次关闭日历时触发的函数。参见Events API
onOpen	Function, [functions]	null	在每次打开日历时触发的函数。参见Events API
onReady	Function, [functions]	null	日历准备就绪时触发的函数。参见Events API
parseDate	Function	false	一个期望日期字符串并返回Date对象的函数
position	String	“auto”	日历在垂直和水平方向上相对于输入框的位置。格式为"[vertical] [horizontal]"。垂直方向可以是auto、above或below（必需）。水平方向可以是left、center或right。
			例如：“above"或"auto center”
positionElement	Element	null	日历将相对于其定位的元素进行定位。
prevArrow	String	<	用于左箭头图标的HTML。
shorthandCurrentMonth	Boolean	false	使用简写版本显示月份（例如，Sep而不是September）。
static	Boolean	false	将日历定位在包装器内并靠近输入元素。
showMonths	Integer	1	在显示日历时同时显示的月份数量。
time_24hr	Boolean	false	启用24小时制的时间选择器，无需选择AM/PM。
weekNumbers	Boolean	false	在日历中显示周数。
wrap	Boolean	false	自定义元素和输入组
monthSelectorType	String	“dropdown”	月份在日历标题中的显示方式。
			“dropdown"或"static”
			如果showMonths的值大于1，则月份始终显示为静态。