Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Mobile Apps and Reactive Web Apps

 

 

OutSystems

Date Picker

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Date Picker UI Pattern to allow the user to select a single or a range of dates using a calendar.

    How to Use the Date Picker UI Pattern

    1. In Service Studio, in the Toolbox, search for Date Picker.

      The Date Picker Image widget is displayed.

    2. From the Toolbox, drag the Date Picker widget into the Main Content area of your application's screen.

      On the Properties tab, you are prompted to create an event.

    3. To have access to the picked date, you need to create an assign to the startDate (if SelectInterval is False ).

    4. Set the default value of the variable PickedDate as CurrDateTime().

    Result

    Listing Events of a Selected Day

    1. Set the area where you want to put the list of events.

    2. Create an entity with a DateTime attribute.

    3. Set the entity in your EventList parameter on eventList, using the right attribute to map.

    4. Add the list to the page.

    5. Create a Local Variable.

    6. Get another Aggregate for the Events and set a filter on the aggregate:
      DateTimeToDate(Events.DateTime) = Date

    Result

    Properties

    Properties Description
    InputWidgetId (Text): Mandatory Input element Id that triggers the element so it is visible.
    ButtonWidgetId (Text): Optional Element name (example: button) that triggers the element so it is visible.
    EventList (Date Time List): Optional Receives a List of DateTime records that are used to highlight days as event days.
    MinDate (Date Time): Optional Days before this date will be disabled.
    MaxDate (Date Time): Optional Days after this date will be disabled.
    InitialDate (Date Time): Optional The initially selected day for the Date Picker. If not set, it will be the current day by default.
    ShowWeekNumbers (Boolean): Optional If True, the week number is displayed on the left side of the Date Picker. If False, the week number is not dispalyed. This is the default.
    FirstWeekDay (Integer): Optional Defines which weekday is displayed first.
    • 0: Sunday
    • 1: Monday (default)
    • 2: Tuesday
    • 3: Wednesday
    • 4: Thursday
    • 5: Friday
    • 6: Saturday
    ShowTime (Boolean): Optional If True, a time picker is displayed below the Date Picker. If False, there is no time picker displayed. This is the default.
    Show24HourFormat (boolean) If True, the time picker is displayed in a 24-hour format. This is the default. If False, the time picker is displayed in a 12-hour format.
    DisabledDaysList (Date Time List): Optional Receives a List of DateTime records that will be disabled on the DatePicker. If this parameter is not set, all days between the MinDate and MaxDate are enabled. No default value.
    DisabledWeekDays (Text): Optional String containing disabled weekdays.
    • 0: Sunday
    • 1: Monday
    • 2: Tuesday
    • 3: Wednesday
    • 4: Thursday
    • 5: Friday
    • 6: Saturday
    Example

    • Blank - All weekdays are active.
    • "0,5" - Sunday and Friday are disabled.
    SelectInterval (Boolean): Optional Allows the selection between two dates. If True, the Block Event "On Select" has the values for both parameters.
    StartEmpty (Boolean): Optional Defines whether the input for the Date Picker starts as empty.
    DateFormat (Text): Optional Defaults to the date format defined in the server configuration. The default is the server date format.

    Examples

    • DD/MM/YYYY - 15/05/2020
    • MM/DD/YYYY - 05/15/2020
    • DD MMM YYYY - 15 May 2020
    ShowTodayButton (Boolean): Optional If True, the Today button is displayed. If False, the Today Button is not displayed. This is the default.
    AdvancedFormat (Text): Optional Allows fors more options beyond what is provided through the inputs.
    • Was this article helpful?