Custom Inline time picker

[ridsashabbir]

we need a time picker for customer app, where first we have a option to select 'am' or 'pm' then there is time, user can scroll it up or down to select specific time, and the time that is being selected will be displayed on screen with formatting like '4:45 pm', like the one we use to set alarm in real device

here is the screenshot of what exactly we need to built: https://imgur.com/sqwB6cL

[kmahmood74]

@hemish11 any update on this one, it shows in progress?

[hemish11]

Sample EDL:

View:
  header:
    title: Inline TImePicker
  styles:
    scrollableView: true
  body:
    Column:
      children:
        - InlineTimePicker:
            id: timePicker
            initialTime: "11:44"
            mode: hms
            showHourLabel: false

        - Button:
            label: Get Time
            onTap: |
              //@code
              console.log(timePicker.selectedTime);

[hemish11]

@kmahmood74 here's the video of it's working:

https://github.com/user-attachments/assets/49af2ca4-0dac-4f48-90bd-ba5def68e560

[kmahmood74]

@hemish11 please implement the time picker as clearly described in the description of the ticket. You have implemented a duration widget and not a time widget.

[kmahmood74]

assigning to @TheNoumanDev Nouman, the PR that @hemish11 created does not provide the inline time picker, instead it provides a time range widget. Please ignore that PR and implement this ticket from scratch.

We already have a Time widget.

1. There should be a property on the time widget called userIOSStyleTimePicker as a boolean. This should be true by default on iOS and false on all other platforms. User can set it to false to override the default behavior on iOS as well.
2. When set to true, the CupertinoDatePicker with the time mode should appear.
3. Expose properties such as use24hFormat on the actual Time widget and make sure the existing time picker and the cupertino time picker both process these properties

Let me know if you have any questions. Also once you have it ready for testing, check with Ridsa to make sure her use case is covered, use her app to configure it under the calendar as she needs it and then test

@ridsashabbir the time picker will appear like this -

[TheNoumanDev]

Hey @kmahmood74! I’ve updated the Time widget as per your request and discussed the use case with Ridsa. However, she has a slightly different requirement:

• We currently have separate widgets for Time and Date, each opening its respective picker when the user clicks on the form field.
• However, according to the image she shared, she wants the Time widget to appear when the user selects a date from the calendar. In this use case, the Time picker should either be triggered as an action.

Do I need to change the implementation of the Time widget? Let me know what you think.

Below is the current implementation based on your initial description.

https://github.com/user-attachments/assets/4922d3a8-a63f-4feb-a844-be31614ecf0f

[kmahmood74]

@ridsashabbir which customer is this needed for? We'll keep date and time separate for now. That's a reasonable interaction.

[TheNoumanDev]

Created PR Example EDL:

Time:
    id: android_custom
    label: Android Time Picker - Customized
    hintText: Set your alarm
    required: false
    initialValue: '07:30'
    useIOSStyleTimePicker: false
    use24hFormat: false
    styles:
      androidStyles:
        initialEntryMode: input
        cancelText: 'Nevermind'
        confirmText: 'Set Alarm'
        backgroundColor: '#FFEBEE'
        hourMinuteBackgroundColor: '#FFCDD2'
        dialBackgroundColor: white
        dialHandColor: green
        dialTextColor: red
        entryModeIconColor: '#D32F2F'
        helpTextStyle:
          fontSize: 25
          fontWeight: bold
          color: '#D32F2F'
      iOSStyles:
        backgroundColor: '#FFF9C4'
        height: 300
        padding: 10

[ridsashabbir]

@ridsashabbir which customer is this needed for? We'll keep date and time separate for now. That's a reasonable interaction.

it's for Chowmill, but yup, sure, let's keep it separate for now