Light

64robots / nova-date-filter Goto Github PK

View Code? Open in Web Editor NEW

36.0 3.0 45.0 277 KB

A Laravel Nova date filter.

Vue 15.96% JavaScript 1.84% PHP 5.59% CSS 76.61%

nova-date-filter's Introduction

DEPRECATED

Since Nova 1.1.8 this feature has been adopted to the core. You should upgrade Nova and use that filter instead.

Date Filter for Laravel Nova

Nova filter that displays a Date Picker instead of a select.

Demo

Install

Run this command in your nova project: composer require 64robots/nova-date-filter

How to use

Just use DateFilter class instead of Filter

use R64\Filters\DateFilter;

class DateFrom extends DateFilter
{
  //
}

Customization

As Date Filter is not a select anymore we can use options method to pass the date picker config

use R64\Filters\DateFilter;

class DateFrom extends DateFilter
{
  //...

  public function options(Request $request)
  {
    return [
      'dateFormat' => 'Y-m-d', // default Y-m-d H:i:S
      'placeholder' => 'My placeholder', // default __('Pick a date')
      'disabled' => true, // default false
      'twelveHourTime' => true, // default false
      'enableTime' => true, // default false
      'enableSeconds' => true, // default false
    ];
  }
}

nova-date-filter's People

Contributors

Stargazers

Watchers

Forkers

riseno angelocala94 treestoneit niladam nasrulhazim fawzanm ampeco suhaibkotb

nova-date-filter's Issues

Class date-filter missing

If I have more filters in my resource, only the first filter has the class "date-filter", all the following ones do not have this class and they have ui problems.

Nova Version: 1.1.7

Issue with the 1.1.7 to 1.1.8 update

I thought it was a nova issue but they have added new filter types and this looks like it is breaking
Posted here:
laravel/nova-issues#1044

app.js?id=ae5d9bd3a5a9a5b44593:2264 Uncaught TypeError: (0 , _composedPath2.default)(...).filter(...).flatMap is not a function
    at pathIncludesClass (app.js?id=ae5d9bd3a5a9a5b44593:2264)
    at app.js?id=ae5d9bd3a5a9a5b44593:2250
    at arrayFilter (vendor.js?id=c7d4f184dad3c7c6c376:41571)
    at Function.filter (vendor.js?id=c7d4f184dad3c7c6c376:50162)
    at VueComponent.close (app.js?id=ae5d9bd3a5a9a5b44593:2249)
    at HTMLHtmlElement.el.(anonymous function) (http://rental.holdingbay.co.uk/vendor/nova/vendor.js?id=c7d4f184dad3c7c6c376:91797:23)
pathIncludesClass @ app.js?id=ae5d9bd3a5a9a5b44593:2264
(anonymous) @ app.js?id=ae5d9bd3a5a9a5b44593:2250
arrayFilter @ vendor.js?id=c7d4f184dad3c7c6c376:41571
filter @ vendor.js?id=c7d4f184dad3c7c6c376:50162
close @ app.js?id=ae5d9bd3a5a9a5b44593:2249
el.(anonymous function) @ vendor.js?id=c7d4f184dad3c7c6c376:91797

Can't choose dates from other months except the current month

Steps to reproduce:

Open date picker from Nova's dropdown for filters.
Move to previous or next month (with left/right arrows). (Nova's dropdown for filters closes.)
Select one of the days. Nothing happens.
Click on Nova's dropdown filters - there is no value in the datepicker's field.

Tested on latest Chrome & Firefox @ Ubuntu 18.04.
Function options(...) returns []; in my example.

class FromDateFilter extends DateFilter{
    public function options(Request $request)
    {
        return [
            'dateFormat' => 'Y-m-d', // default Y-m-d H:i:S
            'placeholder' => __('we-chat-tool::tips.select date'), // default __('Pick a date')
//            'disabled' => true, // default false
//            'twelveHourTime' => true, // default false
//            'enableTime' => true, // default false
//            'enableSeconds' => true, // default false
        ];
    }
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.