Date and Timepicker to the same source property

[Patrick]

Dear Support

I would like to achieve the following.

In my viewmodel I do have StartDateTime and a EndDateTime property.

The DataForm should have a picker for StartDate, StartTime, EndDate and EndTime. Because the DatePicker resets the TimeOfDay Value in DateTime we need also a converter for this. I don't understand where to implement those.

I have seend the examples in the documentation, but I don't understand how to implement it with manual DataForm creation.

Here you see my current code (which does not work as I wish):

<dataForm:SfDataForm x:Name="DataForm"
                     DataObject="{Binding Meeting}"
                     CommitMode="LostFocus"
                     LabelPosition="Top"

                     HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     MinimumHeightRequest="400"
                     MinimumWidthRequest="400"

                     AutoGenerateItems="False"
                     AutoGeneratingDataFormItem="DataForm_AutoGeneratingDataFormItem">
    <dataForm:SfDataForm.Items>
        <dataForm:DataFormTextItem Name="Subject" Editor="Text"/>
        <dataForm:DataFormDateItem Name="StartDateTime" LabelText="Start Date" Editor="Date"
                                   Format="dd.MM.yyyy" />
        <dataForm:DataFormTimeItem Name="StartDateTime" LabelText="Start Time" Editor="Time"
                                   Format="HH:mm" />
        <dataForm:DataFormDateItem Name="EndDateTime" LabelText="End Date" Editor="Date"
                                   Format="dd.MM.yyyy" />
        <dataForm:DataFormTimeItem Name="EndDateTime" LabelText="End Time" Editor="Time" Format="HH:mm" />
        <dataForm:DataFormCheckBoxItem Name="IsAllDay" LabelText="Is all day?"
                                       Editor="Bool" IsThreeState="False" />
        <dataForm:DataFormTextItem Name="Location" LabelText="Location" Editor="Text" />
        <dataForm:DataFormDropDownItem x:Name="MeetingTypeItem" Name="MeetingType" 
                                       LabelText="Meeting Type" Editor="DropDown" />
        <dataForm:DataFormTextItem Name="Notes" Editor="MultilineText" />
    dataForm:SfDataForm.Items>
dataForm:SfDataForm>

public class CustomDataFormDateEditor : DataFormEditor<DataFormDatePicker>
{
    public CustomDataFormDateEditor(SfDataForm dataForm) : base(dataForm)
    {
    }

    protected override DataFormDatePicker OnCreateEditorView(DataFormItem dataFormItem)
    {
        return new DataFormDatePicker();
    }
}

protected override void OnAppearing()
{
    base.OnAppearing();
    
    DataForm.RegisterEditor("Date", new CustomDataFormDateEditor(DataForm));
    DataForm.RegisterEditor("StartDateTime", "CustomDataFormDateEditor");
    
    MeetingTypeItem.ItemsSource = MeetingType.MeetingTypesList();
}

public class DatePickerConverter : IValueConverter
{
    DateTime _timePickerDate;


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        _timePickerDate = (DateTime) value;

        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return _timePickerDate;

        var datePickerDate = (DateTime) value;

        if (datePickerDate.TimeOfDay.Ticks != _timePickerDate.TimeOfDay.Ticks)
        {
            // correct the date picker value
            var result = new DateTime(datePickerDate.Year,
                datePickerDate.Month,
                datePickerDate.Day,
                _timePickerDate.Hour,
                _timePickerDate.Minute,
                _timePickerDate.Second);

            // return, because this event handler will be executed a second time
            return result;
        }

        return datePickerDate;
    }
}

public class TimePickerConverter : IValueConverter
{
    DateTime _originDate;


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        _originDate = (DateTime) value;

        return _originDate.TimeOfDay;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return _originDate;

        var timePickerTime = ((TimeSpan) (value));
        //var datePickerDate = ((DateTime)(value));

        if (timePickerTime.Ticks != _originDate.TimeOfDay.Ticks)
        {
            // correct the date picker value
            var result = new DateTime(_originDate.Year, _originDate.Month, _originDate.Day) + timePickerTime;

            // return, because this event handler will be executed a second time
            return result;
        }

        return timePickerTime;
    }
}

Would be thankful for an example.

Best Regards

Patrick

[SaiGanesh Sakthivel]

Hi Patrick, 

 

Thank you for the contacting syncfusion support. 

 

We have checked the reported query “Date and Timepicker to the same source property” from our end. We have prepared the sample as per given information and attached the demo sample in the following link for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataFormXamarin-205391051 

 

Image: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tested1041588550 

 

Please check our sample and let us know if you still facing the same issue? If not, please modify our sample based on your scenario and revert us back with the following details,  

 

·       Syncfusion and Xamarin.Forms update version. 

·       Issue replicate platform. 

It will be helpful for us to check on it and provide you the solution at the earliest. 

Regards,
SaiGanesh Sakthivel