alirahimi/livewire-persian-datepicker

Laravel Livewire 的波斯日期选择器组件

维护者

详细信息

github.com/alirahimi818/livewire-persian-datepicker

源代码

问题

安装次数: 1,123

依赖: 1

建议者: 0

安全性: 0

星标: 13

关注者: 0

分支: 1

开放问题: 1

语言:Blade

类型:组件

1.1.5 2024-05-09 06:33 UTC

Requires

MIT 40181d33c22a114e235b3ddddcc9735d2d393f7c

  • ali rahimi <alirahimi818.woop@gmail.com>

This package is auto-updated.

Last update: 2024-09-09 07:32:26 UTC

README

Livewire Persian Datepicker

Livewire波斯日期选择器

此包是适用于Laravel 9/10/11的波斯日期选择器工具。

此工具被制作为一个Livewire组件，需要以下要求

要求

  • laravel +9.0
  • livewire +2.5
  • alpinejs +3.0.6
  • tailwindcss +3.0.0
  • jalali-moment +3.3.11

安装

要安装此包，请在项目路径下运行以下代码

composer require alirahimi/livewire-persian-datepicker

使用Composer安装后，您需要发布项目文件并安装npm要求。以下命令将自动完成这些任务。

php artisan livewire:persian-datepicker

如果您已安装npm，上述命令将自动将所需项目添加到package.json并重新安装npm。否则，您必须手动安装上述提到的必要包。

安装此包后，将在resources/views/components文件夹中添加一个名为persian-datepicker.blade.php的文件，并在您的项目resources/js文件夹中添加一个名为livewire-datepicker-datepicker.js的文件。如果由于任何原因这两个文件没有自动创建，您可以在控制台输入以下命令

php artisan vendor:publish --provider="AliRahimi\LivewirePersianDatepicker\LivewirePersianDatepickerServiceProvider" --tag="livewire-persian-datepicker" --force

然后您需要在resources/js/app.js中导入resources/js/datepicker-datepicker.js文件。

import './livewire-datepicker-datepicker';

最后，resources/js/app.js文件应如下所示

import './bootstrap';
import './livewire-datepicker-datepicker';

import Alpine from 'alpinejs';  // Livewire < 3.0
window.Alpine = Alpine;         // Livewire < 3.0
Alpine.start();                 // Livewire < 3.0

并且resources/css/app.css文件应如下所示

@tailwind base;
@tailwind components;
@tailwind utilities;




现在，如果您使用webpack，请输入以下命令

npm install
npm run dev

如果您使用vite，请输入以下命令

npm install
vite run dev

提示：您需要在模板中调用创建的JavaScript和样式文件

<html>
    <head>
        .
        .
        .
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
        @livewireStyles
    </head>
    <body>
        .
        .
        .
        <script src="{{ mix('js/app.js') }}" defer></script>
        @livewireScripts
    </body>
</html>

如何使用

此组件易于使用。它有9个条目，您可以根据需要输入。以下是一个示例

<x-persian-datepicker 
    wirePropertyName="livewire-component.property"
    label="Custom Label"
    showFormat="jYYYY/jMM/jDD"
    returnFormat="X"
    :required="true"
    :defaultDate="date('Y-m-d H:i:s')"
    :setNullInput="true"
    :withTime="true"
    :ignoreWire="true"
    :withTimeSeconds="true"/>

组件属性描述

预览

Laravel Logo