包简介

The Persian Datepicker component for Laravel Livewire

README 文档

README

Livewire Persian Datepicker

This package is a Persian datepicker tool for Laravel 9/10/11.

This tool is made as a component for Livewire, which requires the following requirements:

Requirements

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

Installation

To install the package, run the following code in the path of your project

composer require alirahimi/livewire-persian-datepicker

After installing with Composer, you need to publish the project files and install the npm requirements. With the following command, the mentioned tasks will be done automatically.

php artisan livewire:persian-datepicker

If you have already installed npm, the command above will automatically add the required items to package.json and reinstall npm. Otherwise, you have to manually install the necessary packages mentioned above.

After installing this package, a file called persian-datepicker.blade.php will be added to the resources/views/components folder and a file named livewire-datepicker-datepicker.js will be added to the resources/js folder of your project. If for any reason these two files are not created automatically, you can type the following command into the console:

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

Then you need to import the resources/js/datepicker-datepicker.js file in resources/js/app.js.

import './livewire-datepicker-datepicker';

Finally, the resources/js/app.js file should look like this:

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

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

And the resources/css/app.css file should look like this:

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

Now, if you are using webpack, enter the following command:

npm install
npm run dev

And if you use vite, enter the following command:

npm install
vite run dev

Tip: You need to call the created JavaScript and style files in your template:

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

How to use

This component is easy to use. It has 9 entries that you can enter as you wish. I will give you an example below:

<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"/>

component property description:

Property	Required	Default	Description
wirePropertyName	Yes	null	The livewire property to which the information is sent after selecting the date
label	No	null	input label
currentView	No	day	Default Datepicker view (day, month, year).
showFormat	No	jYYYY/jMM/jDD	Date format for the selected date (Jalali date format => jalali-moment)
returnFormat	No	X	Date format that is sent to the server (X = timestamp)
required	No	false	Add red Star after label
defaultDate	No	null	Datepicker default date (null = current date)
minDate	No	null	Datepicker min date (null = without limit)
maxDate	No	null	Datepicker max date (null = without limit)
setNullInput	No	false	Can set the default Datepicker to null
ignoreWire	No	true	Ignores livewire changes (recommended for time use)
withTime	No	false	Can enable Datepicker time inputs (Hour Minute Second)
withTimeSeconds	No	true	Can disable Datepicker seconds input

Preview

alirahimi/livewire-persian-datepicker 适用场景与选型建议

alirahimi/livewire-persian-datepicker 是一款基于 Blade 开发的 Composer 扩展包，目前已累计 5.69k 次下载、GitHub Stars 达 27，最近一次更新时间为 2022 年 12 月 01 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 alirahimi/livewire-persian-datepicker 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 alirahimi/livewire-persian-datepicker 我们能提供哪些服务？

定制开发 / 二次开发

基于 alirahimi/livewire-persian-datepicker 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

alirahimi/livewire-persian-datepicker

包简介