Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: switch to native date inputs #1105

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .docs/assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,13 @@ Full example of using bundler.
"nette-forms": "^3.3.1",
"prismjs": "^1.29.0",
"sortablejs": "^1.15.0",
"tom-select": "^2.2.2",
"vanillajs-datepicker": "^1.3.1"
"tom-select": "^2.2.2"
},
"devDependencies": {
"@types/bootstrap-select": "^1.13.4",
"@types/jquery": "^3.5.16",
"@types/jqueryui": "^1.12.16",
"@types/sortablejs": "^1.15.1",
"@types/vanillajs-datepicker": "^1.2.1",
"autoprefixer": "^10.4.0",
"typescript": "^4.9.5",
"vite": "^2.6.10"
Expand Down
11 changes: 0 additions & 11 deletions .docs/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,17 +189,6 @@ Keep in mind that `FilterMultiSelect` uses `bootstrap-select` JS library. Read m
$grid->addFilterDate('created', 'User registerd on');
```

This filter also has some special features. First, it shows datepicker. Second, You can set date format. Sadly, JavaScript has different date formatting modifiers, so you have to set them both at once:

```php
/**
* This is default formatting
* $php_format, $js_format
*/
$grid->addFilterDate('created', 'User registerd on')
->setFormat('j. n. Y', 'd. m. yyyy');
```

## FilterRange

This filter renders two inputs: From and To. If you want to set inputs placeholders, you have to set both in an array.
Expand Down
1 change: 0 additions & 1 deletion assets/css/datagrid-full.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@import "@fortawesome/fontawesome-free/css/all.css";
@import 'bootstrap/dist/css/bootstrap.css';
@import 'vanillajs-datepicker/css/datepicker-bs5.css';
@import './datagrid.css';
22 changes: 0 additions & 22 deletions assets/css/datagrid.css
Original file line number Diff line number Diff line change
Expand Up @@ -197,28 +197,6 @@
display: none !important
}

[data-datagrid-name] .datagrid-col-filter-date-range {
width: auto;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

[data-datagrid-name] .datagrid-col-filter-date-range > .input-group {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0;
}

[data-datagrid-name] .datagrid-col-filter-datte-range-delimiter {
background-color: inherit;
border: none;
padding: .25rem .5rem
}

[data-datagrid-name] table thead tr th .datagrid-col-filter-range .form-control {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
Expand Down
4 changes: 1 addition & 3 deletions assets/datagrids.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {
} from "./plugins";
import { Ajax, DatagridsOptions } from "./types";
import { SortableJS } from "./integrations/sortable-js";
import { DatepickerPlugin } from "./plugins/integrations/datepicker";
import { BootstrapSelect, Happy, VanillaDatepicker } from "./integrations";
import { BootstrapSelect, Happy } from "./integrations";

export class Datagrids {
private datagrids: Datagrid[] = [];
Expand Down Expand Up @@ -71,7 +70,6 @@ export const createFullDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptio
new NetteFormsPlugin(),
new HappyPlugin(new Happy()),
new SortablePlugin(new SortableJS()),
new DatepickerPlugin(new VanillaDatepicker()),
new SelectpickerPlugin(new BootstrapSelect())
],
},
Expand Down
1 change: 0 additions & 1 deletion assets/integrations/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,3 @@ export * from "./bootstrap-select";
export * from "./happy";
export * from "./sortable-js";
export * from "./tom-select";
export * from "./vanilla-datepicker";
14 changes: 0 additions & 14 deletions assets/integrations/vanilla-datepicker.ts

This file was deleted.

1 change: 0 additions & 1 deletion assets/plugins/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from "./integrations/datepicker";
export * from "./integrations/happy";
export * from "./integrations/nette-forms"
export * from "./integrations/selectpicker";
Expand Down
17 changes: 0 additions & 17 deletions assets/plugins/integrations/datepicker.ts

This file was deleted.

4 changes: 0 additions & 4 deletions assets/types/integrations.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,3 @@ export interface Sortable {
export interface Selectpicker {
initSelectpickers(elements: HTMLElement[], datagrid: Datagrid): void;
}

export interface Datepicker {
initDatepickers(elements: HTMLInputElement[], datagrid: Datagrid): void;
}
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,10 @@
"prismjs": "^1.29.0",
"sortablejs": "^1.15.0",
"tom-select": "^2.2.2",
"vanillajs-datepicker": "^1.3.1",
"@types/bootstrap-select": "^1.13.4",
"@types/jquery": "^3.5.16",
"@types/jqueryui": "^1.12.16",
"@types/sortablejs": "^1.15.1",
"@types/vanillajs-datepicker": "^1.2.1",
"autoprefixer": "^10.4.0",
"typescript": "^4.9.5",
"vite": "^2.6.10"
Expand Down
31 changes: 3 additions & 28 deletions src/Filter/FilterDate.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,15 @@
class FilterDate extends OneColumnFilter implements IFilterDate
{

protected ?string $template = 'datagrid_filter_date.latte';

/** @var array */
protected array $format = ['j. n. Y', 'd. m. yyyy'];
protected ?string $template = 'datagrid_filter_text.latte';

protected ?string $type = 'date';

public function addToFormContainer(Container $container): void
{
$control = $container->addText($this->key, $this->name);

$control->setHtmlAttribute('data-provide', 'datepicker')
->setHtmlAttribute('data-date-orientation', 'bottom')
->setHtmlAttribute('data-date-format', $this->getJsFormat())
->setHtmlAttribute('data-date-today-highlight', 'true')
->setHtmlAttribute('data-date-autoclose', 'true');
$control->setHtmlType('date');

$this->addAttributes($control);

Expand All @@ -35,30 +28,12 @@ public function addToFormContainer(Container $container): void
}
}

/**
* Set format for datepicker etc
*/
public function setFormat(string $phpFormat, string $jsFormat): IFilterDate
{
$this->format = [$phpFormat, $jsFormat];

return $this;
}

/**
* Get php format for datapicker
*/
public function getPhpFormat(): string
{
return $this->format[0];
}

/**
* Get js format for datepicker
*/
public function getJsFormat(): string
{
return $this->format[1];
return 'Y-m-d';
}

}
37 changes: 4 additions & 33 deletions src/Filter/FilterDateRange.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@
class FilterDateRange extends FilterRange implements IFilterDate
{

protected ?string $template = 'datagrid_filter_daterange.latte';

/** @var array */
protected array $format = ['j. n. Y', 'd. m. yyyy'];
protected ?string $template = 'datagrid_filter_range.latte';

protected ?string $type = 'date-range';

Expand All @@ -23,19 +20,11 @@ public function addToFormContainer(Container $container): void

$from = $container->addText('from', $this->name);

$from->setHtmlAttribute('data-provide', 'datepicker')
->setHtmlAttribute('data-date-orientation', 'bottom')
->setHtmlAttribute('data-date-format', $this->getJsFormat())
->setHtmlAttribute('data-date-today-highlight', 'true')
->setHtmlAttribute('data-date-autoclose', 'true');
$from->setHtmlType('date');

$to = $container->addText('to', $this->nameSecond);

$to->setHtmlAttribute('data-provide', 'datepicker')
->setHtmlAttribute('data-date-orientation', 'bottom')
->setHtmlAttribute('data-date-format', $this->getJsFormat())
->setHtmlAttribute('data-date-today-highlight', 'true')
->setHtmlAttribute('data-date-autoclose', 'true');
$to->setHtmlType('date');

$this->addAttributes($from);
$this->addAttributes($to);
Expand All @@ -62,30 +51,12 @@ public function addToFormContainer(Container $container): void
}
}

/**
* Set format for datepicker etc
*/
public function setFormat(string $phpFormat, string $jsFormat): IFilterDate
{
$this->format = [$phpFormat, $jsFormat];

return $this;
}

/**
* Get php format for datapicker
*/
public function getPhpFormat(): string
{
return $this->format[0];
}

/**
* Get js format for datepicker
*/
public function getJsFormat(): string
{
return $this->format[1];
return 'Y-m-d';
}

}
10 changes: 0 additions & 10 deletions src/Filter/IFilterDate.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,9 @@
interface IFilterDate
{

/**
* Set format for datepicker etc
*/
public function setFormat(string $phpFormat, string $jsFormat): IFilterDate;

/**
* Get php format for datapicker
*/
public function getPhpFormat(): string;

/**
* Get js format for datepicker
*/
public function getJsFormat(): string;

}
28 changes: 0 additions & 28 deletions src/templates/datagrid_filter_date.latte

This file was deleted.

48 changes: 0 additions & 48 deletions src/templates/datagrid_filter_daterange.latte

This file was deleted.