DateTime Filter

A time filter allows you to select a date and/or time to filter your table by.

Getting Started

You can create a time filter as so:

FilterTime("age")

Single

Allow your users to select a single date:

FilterTime("Appointment").
    Single()

This is the default setting

Multiple

Allow your users to select multiple dates:

FilterTime("Appointment").
    Multiple()

Range

Allow your users to select a range of dates:

FilterTime("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
FilterTime("Appointment").
    Mode(config.ModeRange)

// callback
FilterTime("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
FilterTime("Appointment").
    HasTime()
    
// callback
FilterTime("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
FilterTime("Appointment").
    CustomConfig(map[string]any{
        "dateFormat": "d.m.Y",
        "maxDate": "15.12.2017"
    })

// callback
FilterTime("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
FilterTime("Appointment").
    DisplayFormat("Y-m-d")
    
// callback
FilterTime("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
FilterTime("Appointment").
    Time24Hr()
    
// callback
FilterTime("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
FilterTime("StartTime").
    HideCalendar()

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

Disable Mobile

You can set the disable mobile flatpickr option as so:

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

// callback
FilterTime("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
FilterTime("StartTime").
    HourIncrement(2)
    
// callback
FilterTime("StartTime").
    HourIncrementFn(func (ctx FieldContext) uint {
        return 2
    })

Minute Increment

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

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

Has Seconds

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

// static
FilterTime("StartTime").
    HasSeconds()
    
// callback
FilterTime("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
FilterTime("Appointment").
    WeekNumbers(true)
    
// callback
FilterTime("Appointment").
    WeekNumbersFn(func (ctx FieldContext) bool {
        return true
    })

Default Hour

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

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

Default Minute

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

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

Allow Input

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

// static
FilterTime("Appointment").
    AllowInput()
    
// callback
FilterTime("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
FilterTime("Appointment").
    MaxDate(time.Now()) // No dates past the current date
    
// dynamic
FilterTime("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! If you really want to make sure users can't filter particular dates, you'll want to add a check in your Query callback

Min Date

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

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

// callback
FilterTime("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! If you really want to make sure users can't filter particular dates, you'll want to add a check in your Query callback