Skip to content

Commit

Permalink
feat: switch to native date inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
martenb committed Nov 17, 2023
1 parent 9a74127 commit c73c9e2
Show file tree
Hide file tree
Showing 14 changed files with 9 additions and 220 deletions.
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
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.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"@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.

0 comments on commit c73c9e2

Please sign in to comment.