1. Home
  2. Forum
  3. Xamarin.Forms
  4. Displaying Date and Time picker from single auto generated field

Displaying Date and Time picker from single auto generated field

I'm currently using sfdatform which is auto generated from my model. I have a single datetime field which I would like to display a date picker followed by a time picker to populate. However, I cannot figure out how this can be done. I expected annotating with DataType.DateTime would do it - but it doesn't. Is there something simple that I'm missing? 

10 Replies 1 reply marked as answer
SS SaiGanesh Sakthivel Syncfusion Team February 9, 2021 02:35 PM UTC

Hi Keith, 
 
Thank you for using syncfusion products. 
 
#Regarding Displaying Date and Time picker from single editor 
We would like to inform you that you can achieve your requirement with help of custom editor (CustomPickerEditor) is inherited using the DataFormEditor<Button>. Inside the custom editor, add the both date picker and time picker value in the view. please refer to the tested sample in the following link for your reference. 
 
 
Please refer to the following KB documentation about ‘How to add SfDatePicker to the SfDataForm. 
 
Please let us know if you have any concern. 
 
Regards, 
SaiGanesh Sakthivel 


TR tracstarr February 9, 2021 05:57 PM UTC

Thanks. I appreciate the response and sample. I should have added additional details in my original question/request. I had already found the linked KB - which is great. However, I'm interested in the device specific pickers (what you get by default but only for date or time, not both). Can this picker use the default styles? I've also decided to move away from annotated auto generated fields. I've found xaml to be preferable especially for custom editors.

SS SaiGanesh Sakthivel Syncfusion Team February 10, 2021 02:09 PM UTC

Hi Keith, 
 
Thank you for the update. 
 
#Regarding Generate the custom editor when AutoGenerateItems is false 
We would like to inform you that you can achieve your requirement with help of DataForm.Items and register the custom editor to the dataform item with help of RegistorEditor property in SfDataForm. Please refer to the following code snippet for your reference. 
 
Code Snippet 
dataForm.RegisterEditor("DateEditor", new CustomPickerEditor(dataForm));
…
…
… 
<dataForm:SfDataForm x:Name="dataForm" LayoutOptions="Default" AutoGenerateItems="False" DataObject="{Binding Contacts}"> 
        <dataForm:SfDataForm.Items> 
            <dataForm:DataFormItem Name="Name" Editor="Text" /> 
            <dataForm:DataFormItem Name="Address" Editor="Text"/> 
            <dataForm:DataFormItem Name="Date" Editor="DateEditor"  /> 
        </dataForm:SfDataForm.Items> 
    </dataForm:SfDataForm> 
 
Please refer to the following tested sample in the following link for your reference. 
 
#Regarding this picker use the default styles 
We would like to inform you that inside the custom editor, we have used the SfDatePicker and SfTimePicker. you can custiomize the style as your requirement. 
 
Please let us know if you have any concern. 
 
Regards, 
SaiGanesh Sakthivel 


Marked as answer
TR tracstarr February 10, 2021 02:30 PM UTC

Much appreciated. Is there a simple way to make the date picker look like a calendar and the time picker to be the rotating dial selector? (see attached images)

Attachment: pickers_70d7bbe0.zip

MS Muniappan Subramanian Syncfusion Team February 11, 2021 12:04 PM UTC

Hi Tracstarr, 
 
Thanks for the update. 
 
Based on the shared information we have checked your requirement” Display Date and TimePicker editor in a single field using framework date and time editor” in SfDataForm. As per your requirement, we have used the framework Date and Time picker instead of SfDatePicker and SfTimePicker in the dataform. We have modified the sample for the same, please find the sample link from below, 
 
Code Snippet: 
<ContentPage.Content> 
    <StackLayout> 
        <dataForm:SfDataForm x:Name="dataForm" LayoutOptions="Default" AutoGenerateItems="False" DataObject="{Binding Contacts}"> 
            <dataForm:SfDataForm.Items> 
                <dataForm:DataFormItem Name="Name" Editor="Text" /> 
                <dataForm:DataFormItem Name="Address" Editor="Text"/> 
                <dataForm:DataFormItem Name="Date" Editor="DateEditor"  /> 
            </dataForm:SfDataForm.Items> 
        </dataForm:SfDataForm> 
        <StackLayout Orientation="Horizontal"> 
            <DatePicker x:Name="datePicker" IsVisible="False"/> 
            <TimePicker x:Name="timePicker" IsVisible="False"/> 
        </StackLayout> 
    </StackLayout> 
</ContentPage.Content> 
 
 
We hope that this helps you, kindly revert us if you have any concern.  
 
Regards, 
Muniappan S.

TR tracstarr February 11, 2021 03:06 PM UTC

Tank you so much!

TR tracstarr February 12, 2021 02:05 AM UTC

Why does this fail when I set the SfDataForm.LayoutOptions = TextInputLayout ? It throws a null exception with the custom editor but I can't figure out where. I would really like to be able to use that option as it looks much nicer IMO

SS SaiGanesh Sakthivel Syncfusion Team February 12, 2021 09:33 AM UTC

Hi Keith, 
 
Thank you for the update. 
 
We have checked the reported query “Custom Editor crash on using TextInputLayout” from our end. We would like to inform you that there is no support available for non editiable custom editior views such as button, range slider, etc inside the TextInputLayout. Please refer to the following UG link about the floating layout limitations. 
 
 
Please let us know if you need any further assistance. 
 
Regards,  
SaiGanesh Sakthivel

TR tracstarr February 15, 2021 05:59 PM UTC

Thanks. I spent some additional time looking at this and there is a way to do as I wanted. I created a custom DataFormTextItem which had  the two pickers as bindable properties. Then the Editor was modified to be DataFormEditor<Entry>.  You also need to change when the focus/unfocus events are attached and removed in case you have multiple of these in your editor. The only additional issue I have with it though is that unless you add multiple custom editors with different names they don't display correctly. (the form is squished on the first). Not sure why. 

SS SaiGanesh Sakthivel Syncfusion Team February 16, 2021 01:47 PM UTC

Hi Keith, 
 
Thank you for the update. 
 
#Regarding Displaying Date and Time picker from single auto generated field 
We regret to inform you that we could not replicate the reported scenario from our side.  Its working as expected. We have tested sample with AndroidX ( Realme x2 pro) device with API 29. We have attached the tested sample for your reference and you can download the same from the following location.  
   
 
Please check the sample and let us know if you still facing the same issue? If not, please modify the sample based on your scenario and revert us back with the following details,   
  
·       Share the issue replicate video.  
·       Share the issue replicate reproduce.  
·       Share the issue replicate the platform. 

Regards, 
SaiGanesh Sakthivel 


Loader.
Up arrow icon