README

使用此包，您可以在项目中添加一个漂亮的日期或日期时间选择器，而无需触摸任何 JavaScript，利用 Laravel 组件的力量。这只是一个为 Flatpickr JavaScript 库提供的 Laravel 组件包装器。Flatpickr。

来自尼泊尔（❤️）的创造

支持

您可以通过订阅我的 YouTube 频道 - Laratips 来支持我。

如果您想继续开发此包并希望开发其他类似的包，那么您可以通过向我的 Wise 账户（尼泊尔货币）发送一些钱来从经济上支持我。

我的 Wise 电子邮件地址：ashish.dhamala2015@gmail.com

如果您决定支持我，请在邮件中发送您的 Twitter 头像，这样我就可以在 Twitter 上为您欢呼。

安装

您可以通过 composer 安装此包

composer require asdh/laravel-flatpickr

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="flatpickr-config"

您可以使用以下命令发布资产

php artisan vendor:publish --tag="flatpickr-assets"

这是已发布配置文件的内容

return [
    /**
     * The url to be used to serve css file.
     * If null, it will use the one shipped with package.
     */
    'css_url' => env('FLATPICKR_CSS_URL', null),

    /**
     * The url to be used to serve js file.
     * If null, it will use the one shipped with package.
     */
    'js_url' => env('FLATPICKR_JS_URL', null),

    /**
     * Determines if the styles shipped with the package should be used.
     * Setting it to false will remove the styling for the component.
     * The flatpickr css will be untouched.
     */
    'use_style' => env('FLATPICKR_USE_STYLE', true),

    /**
     * The language that flatpickr will use.
     * If no value is passed, it will be the default one.
     */
    'locale' => env('FLATPICKR_LOCALE', null),
];

使用方法

您需要在 HTML 或 blade 文件中包含包提供的 css 和 js。

添加 CSS

在页面的 head 部分包含此样式

@include('flatpickr::components.style')

或者，您可以使用 Laravel blade 组件语法

<x-flatpickr::style />

如果您想为 CSS 使用不同的 url，则可以从 .env 文件中更改它

FLATPICKR_CSS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css

您甚至可以直接从组件本身更改 url

<x-flatpickr::style
    url="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.css"
/>

从组件传递的 url 将比配置文件具有更高的优先级。

添加 JS

同样，在页面的底部包含此脚本

@include('flatpickr::components.script')

或者，您可以使用 Laravel blade 组件语法

<x-flatpickr::script />

如果您想为 JS 使用不同的 url，则可以从 .env 文件中更改它

FLATPICKR_JS_URL=https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js

您甚至可以直接从组件本身更改 url

<x-flatpickr::script
    url="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"
/>

从组件传递的 url 将比配置文件具有更高的优先级。

区域设置

如果您想使用不同的区域设置，则可以从 .env 文件中更改它

FLATPICKR_LOCALE=de

您可以从这里查看可用的区域设置。

使用组件

将其添加到您的页面。

<x-flatpickr />

是的，就这么简单。现在您页面上就有了一个漂亮的日期选择器，而无需触摸任何 JavaScript。

组件属性

我为该组件创建了不同的 props，这些 props 将转换为 flatpickr 的配置选项。请确保查看 flatpickr 的 配置选项。

这里写的属性描述大多来自 flatpickr 文档页面。

id

类型： string

设置组件的 id。它将应用于底层的 input 标签。如果没有提供 id，则将使用自动生成的 id。

示例

<x-flatpickr id="laravel-flatpickr" />

dateFormat

类型： string

用于定义在输入框中显示日期的字符字符串。请参阅 flatpickr 文档 页面以获取支持的字符。默认日期格式为 Y-m-d，但您可以将其更改为其他格式，例如 d/m/Y。

示例

<x-flatpickr date-format="d/m/Y" />

altFormat

类型： string

与日期格式完全相同，但用于altInput字段。如果您想要用户看到不同的格式，可以使用这个功能。默认情况下，它将使用与dateFormat相同的格式。

示例

<x-flatpickr alt-format="F j, Y" />

minDate

类型： string|Carbon

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

您可以通过传递一个Carbon实例或一个Carbon或DateTime支持的字符串格式的日期。

示例

<x-flatpickr min-date="2022-02-13" />

OR

<x-flatpickr :min-date="today()" />

OR

<x-flatpickr :min-date="\Carbon\Carbon::parse('2022-02-13')" />

maxDate

类型： string|Carbon

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

