README

这是一个为 Tall Stack 制作的 livewire 日期、dateTime 和日期范围选择器

支持我们

这是一个为 Tall Stack 制作的 livewire 日期、dateTime 和日期范围选择器

安装

您可以通过 composer 安装此包

composer require webplusmultimedia/date-time-range-picker

将以下设置添加到您的 Tailwindcss 配置文件 tailwind.config.js 中

module.exports = {
    presets: [
        require('./vendor/webplusmultimedia/date-time-range-picker/tailwind.config.js')
    ],
    content: [
        '...',
        /* Date time Range */
        './vendor/webplusmultimedia/date-time-range-picker/js/**/*.js',
        './vendor/webplusmultimedia/date-time-range-picker/resources/views/**/*.blade.php',
    ],

    theme: {}
}

在您的 ./resources/js/app.js 中，导入 js 文件

import './../../vendor/webplusmultimedia/filemanager/resources/dist/js/date_time_range'

更改颜色主题

您可以通过更改 tailwind.config.js 中的一个变量来自定义颜色主题

const colors = require('tailwindcss/colors')
 
module.exports = {
    ...
    theme: {
        extend: {
            colors: {
                ...
                'primary-datepicker' : colors.cyan // Or what ever you want
            },
        },
    },
    ...
}

可选地，您可以使用来发布视图，但不需要这么做。

php artisan vendor:publish --tag="date-time-range-picker-views"

使用方法

在您的 blade livewire 视图中

<div class="pt-5">
    <x-webplusm-date-time-range-picker type="range" label="Dates de formation" 
                                       wire:model="date" 
    />
</div>

组件属性

• type : {string} (默认为 date) 日期、dateTime 或范围
• label : {string} (默认为 null) 要播放的标签
• minDate 和 maxDate : {ISO8601 (Carbon\CarbonInterface|null)} (默认为 null)，如果您需要限制日期
• lang : {dateString} (默认为 fr (例如：fr-FR ...))
• minTime : {int} (默认为 7(h))，达到的最小时间
• maxTime : {int} (默认为 17(h))，达到的最大时间
• intervalMinute : {int} (默认为 5) ，分钟上下间隔（时间和 dateTime 类型）

测试

即将到来

composer test

变更日志

请参阅 CHANGELOG 了解最近的变化。

贡献

请参阅 CONTRIBUTING 了解详情。

安全漏洞

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

鸣谢

• webplusm

许可证

MIT 许可证 (MIT)。请参阅 许可证文件 了解更多信息。