Skip to main content

Datepicker

This page explains how to use the Datepicker widget to display or capture date/time information. It enables to filter the data based on a date range, format dates and performs date validations.

Using the Datepicker widget

Update date

To update the date, you can start by setting a Default Date. You can also display the date from a query response or JS function and set it to any valid date format that the widget supports. To access the date the user selects in the Datepicker widget, you can use the formattedDate or selectedDate reference property.

  • The formattedDate property contains the formatted date value currently selected within the Datepicker widget. The format depends on the Date Format property set for the widget.
  • The selectedDate property contains the ISO date string selected in the Datepicker widget. This value also changes if the default value is updated or the user inputs a new value. The date is in the format: YYYY-MM-DDTHH:mm:ss.sssZ, where Z represents the time zone offset from UTC.

Example: suppose you have a master-detail form showing users' date of birth when you select a row in a table. For this, lets use the same tblUserData table.

  1. To display the date of birth of each user in the Datepicker widget when a row is selected, set the Default Date property of the Datepicker as shown below:
{{tblUserData.selectedRow.dob}}
  1. To update the date of birth, you can create a new query called updateDob with an UPDATE statement as shown below:
UPDATE users
SET dob = {{DatePicker.selectedDate}}
WHERE id = {{tblUserData.selectedRow.id}};

Then, set the onDateSelected event listener of the Datepicker widget to run theupdateDob query.

You can also use the built-in Moment.js library in Appsmith to parse the date in the format required. For instance, if you want to convert the selected date and time to the IST timezone (Asia/Kolkata), use the following code:

{{
moment(datePickerName.selectedDate).tz("Asia/Kolkata").format()
}}
Display date
Display date from table row

Filter data for a date range

To get data that was collected within a particular time frame, you need to use a query to filter the data based on that time frame. To retrieve data for a specific date range, you can use either the formattedDate or selectedDate reference property.


Example: suppose you have a table in your database that contains user details, including their date of birth (DOB). You want to allow users to filter data for specific dates, such as retrieving data of users born between 01/01/1980 and 01/01/2010.

  1. Fetch data from the sample database users using a SELECT query fetchUserData.

  2. Display the data by binding the query response to the Table Data property of the Table widget tblUserData, as shown below:

{{fetchUserData.data}}
  1. Now, add two date pickers to your canvas. Then, create a new query called filterdata with the SQL statement:
SELECT * FROM users WHERE dob > {{DatePicker1.selectedDate}} AND dob < {{DatePicker2.selectedDate}} ORDER BY id;

This query retrieves data based on the user-selected date range. Next, you can bind the onDateSelected event to run the filterdata query for both Datepickers.

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties are present in the property pane of the widget. The following table lists all the widget properties.

PropertyData typeDescription
Default DateStringSets a default date that would be captured as user input unless the user changes it.
Date FormatISO 8601 date stringThe date format selected by the date picker.
Time PrecisionStringDecides whether a time is included within the Datepicker, and whether that time is to the minute or second precision. With JS enabled, values may be None, minute, or second.
RequiredBooleanSets whether the checkbox is a mandatory field.
VisibleBooleanControls widget's visibility on the page.
DisabledBooleanDisables input to the widget.
TooltipStringIt sets a tooltip for the widget. You can add hints or extra information about the required input from the user.
Animate LoadingBooleanWhen this toggle is switched on, it enables a skeleton loading screen, which sets an animated placeholder while the widget is loading and becomes visible. You can also control this toggle using JavaScript code by clicking the JS button.
Close On SelectionBooleanSets whether the Datepicker menu would automatically close when the user clicks on a date.
Show ShortcutsBooleanToggles an additional part of the Datepicker menu that allows the user to select from options such as Today, 1 week ago, etc.
Min DateISO 8601 date stringSets a minimum/earliest date allowed to be selected with the widget.
Max DateISO 8601 date stringSets a maximum/latest date allowed to be selected with the widget.
First Day Of WeekNumberSets which day of the week appears first within the calendar of the Datepicker's menu.
HeightStringIt configures how a widget’s height reacts to content changes. It has three possible configurations:
Fixed: The height of the widget remains as set using drag and resize.
Auto Height: The widget's height reacts to content changes.
Auto Height with limits: Same as Auto height, with a configurable option to set the minimum and the maximum number of rows the widget can occupy.
TextStringThis property sets the default text of the Datepicker.
PositionStringIt allows you to specify the placement of the label.

Reference properties

These properties allow you to bind your select widget with any other widget in queries or JS objects. For instance, you can use DatePicker1.isVisible to get the visibility status.

Reference PropertyData typeDescription
formattedDateStringContains the formatted date value currently selected within the Datepicker widget. This value changes if the default value is updated or the user inputs a new value.
selectedDateStringContains the ISO date string value selected in the Datepicker widget. This value changes if the default value is updated or the user inputs a new value.
isDisabledBooleanThis property indicates whether the widget is disabled.
isVisibleBooleanThis property indicates whether the widget is visible.

Style properties

Style properties allow you to change the look and feel of the widget.

PropertyData typeDescription
Border RadiusStringSpecifies the radius of the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values.
Box ShadowStringAdds a drop shadow to the widget. With JS enabled, this accepts valid CSS box-shadow values.
Font ColorStringSets the color of the text inside the widget.
Font SizeStringSets the text size inside the widget.
Emphasis StyleStringAllows you to choose a font style; bold or italic.

Events

When the event is triggered, these event handlers can run queries, JS code, or other supported actions

EventDescription
onDateSelectedTriggers an action when a user selects a date.
onFocusTriggers an action when a Datepicker widget is focused.
onBlurTriggers an action when a Datepicker widget loses focus.