Chronograph
[data-chronograph] elements in TypeScript whenever they are added to the page.Attributes
Model
| Attribute | Type | Default | Description | |
|---|---|---|---|---|
DataType |
DataType.Date | DataType.DateTime |
none | Adds default attributes to input element. | |
ValidateAgeWithClientValidation |
MinimumAge |
none | Sets maximum (latest) date that the user may select. | |
ChronographRange |
Start, End |
none | Sets the related end or start date. |
HTML
| Element | Attribute | Type | Default | Description | |
|---|---|---|---|---|---|
input |
data-chronograph |
date | datetime |
none | Whether to show calendar and/or clock. Attaches flatpickr to this element. Added automatically when using DataType and field helper. |
|
input |
data-allow-input |
true | false |
true |
Whether to allow the user to type a value directly into the input. | |
input |
data-date-format |
... |
n/j/Y for daten/j/Y h:i:S K for datetime
|
Tokens to specify a desired date format. See the documentation and type definitions for the available tokens. Added automatically when using DataType and field helper. |
|
input |
data-range-end |
selector | none | Selector for corresponding range end date. Use on the range start date. | |
input |
data-range-start |
date | datetime |
none | Selector for corresponding range start date. Use on the range end date. | |
input |
data-change-callback |
global function | none | Name of a function on window to call when date/datetime changes. |
|
input |
data-change-callback-parameters |
[any, ...] |
none | Parameters to pass to the change callback function. | |
input |
data-... |
... |
... |
All flatpickr options can be specified using data attributes. See the documentation and type definitions for the available options. |
Date Example
Model
[Display(Name = "Date of Birth")]
[DataType(DataType.Date, ErrorMessage = "Please select a valid date of birth.")]
[ValidateAgeWithClientValidation(MinimumAge = 13)]
public DateTime? DateOfBirth { get; set; }
View
@Html.TextFieldFor(m => m.DateOfBirth, new { data_change_callback = "logDate",
data_change_callback_parameters = "[\"You selected:\"]" })
TypeScript
import LsChronograph from ".../Src/Components/Chronograph/Chronograph";
const cg = new LsChronograph("form");
window.logDate = (dates, value, fp, message, el) => {
console.log(`${message} ${value}`);
};
DateTime Range Example
Model
[Display(Name = "Start Date")]
[DataType(DataType.DateTime, ErrorMessage = "Please select a valid start date.")]
[ChronographRange(End = nameof(EndDate))]
public DateTime? StartDate { get; set; }
[Display(Name = "End Date")]
[DataType(DataType.DateTime, ErrorMessage = "Please select a valid end date.")]
[ChronographRange(Start = nameof(StartDate))]
public DateTime? EndDate { get; set; }
View
@Html.TextFieldFor(m => m.StartDate) @Html.TextFieldFor(m => m.EndDate)
TypeScript
import LsChronograph from ".../Src/Components/Chronograph/Chronograph";
const cg = new LsChronograph("form");