為你的 Laravel Nova 新增時間範圍篩選

先看看效果是啥樣的哈！！！?

話不多說，直接撂程式碼！

建立你的篩選檔案Your date range filter.php, 需要定義一個前端vue元件名

use Carbon\Carbon;
public function apply(Request $request, $query, $value)
{
    if (strpos($value, ' - ') === false) {
        return;
    }

    [$from, $to] = explode(' - ', $value);

    $from = Carbon::createFromFormat(config('app.date_format'), $from)
        ->setTimezone(config('app.timezone'))
        // Start at the beginning of the day.
        ->setTime(0, 0, 0)
        ->setTimezone(config('app.timezone'));

    $to = Carbon::createFromFormat(config('app.date_format'), $to)
        ->setTimezone(config('app.timezone'))
        // Include up to the end of the day.
        ->setTime(23, 59, 59)
        ->setTimezone(config('app.timezone'));

    $query->whereDate('created_at', '>=', $from->format('Y-m-d H:i:s'));
    $query->whereDate('created_at', '<=', $to->format('Y-m-d H:i:s'));
}

VUE DateRangePicker.vue

<template>
    <input
        :disabled="disabled"
        :class="{'!cursor-not-allowed': disabled}"
        :value="value"
        ref="datePicker"
        type="text"
        :placeholder="placeholder">
</template>

<script>

import flatpickr from 'flatpickr'
export default {
    props: {
        value: {
            required: false,
        },
        placeholder: {
            type: String,
            default: () => {
                return moment().format('YYYY-MM-DD') + ` ${this.default.props.seperator.default} ` + moment().format('YYYY-MM-DD')
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        dateFormat: {
            type: String,
            default: 'Y-m-d',
        },
        seperator: {
            type: String,
            default: '-',
        }
    },
    data: () => ({ flatpickr: null }),
    mounted() {
        this.$nextTick(() => {
            this.flatpickr = flatpickr(this.$refs.datePicker, {
                onClose: this.onChange,
                dateFormat: this.dateFormat,
                allowInput: true,
                mode: 'range',
                locale: {
                    rangeSeparator: ` ${this.seperator} `
                }
            })
        })
    },
    methods: {
        onChange(event) {
            this.$emit('change', this.$refs.datePicker.value)
        },
    },
}
</script>

<style scoped>
.\!cursor-not-allowed {
    cursor: not-allowed !important;
}
</style>

繼續建立篩選vue元件。DateRangeFilter.vue 這個元件註冊的名字就是在你php定義的元件名，必須要保持一致哈！

<template>
    <div>
        <h3 class="text-xs uppercase tracking-wide text-80 px-3 pt-4 pb-0">{{ filter.name }}</h3>

        <div class="p-2">
            <date-range-picker
                class="w-full form-control form-input form-input-bordered"
                dusk="date-filter"
                name="date-filter"
                :value="value"
                dateFormat="Y-m-d"
                :placeholder="placeholder"
                @input.prevent=""
                @change="handleChange"
            />
        </div>
    </div>
</template>

<script>
import DateRangePicker from '../DateRangePicker'

export default {
    components: { DateRangePicker },

    props: {
        filterKey: {
            type: String,
            required: true,
        },
        resourceName: {
            type: String,
            required: true,
        },
    },

    methods: {
        handleChange(value) {
            this.$store.commit(`${this.resourceName}/updateFilterState`, {
                filterClass: this.filterKey,
                value,
            })
            this.$emit('change')
        },
    },

    computed: {
        placeholder() {
            return this.filter.placeholder || this.__('Choose date')
        },

        value() {
            return this.filter.currentValue
        },

        filter() {
            return this.$store.getters[`${this.resourceName}/getFilter`](this.filterKey)
        },

        options() {
            return this.$store.getters[`${this.resourceName}/getOptionsForFilter`](this.filterKey)
        },
    },
}
</script>

寫在後面，大家看到我發表的文章都沒有文字的表達，可能大夥兒覺得我沒有風趣！其實不是這樣的哈。我是不善於表達。不周之處，大夥兒多多諒解！熱愛生活，熱愛分享。