Time

The time component allows your users to select dates & times on your form.

INFO

The time picker is not built inside Alpine.js. We simply wrap the popular flatpickr.js. This means your Date/Time picker can do everything flatpickr can.

Common Methods

For a list of common field component methods, see here.

Getting Started

You can create a time component apart of your form like so:

FormTime("MyTime")

Notes on Time in Iridium

Every selection in your Time component will always post a date and time, regardless of whether you've set your time component to a strictly date or time mode only (RFC3339 sans timezone is our format). Why?

Go's time.Time always contains a date and time as well. It uses a default date or default time if you're not using either, which is the standard Iridium conforms to

Whenever your form submits a time, Iridium will interpret the string containing your date/time in the timezone of your application. That timezone can be configured in your application's configuration, but it defaults to the timezone of the server. It will also always render time out to the client in the server's timezone.

This is a simpler way to handle times, where the source of truth, independent of the client, is the server's timezone. For Iridium's alpha we're leaving our time component here, but this will become more flexible in the future!

Need the flexibility now? Feel free to use some hooks to display client time in whatever timezone you want.

Single

Allow your users to select a single date:

FormTime("Appointment").
    Single()

This is the default setting

Multiple

Allow your users to select multiple dates:

FormTime("Appointment").
    Multiple()

Range

Allow your users to select a range of dates:

FormTime("Appointment").
    Range()

Mode

You can use one of our configuration constants to set the mode as well.

import "github.com/iridiumgo/iridium/core/field/components/config"

// static
FormTime("Appointment").
    Mode(config.ModeRange)

// callback
FormTime("Appointment").
    ModeFn(
        func (ctx FieldContext) string {
            return "time"
        }
    )

These mode contants are based on flatpickr's modes.

Has Time

You can specify whether to display a time apart of your date selection as so:

// static
FormTime("Appointment").
    HasTime()
    
// callback
FormTime("Appointment").
    HasTimeFn(func (ctx FieldContext) bool {
        return true
    })

Custom Config

You can pass your own flatpickr config to take full control over your component's configuration:

// static
FormTime("Appointment").
    CustomConfig(map[string]any{
        "dateFormat": "d.m.Y",
        "maxDate": "15.12.2017"
    })

// callback
FormTime("Appointment").
    CustomConfig(
        func (ctx FieldContext) map[string]any {
            return map[string]any{
                "dateFormat": "d.m.Y",
                "maxDate": "15.12.2017"
            }
        }
    )

Display Format

You can specify the display form for flatpickr using a format string as so:

// static
FormTime("Appointment").
    DisplayFormat("Y-m-d")
    
// callback
FormTime("Appointment").
    DisplayFormatFn(func (ctx FieldContext) string {
        return "Y-m-d"
    })

This display format is the flatpickr format, not a golang format. See here.

Time24Hr

You can specify whether the flatpickr time is displayed in a 24hour format as so:

// static
FormTime("Appointment").
    Time24Hr()
    
// callback
FormTime("Appointment").
    Time24HrFn(func (ctx FieldContext) bool {
        return true
    })

HideCalendar / TimeOnly

TIP

Hiding your calendar allows you to create a simple Time Only selector. Iridium will still set a date for your time, but it will be Go's standard 'no-date' date of Jan 1, 0001

You can specify whether to hide the calendar as so:

// static
FormTime("StartTime").
    HideCalendar()

// callback
FormTime("StartTime").
    HideCalendarFn(func (ctx FieldContext) bool {
        return true
    })

Disable Mobile

You can set the disable mobile flatpickr option as so:

// static
FormTime("Appointment").
    DisableMobile()

// callback
FormTime("Appointment").
    DisableMobileFn(func (ctx FieldContext) bool {
        return true
    })

When set to true, the user will always user the non-native picker. See more here.

Hour increment

You can specify the hour increments for the time selector as so:

// static
FormTime("StartTime").
    HourIncrement(2)
    
// callback
FormTime("StartTime").
    HourIncrementFn(func (ctx FieldContext) uint {
        return 2
    })

Minute Increment

You can specify the minute increments for the time selector as so:

// static
FormTime("StartTime").
    MinuteIncrement(2)
    
// callback
FormTime("StartTime").
    MinuteIncrementFn(func (ctx FieldContext) uint {
        return 2
    })

Has Seconds

You can specify whether the time selector includes options for seconds as so:

// static
FormTime("StartTime").
    HasSeconds()
    
// callback
FormTime("StartTime").
    HasSecondsFn(func (ctx FieldContext) bool {
        return true
    })

Week Numbers

You can specify whether to display week numbers in your flatpickr calendar as so:

// static
FormTime("Appointment").
    WeekNumbers(true)
    
// callback
FormTime("Appointment").
    WeekNumbersFn(func (ctx FieldContext) bool {
        return true
    })

Default Hour

You can specify the default hour for your time selector as so:

// static
FormTime("Appointment").
    DefaultHour(3)
    
// callback
FormTime("Appointment").
    DefaultHourFn(func (ctx FieldContext) uint {
        return 3
    })

Default Minute

You can specify the default minute for your time selector as so:

// static
FormTime("Appointment").
    DefaultMinute(23)
    
// callback
FormTime("Appointment").
    DefaultMinuteFn(func (ctx FieldContext) uint {
        return 23
    })

Allow Input

You can specify whether to enable the flatpickr allow input option as so:

// static
FormTime("Appointment").
    AllowInput()
    
// callback
FormTime("Appointment").
    AllowInputFn(func (ctx FieldContext) bool {
        return false
    })

Flatpickr's allow input allows the user to directly type their dates into the input box. See more here.

Max Date

You can specify the max date allowable in your calendar as so:

// static
FormTime("Appointment").
    MaxDate(time.Now()) // No dates past the current date
    
// dynamic
FormTime("Appointment").
    MaxDateFn(func (ctx FieldContext) time.Time {
        // Not dates past a year from now
        return time.Now().AddDate(1, 0, 0)
    })

Friendly Reminder

Don't forget this, and other methods that configure flatpickr are client-side! Make sure to add the appropriate rules!

Min Date

You can specify the min date allowable in your calendar as so:

// static
FormTime("Appointment").
    MinDate(time.Now()) // No dates before the present!

// callback
FormTime("Appointment").
    MinDateFn(func (ctx FieldContext) time.Now {
        return time.Now()
    })

Friendly Reminder

Don't forget this, and other methods that configure flatpickr are client-side! Make sure to add the appropriate rules!