The Bootstrap Datepicker is a wrapper for the popular Javascript library with the same name. You can see more details of the configuration options available in the official documentation of the javascript library here.

After installing the component from the forge, open the "Add public elements" dialog (or click Ctrl+Q), select the library "Bootstrap DatePicker" and add the block element.

You will see a new web block available to use in screens or other web blocks.

To use the widget, place it in the screen and select an input widget (or a textarea) to handle the events and receive the date selected by the user.

In the screen, the user should click the input widget and the Bootstrap DatePicker will pop up and show a calendar formatted with the options defined by the developer.

To configure the widget for normal operation and behavior, the following parameters are used:

• WidgetId (mandatory, text): Identify the input widget (or textarea) that will react to events and receive the date selected. The datepicker popup will be placed below the identified widget;
• Format (text): The date format returned by the datepicker. The default format is "dd-mm-yyyy";
• maxViewMode (text): Sets the maximum limit for the view mode. The default value is "centuries";
• minViewMode (text): Sets the minimum limit for the view mode. The default value is "days";
• startView (text): Sets the view mode that the datepicker should show at start. The default value is "days";
• daysOfWeekDisabled (text): Set what days of week should be disabled for selection. The default value is "[]";
• startDate (text): The earliest date that may be selected. The default value is "01-01-1900";
• endDate (text): The latest date that may be selected. The default value is "31-12-3000";
• enableOnReadonly (boolean): If false, the datepicker will not show on a readonly datepicker field. The default value is "False";
• disableTouchKeyboard (boolean): If true, no keyboard will show on mobile devices. The default value is "True";
• multidate (text): Enable multidate picking. Each date in month view acts as a toggle button, keeping track of which dates the user has selected in order. If a number is given, the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded. The default value is "False";
• todayHighlight (boolean): If true, highlights the current date. The default value is "True";
• Language (text): The IETF code of the language to use for month and day names. The default value is "en".

When the user selects the target date, the datepicker will throw and event:

• OnDateChangeEvent (mandatory to handle): This event will be thrown when the user finish to select the date. The following parameter is passed with the event:
• SelectedDate (date): The selected date selected by the user.

This component imports the following Javascript libraries:

• jQuery v3.6.1 (https://jquery.org/)
• Bootstrap v5.2.1 (https://getbootstrap.com/)
• Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
• inputmask.min (https://github.com/RobinHerbots/Inputmask)