refactor(date-attribute): replace native date time input with flatpickr

Controls/DatePickerSetupControl.php

@@ -82,6 +82,13 @@ public function PageLoad()
             $this->Set('DefaultDate', $defaultDate->Format('Y-m-d'));
         }
 
+        $encodedDefaultDate = 'null';
+        $defaultDateForJs = $this->Get('DefaultDate');
+        if (!empty($defaultDateForJs)) {
+            $encodedDefaultDate = $this->JsonEncodeForInlineScript($defaultDateForJs);
+        }
+        $this->Set('DefaultDateJson', $encodedDefaultDate);
+
         $this->SetDefault('MinDate', null);
         $this->SetDefault('MaxDate', null);
 
@@ -92,6 +99,20 @@ public function PageLoad()
         }
     }
 
+    /**
+     * Encodes values as JSON for safe embedding inside inline <script> blocks.
+     * Uses JSON_HEX_* flags to neutralize characters that can break out of JS
+     * strings or terminate script tags (for example </script>), reducing XSS risk.
+     */
+    private function JsonEncodeForInlineScript(mixed $value): string
+    {
+        $json = json_encode(
+            $value,
+            JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
+        );
+        return $json === false ? 'null' : $json;
+    }
+
     private function SetDefault($key, $value)
     {
         $item = $this->Get($key);

tpl/Controls/Attributes/Date.tpl

@@ -1,17 +1,14 @@
 <div class="form-group {$class}">
 	{assign value="{$attribute->Value()}" var="attributeValue"}
-	<label class="customAttribute {if $readonly}readonly{elseif $searchmode}search{else}standard{/if} fw-bold"
+	<label class="customAttribute d-block {if $readonly}readonly{elseif $searchmode}search{else}standard{/if} fw-bold"
 		for="{$attributeId}">{$attribute->Label()}{if $attribute->Required() && !$searchmode}
 			<i class="bi bi-asterisk text-danger align-top text-small"></i>
 		{/if}</label>
 	{if $readonly}
 		<span class="attributeValue {$class}">{formatdate date=$attributeValue key=general_datetime}</span>
 	{else}
-		<input type="datetime-local" id="{$attributeId}" value="{formatdate date=$attributeValue format='Y-m-d H:i:s'}"
+		<input type="text" id="{$attributeId}" name="{$attributeName}"
 			class="customAttribute form-control {if !$searchmode && $attribute->Required()}has-feedback{/if} {$class}" />
-		<input type="hidden" id="formatted{$attributeId}" name="{$attributeName}"
-			value="{formatdate date=$attributeValue key=system_datetime}" />
-		{control type="DatePickerSetupControl" ControlId="{$attributeId}" AltId="formatted{$attributeId}"
-		HasTimepicker=true}
+		{control type="DatePickerSetupControl" ControlId="{$attributeId}" DefaultDate=$attributeValue HasTimepicker=true}
 	{/if}
-</div>
+</div>

tpl/Controls/DatePickerSetup.tpl

@@ -28,16 +28,7 @@
                 altInput: {if $AltInput|default:true}true{else}false{/if},
                 altFormat: "{$AltFormat}",
                 dateFormat: "{$DateFormat}",
-                defaultDate:
-                    {if $DefaultDate}
-                        {if $Multiple}
-                            {$DefaultDate|json_encode}
-                        {else}
-                            "{$DefaultDate}"
-                        {/if}
-                    {else}
-                        null
-                {/if},
+                defaultDate: {$DefaultDateJson nofilter},
                 minDate: {if $MinDate}"{$MinDate}"{else}null{/if},
                 maxDate: {if $MaxDate}"{$MaxDate}"{else}null{/if},
                 enableTime: {$HasTimepicker ? 'true' : 'false'},