Skip to content

Time Field ​

Easy Forms includes a separate time field component that uses input masking to clearly indicate time entry to the user.

To use it, add a text field to your blueprint, set the input_type to time, and enable the improved_field option in the Easy Forms configuration section. For example:

yaml
handle: time_field
field:
  input_type: time
  type: text
  display: 'Time Field'
  improved_field: true
  instructions: 'The field uses the "time" input type.'
The time input field example that the code above creates.
The time input field example that the code above creates.

Requirements ​

This field requires the Alpine.js Mask plugin.

If it's not already loaded, you can add it to your layout file before the main Alpine.js file:

antlers
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>