您可以通过传递一个Carbon实例或一个Carbon或DateTime支持的字符串格式的日期。

示例

<x-flatpickr max-date="2022-09-18" />

OR

<x-flatpickr :max-date="today()" />

OR

<x-flatpickr :max-date="today()->subDays(20)" />

showTime

类型： bool

显示时间选择器。

示例

<x-flatpickr show-time />

timeFormat

类型： string

用于定义在输入框中显示时间的字符字符串。请查看flatpickr 文档页面以获取支持的字符。默认时间格式为H-i，但您可以将其更改为其他格式，如h:i。

示例

<x-flatpickr show-time time-format="h:i" />

当您使用show-time属性与alt-format一起使用时，请确保在alt-format中同时写入日期和时间格式，如下所示

示例

<x-flatpickr show-time time-format="h:i" alt-format="F j, Y, H:i" />

minTime

类型： string

用户可以选择的最小时间。

示例

<x-flatpickr show-time min-time="13:25" />

maxTime

类型： string

用户可以选择的最大时间。

示例

<x-flatpickr show-time max-time="23:15" />

time24hr

类型： bool

启用时，以24小时模式显示时间选择器，不选择AM/PM。默认设置为true。要显示为12小时模式，请将其设置为false。

示例

以12小时模式显示时间选择器，有上午和下午。

<x-flatpickr show-time :time24hr="false" />

firstDayOfWeek

类型： int

设置日历应开始的第一个星期几。默认为0（星期日）。

示例

将星期的第一天设置为星期一。

<x-flatpickr :first-day-of-week="1" />

disableWeekend

类型： bool

禁用周末。周六和周日被禁用。

示例

<x-flatpickr disable-weekend />

disable

类型： array

禁用提供的日期。可以是date string或Carbon的数组。

示例

<x-flatpickr :disable="['2022-02-13', '2022-02-14']" />

OR

<x-flatpickr :disable="[today(), today()->addDay()]" />

enable

类型： array

仅启用提供的日期。可以是date string或Carbon的数组。当使用时，除了enable数组中提供的日期之外的所有日期都将被禁用。

示例

<x-flatpickr :enable="['2022-09-18', '2022-02-14']" />

OR

<x-flatpickr :enable="[today(), today()->addDay()]" />

multiple

类型： bool

将日历模式设置为multiple。您将能够选择多个日期。

示例

<x-flatpickr multiple />

range

类型： bool

将日历模式设置为range。您将能够选择日期范围。如果您同时使用multiple和range，则模式将设置为range。

默认情况下，当模式为range时，下拉菜单中将显示2个月。您可以使用visibleMonths属性更改此设置。

示例

<x-flatpickr range />

visibleMonths

类型： int

显示日历时同时显示的月份数量。

示例

<x-flatpickr :visible-months="3" />

inline

类型： bool

以内联方式显示日历。

示例

<x-flatpickr inline />

showWeekNumbers

类型： bool

在日历中显示星期数。

示例

<x-flatpickr show-week-numbers />

value

类型： string|Carbon|array

设置初始选定的日期。

示例

对于单个选择器，传递普通日期字符串或Carbon实例。

<x-flatpickr value="2022-09-18" />

OR

<x-flatpickr :value="\Carbon\Carbon::parse('2022-09-18')" />

示例

对于多个选择器，以数组的形式传递数据。

<x-flatpickr :value="['2022-09-18']" multiple />

OR

<x-flatpickr :value="[\Carbon\Carbon::parse('2022-09-18')]" multiple />

示例

对于范围选择器，将两个日期作为以to分隔的字符串传递。或者，将两个日期作为数组传递，它将选择包括在内的所有日期。

<x-flatpickr value="2022-09-18 to 2022-10-11" range />

OR

<x-flatpickr :value="['2022-09-18', '2022-10-11']" range />

clearable

类型： bool

在日期选择器的右侧显示清除图标。点击它将清除选定的值。

示例

<x-flatpickr clearable />

事件钩子

您可以将flatpickr库中存在的所有事件钩子传递，如onChange、onOpen、onClose等。请查看其文档页面中所有可用的钩子。

示例

<x-flatpickr clearable onChange="handleChange" />

<script>
    function handleChange(selectedDates, dateStr, instance) {
        console.log({ selectedDates, dateStr, instance });
    }
</script>

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

请参阅贡献指南获取详细信息。

安全漏洞

请查阅我们的安全策略了解如何报告安全漏洞。

致谢

• Laratips
• 所有贡献者

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。