Format dates in Date Picker

Available from WorkWithPlus for Web 15 Upgrade #2.2 

 

The possibility to format specific dates or disable them in the DatePicker User Control was added.

DatePickerFormat

The SDT that contains the information for the DatePicker User Control has a new section:

DatePickerFormatDates

So, with these properties you will be disabling, adding a tooltip, and adding a format to a specific date. If you have working with WorkWithPlus in previous versions and want to have this feature, just run the Design System Wizard without changing any property so that WorkWithPlus imports the updated SDT.

In order to format dates in some Web Panel, you need to load the SDT variable and then assign it using the WWPActions External Object.

In this example, the following Data Provider was created:

WWPDateRangePickerOptions
{
    FormattedDays
    {
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 23)
            Disabled = True
            Tooltip = "Thanksgiving" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 24)
            Disabled = True
            Tooltip = "Thanksgiving" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 13)
            Class = !'daterangepicker-badge daterangepicker-badge-warning'
            Tooltip =  "Company meetings in afternoon" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 14)
            Class = !'daterangepicker-badge daterangepicker-badge-warning'
            Tooltip =  "Company meetings in afternoon" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 6)
            Class = !'daterangepicker-badge daterangepicker-badge-success'
            Tooltip = "Best dates" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 7)
            Class = !'daterangepicker-badge daterangepicker-badge-success'
            Tooltip = "Best dates" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 8)
            Class = !'daterangepicker-badge daterangepicker-badge-success'
            Tooltip = "Best dates" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 9)
            Class = !'daterangepicker-badge daterangepicker-badge-success'
            Tooltip = "Best dates" 
        }
        FormattedDaysItem
        {
            Date = YMDtoD(2023, 11, 10)
            Class = !'daterangepicker-badge daterangepicker-badge-success'
            Tooltip ="Best dates" 
        }
    }
}

And then, in the Start Event of the Transaction, the following code was added:

&WWPDateRangePickerOptions = ProjectAvailableDates()
WWPActions.DateTimePicker_SetOptions(ProjectStartDate.InternalName, &WWPDateRangePickerOptions.ToJson())

There are some predefined classes for formatting the dates, but you could create your own formats by adding the needed classes in the Design System and then in the Class property of the FormattedDaysItem select it.

The predefined formatting classes are the following:

  • Success        >>    !'daterangepicker-badge daterangepicker-badge-success'
  • Danger        >>    !'daterangepicker-badge daterangepicker-badge-danger'
  • Warning        >>    !'daterangepicker-badge daterangepicker-badge-warning'
  • BaseColor    >>    !'daterangepicker-badge daterangepicker-badge-basecolor'
  • Info        >>    !'daterangepicker-badge daterangepicker-badge-info'
  • InfoLight    >>    !'daterangepicker-badge daterangepicker-badge-infolight'

This feature is also supported for Date Range Pickers. In this case, you should define it in the variable assigned for the SDT.