d821d392/views/components/date-time-input.gohtml
1970-01-01 00:00:00 +00:00

47 lines
2.1 KiB
Plaintext

{{- /*gotype: crud-generator/html_components.DateTimeInput*/ -}}
{{ block "dateTimeInput" . }}
<div class="pr-5">
<label for="{{.Name}}"
{{template "labelStyle"}}
>
{{.Label}}
</label>
<div class="flex">
<div class="relative max-w-sm">
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
</div>
<input type="datetime-local"
name="{{ .Name }}"
value="{{ .Value }}"
id="{{ .Name}}"
aria-label="{{ .Label }}"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Select date and time">
</div>
<div class="px-4">
<button
id="{{.Name}}-clear"
class="flex items-center bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
type="button"
aria-label="Clear date and time"
>
Clear
</button>
</div>
</div>
</div>
<script>
(function () {
document.getElementById("{{.Name}}-clear").addEventListener("click", function () {
document.getElementById("{{.Name}}").value = "";
});
})();
</script>
{{ end }}