feat: switch to native date inputs

contributte · Nov 17, 2023 · 47f0a28 · 47f0a28
1 parent 3218e7e
commit 47f0a28
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 184 deletions.
diff --git a/.docs/assets.md b/.docs/assets.md
@@ -11,7 +11,6 @@ DataGrid needs for its precise functionality some third party scripts and styles
 **CSS (external)**
 
 - bootstrap
-- bootstrap datepicker
 - bootstrap select
 
 **CSS**
@@ -25,7 +24,6 @@ DataGrid needs for its precise functionality some third party scripts and styles
 - nette forms
 - nette ajax / naja
 - bootstrap
-- bootstrap datepicker
 - bootstrap select
 
 **JS**
@@ -59,7 +57,6 @@ package.json:
 ```json
 {
 	"dependencies": {
-		"bootstrap-datepicker": "^1.9",
 		"bootstrap-select": "^1.13",
 		"bootstrap": "^4.4.1",
 		"happy-inputs": "^2.0",
@@ -81,7 +78,6 @@ package.json:
 <head>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/happy.css">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-datepicker.css">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.css">
 
 	<!-- Use this css for ajax spinners -->
@@ -102,7 +98,6 @@ package.json:
 	</script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/nette.ajax.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.js"></script>

diff --git a/.docs/filters.md b/.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.

diff --git a/src/Filter/FilterDate.php b/src/Filter/FilterDate.php
@@ -12,12 +12,7 @@ class FilterDate extends OneColumnFilter implements IFilterDate
 	/**
 	 * @var string
 	 */
-	protected $template = 'datagrid_filter_date.latte';
-
-	/**
-	 * @var array
-	 */
-	protected $format = ['j. n. Y', 'd. m. yyyy'];
+	protected $template = 'datagrid_filter_text.latte';
 
 	/**
 	 * @var string
@@ -28,11 +23,7 @@ public function addToFormContainer(Container $container): void
 	{
 		$control = $container->addText($this->key, $this->name);
 
-		$control->setAttribute('data-provide', 'datepicker')
-			->setAttribute('data-date-orientation', 'bottom')
-			->setAttribute('data-date-format', $this->getJsFormat())
-			->setAttribute('data-date-today-highlight', 'true')
-			->setAttribute('data-date-autoclose', 'true');
+		$control->setType('date');
 
 		$this->addAttributes($control);
 
@@ -46,32 +37,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';
 	}
 
 }
diff --git a/src/Filter/FilterDateRange.php b/src/Filter/FilterDateRange.php
@@ -12,12 +12,7 @@ class FilterDateRange extends FilterRange implements IFilterDate
 	/**
 	 * @var string
 	 */
-	protected $template = 'datagrid_filter_daterange.latte';
-
-	/**
-	 * @var array
-	 */
-	protected $format = ['j. n. Y', 'd. m. yyyy'];
+	protected $template = 'datagrid_filter_range.latte';
 
 	/**
 	 * @var string
@@ -33,19 +28,11 @@ public function addToFormContainer(Container $container): void
 
 		$from = $container->addText('from', $this->name);
 
-		$from->setAttribute('data-provide', 'datepicker')
-			->setAttribute('data-date-orientation', 'bottom')
-			->setAttribute('data-date-format', $this->getJsFormat())
-			->setAttribute('data-date-today-highlight', 'true')
-			->setAttribute('data-date-autoclose', 'true');
+		$from->setType('date');
 
 		$to = $container->addText('to', $this->nameSecond);
 
-		$to->setAttribute('data-provide', 'datepicker')
-			->setAttribute('data-date-orientation', 'bottom')
-			->setAttribute('data-date-format', $this->getJsFormat())
-			->setAttribute('data-date-today-highlight', 'true')
-			->setAttribute('data-date-autoclose', 'true');
+		$to->setType('date');
 
 		$this->addAttributes($from);
 		$this->addAttributes($to);
@@ -73,32 +60,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';
 	}
 
 }
diff --git a/src/Filter/IFilterDate.php b/src/Filter/IFilterDate.php
@@ -7,20 +7,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;
 }
diff --git a/src/templates/datagrid_filter_date.latte b/src/templates/datagrid_filter_date.latte
diff --git a/src/templates/datagrid_filter_daterange.latte b/src/templates/datagrid_filter_daterange.latte