Reduce spacing between columns

[Rupesh]

Hello team,

I have below queries regarding sftimepicker control

1. Reduce the spacing between columns in sftimepicker control as highlighted in blue color in attached image. 
2. Need to show top and bottom lines to the selected time as highlighted in red color in given image.
   
3. Binding the time property of time picker with label text. In time picker time is showing in 12h format while in bound label, it is showing selected time in 24h format. How can I get the selected time in 12h format including meridian. Please see image 2 for the same

Attachment: Images_85de002.zip

[Suganya Sethuraman]

Hi Rupesh,

 

Query 1: “Reduce the spacing between columns in sftimepicker control as highlighted in blue color in attached image.”

We have achieved your requirement by setting e.Width in the OnColumnLoaded event of SfPicker, as shown in the code snippet below.

Code Snippet: 

  private void date_OnColumnLoaded(object sender, Syncfusion.SfPicker.XForms.ColumnLoadedEventArgs e) 

        { 

            if (e.Column == 1) 

            { 

                e.ColumnWidth = 50; 

            } 

        } 

Query 2: “Need to show top and bottom lines to the selected time as highlighted in red color in given image.”

Currently, We are checking this and we will update the details on January 18, 2022.

Query 3: “How can I get the selected time in 12h format including meridian.”

We have prepared a sample based on your requirement. Please have a sample for your requirement.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TimePicker-785312782

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Rupesh,

Query 2: “Need to show top and bottom lines to the selected time as highlighted in red color in given image.”

Still we are checking this at the source level, and we will update the details on January 20, 2022. We appreciate your patience until then.

Regards,
Suganya Sethuraman. 

[Rupesh]

Thanks for the update. Waiting to hear from you

[Suganya Sethuraman]

Hi Rupesh,

Query 2: “Need to show top and bottom lines to the selected time as highlighted in red color in given image.”

We recommend that you set SelectionBackgroundColor to achieve your requirement, as shown in the code snippet below.

Code snippet 

        <local:CustomTimePicker 

            x:Name="date" 

            ColumnHeaderHeight="40" 

            HorizontalOptions="Center" 

            VerticalOptions="Center" 

            PickerHeight="400"  

            SelectionBackgroundColor="Red" 

            EnableLooping="True" 

            PickerMode="Dialog" 

            PickerWidth="300" SelectionChanged="date_SelectionChanged" 

            SelectedItem="{Binding SelectedTime,Mode=TwoWay}" OnColumnLoaded="date_OnColumnLoaded"> 

            <local:CustomTimePicker.HeaderView> 

                <Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Medium"/> 

            </local:CustomTimePicker.HeaderView> 

        </local:CustomTimePicker> 

Please check and let us know if you have any concerns.

Regards,
Suganya Sethuraman.