Datepicker Component - fgta5js Documentation

Overview

Inheritance Notice: Class Datepicker inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Datepicker class integrates custom input calendars within the fgta5js framework. It formats selected dates into readable localized format strings (e.g., DD MMM YYYY) on blur/display while submitting raw ISO dates (YYYY-MM-DD) programmatically.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value ""

.InEditMode true

.getLastValue() ""

.isChanged() false

HTML Markup

Define date inputs using standard HTML. Use fgta5-component="Datepicker" to enable binding.

<form id="myform" locked="true">
  <!-- Datepicker Input -->
  <div class="demo-input-field" field="obj_date">
    <label for="obj_date">Transaction Date</label>
    <input id="obj_date" fgta5-component="Datepicker" placeholder="Select date" required>
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

HTML Attributes

Attribute	Values	Description
`placeholder`	`String`	Helpful placeholder text displayed when the input is empty.
`disabled`	N/A	Disables the picker tanggal, preventing any interaction.
`required`	N/A	Marks the component as required during form validation.
`min`	`String (YYYY-MM-DD)`	Lower date boundary validation constraint.
`max`	`String (YYYY-MM-DD)`	Upper date boundary validation constraint.
`data-tabindex`	`Number`	Sets the native tabindex on the final display element for keyboard navigation.

Properties

Property	Type	Description
`value`	`String`	Get or set the current date value. Returns an ISO date string format (`YYYY-MM-DD`).
`min`	`Date \| String`	Get or set the minimum date limit boundary.
`max`	`Date \| String`	Get or set the maximum date limit boundary.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Datepicker` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only and clears errors.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean, keepState: Boolean)`	Suspends input interaction.
`isSuspended()`	`()`	Checks if the component is suspended.
`newData(initialvalue)`	`(initialvalue: String)`	Initializes the input with a new value and resets change detection states.
`getLastValue()`	`()`	Returns the last committed/saved value string.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`focus()`	`()`	Programmatically shifts focus onto the date field element.