DateTimePicker

Tag Helper <date-time-picker /></date-time-picker>

Controls to select a date and optional time.

This DateTimePicker is a wrapper for the jQuery UI DatePicker control with some extra functionality. All jQuery javascript apis work with this control.

Properties

string id

HTML id attribute of the control

string name

HTML name attribute of the control

string date-class
Default: form-control

The class to use on the date section of the control

string hour-min-class
Default: form-select

The class to use on the time section of the control

string input-group-class

The class to use on the input group of the date control. For special formatting between the date and the calendar icon.

bool show-date
Default: true

Show the date control

bool show-time
Default: false

Show the time controls

bool read-only
Default: false

Make the control read only.

DateTime? value
Default: null

The DateTime value to display

DateTime? min-date
Default: null

The minimum allowed DateTime value

DateTime? max-date
Default: null

The maximum allowed DateTime value

bool zero-minutes
Default: false

When the value is null use "00" for the minutes instead of leaving it empty.

DateTime? min-hours
Default: null

The minimum allowed Hours value

DateTime? max-hours
Default: null

The maximum allowed Hours value

HourTypes hour-type
Default: HourTypes.TwentyFourHour

Show as either 24 hour or AM/PM.

HourTypes.TwentyFourHour - 24 hour mode.
HourTypes.AmPm - AM / PM mode.

bool allow-null
Default: true

Allow null values. Places an empty option on the hour and minute selectors.

int interval
Default: 1

The number of intervals between minutes. By default it is 1 which is 1 minute. Set to 15 to only show 15 minute increments etc.

bool required
Default: false

Set as a required field.

int? yearRangeMin

Adjusts the minimum year displayed on the calendar control and drop down box. This does not prevent a date being typed in for an earlier year.

int? yearRangeMax
Default: null

Adjusts the maximum year displayed on the calendar control and drop down box. This does not prevent a date being typed in for a later year.

string placeholder

Puts the text as a placeholder in the date field.

Javascript Methods

ShareItLibrary.DateTimePicker.MinDate(date)

The minimum allowed DateTime value

ShareItLibrary.DateTimePicker.MaxDate(date)

The maximum allowed DateTime value

siSetDate(date)

Changes the date in the control

siSetHour(hour)

Changes the hour in the control

siSetMinute(min)

Changes the minute in the control

ShareItLibrary.DateTimePicker.FormatDate()

Format a javascript month as "d MMM yyyy".

Javascript Event

changed

Triggered after a date or time has changed. $('#MyDate').on('changed', function(d) { });

d: The new DateTime.

Example

Razor
@Html.DateTimePickerFor(model => model.MyDate, htmlAttributes: new { @class = "form-control" })

Timezones

  • Store system timestamps as a DateTime with the extension Utc ie: CreateDateUtc
    • Store using DateTime.NowUtc
    • When displaying use @m.CreateDateUtc.FormatClientFromUtcDateTime(tzId)
  • Store editable dates or dates and times as a DateTimeOffset ie: ClockOnTime
    • When saving... do nothing. It will use the timezone automatically
    • When displaying use @m.ClockOnTime.FormatDateTime(tzId)
    • If sending to DateTimePicker then when edit do not change.
  • To convert UTC to current timezone as a date to be compared ie: Start of Year or Start of Financial Year
    • var dt = DateTime.UtcNow.UtcToOffsetDate(timezoneId)
    • var dt = DateTimeOffset.UtcNow.FormatDate(timezoneId)
    • var dt = DateTime.UtcNow.UtcToClientOffset(timezoneId).FinancialYearStart().ClientLocalDateToOffset(timezoneId)
  • To get today as offset
    • DateTime.UtcNow.Date.UtcToOffsetDate(timezoneId)