DayPicker in WinCC OA

This page demonstrates how to implement a date and time picker in WinCC OA. When an input field is clicked, a date and time picker will pop up, allowing the user to select a date and time. The selected value is then formatted and displayed in the input field.

Implementing the Date and Time Picker

To display a date and time picker when an input field is clicked, you can use the dateTimePicker function. Once a selection is made, the value is converted to a string using formatTime and displayed in the input field.


    // This example is triggered when a specific input field is clicked.
    // Replace 'YourInputField' with the actual panel element name.
    // [YourInputField] [12] - [Clicked]
    #uses "sched"
    main(mapping event)
    {
        time selectedTime;
        dateTimePicker(selectedTime, YourInputField);
        string formattedTime = formatTime("%d/%m/%y", selectedTime);
        YourInputField.text(formattedTime);
    }
    

Formatting the Time

The formatTime function allows you to format the time in a user-friendly manner. You can specify the desired format using the parameters described below.


    // Example usage of formatTime to format the selected time
    string formattedTime = formatTime("%d/%m/%y %H:%M", selectedTime);
    // This will format the time as 'Day/Month/Year Hour:Minute'
    

Available Formatting Parameters

Below is a list of parameters you can use with formatTime to customize the time format:

  • %d - Day of the month (01 - 31)
  • %m - Month (01 - 12)
  • %y - Year without the century (00 - 99)
  • %Y - Year with the century
  • %H - Hour (00 - 23)
  • %I - Hour (00 -12)
  • %M - Minute (00 - 59)
  • %S - Second (00 - 59)