feat: switch to native date inputs

.docs/assets.md

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

.docs/filters.md

@@ -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.

assets/css/datagrid-full.css

@@ -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';

assets/css/datagrid.css

@@ -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;

assets/datagrids.ts

@@ -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[] = [];
@@ -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())
 			],
 		},

assets/integrations/index.ts

@@ -2,4 +2,3 @@ export * from "./bootstrap-select";
 export * from "./happy";
 export * from "./sortable-js";
 export * from "./tom-select";
-export * from "./vanilla-datepicker";

assets/plugins/index.ts

@@ -1,4 +1,3 @@
-export * from "./integrations/datepicker";
 export * from "./integrations/happy";
 export * from "./integrations/nette-forms"
 export * from "./integrations/selectpicker";

assets/types/integrations.d.ts

@@ -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;
-}

package.json

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

src/Filter/FilterDate.php

@@ -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);
 
@@ -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';
 	}
 
 }

src/Filter/FilterDateRange.php

@@ -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';
 
@@ -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);
@@ -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';
 	}
 
 }

src/Filter/IFilterDate.php

@@ -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;
-
 }