We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Date and Time Picker in same control

Hi! 
Is possible select date and time using DatePicker or TimePicker control? Like this Android lib https://github.com/florent37/SingleDateAndTimePicker or iOS https://developer.apple.com/documentation/uikit/uidatepicker

Thanks a lot. Great job :)

9 Replies

HM Hemalatha Marikumar Syncfusion Team December 24, 2019 09:59 AM

Hi, 
 
Greetings from Syncfusion. 
 
We have analyzed your query.  You can achieve your requirement by using SfPicker. We have created sample based on your requirement please find the sample from below location. 
 
Screen shot: 
 
  
Please let us know if you have any other queries. 
 
Regards, 
Hemalatha M. 



MO movilidad@netkia.es December 26, 2019 02:18 AM

Thanks a lot. This is the solution :)


MO movilidad@netkia.es December 27, 2019 02:53 AM

Hi! 
I have launched the solution and I cannot set a start DateTime and an end DateTime . Is there any simple way to set it?
Thank you 


MO movilidad@netkia.es December 30, 2019 09:42 AM

Hi! 
I have launched the solution and I cannot set a start DateTime and an end DateTime . Is there any simple way to set it?
Thank you 


HM Hemalatha Marikumar Syncfusion Team December 31, 2019 07:40 AM

Hi,

Thanks for your update.
 
 
Query: Is there any simple way to set start and end Date? 
 
Yes. Your requirement has been achieved by assigning the new ItemsSource to Picker based on the start end DateTime as per in prepared sample in below 
  
 
In the above sample, we have changed the start and end date time on button click. 
 
Regards, 
Hemalatha M. 
 
 



MO movilidad@netkia.es January 2, 2020 05:07 AM

Thanks a lot.

I I've tried the sample.Using the example I can select the same range of hours on different days. But I like select any hours between two ranges of dates. For example, all hours between January 1 at 1:00 and January 3 at 3:00:

1 enero

1:00


2:00


3:00


4:00


5:00


6:00


7:00


8:00


9:00


10:00


11:00


12:00


13:00


14:00


15:00


16:00


17:00


18:00


19:00


20:00


21:00


22:00


23:00

2/1/2020

0:00


1:00


2:00


3:00


4:00


5:00


6:00


7:00


8:00


9:00


10:00


11:00


12:00


13:00


14:00


15:00


16:00


17:00


18:00


19:00


20:00


21:00


22:00


23:00

3/1/2020

0:00


1:00


2:00


3:00

In my app, I have a iOS  CustomDateTimePicker to using native DateTimePicker:

    public class CustomDatePickerRender : DatePickerRenderer
    {

            public CustomDateTimePicker dtPicker;
            public UIDatePicker input;

            protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
            {
                base.OnElementChanged(e);

                dtPicker = e.NewElement as CustomDateTimePicker;

                if (Control!=null)
                {
                    input = Control.InputView as UIDatePicker;
                    if (input != null && input.Mode != UIDatePickerMode.DateAndTime)
                    {
                        input.Mode = UIDatePickerMode.DateAndTime;
                        input.ValueChanged += Input_ValueChanged;
                        
                    }
                }
                
               
            }
        
        
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == DatePicker.MinimumDateProperty.PropertyName)
            {
                if (input != null)
                {
                    TimeZoneInfo estZone = TimeZoneInfo.Local;
                    DateTime date = DateTime.SpecifyKind(dtPicker.MiminumDT, DateTimeKind.Unspecified);
                    DateTime estTime = TimeZoneInfo.ConvertTimeFromUtc(date, estZone);

                    NSDate nSDate = Extensions.ToNSDate(estTime);
                    input.MinimumDate = nSDate;
                }
            }
            else if (e.PropertyName == DatePicker.MaximumDateProperty.PropertyName)
            {
                if (input != null)
                {
                    TimeZoneInfo estZone = TimeZoneInfo.Local;
                    DateTime date = DateTime.SpecifyKind(dtPicker.MaximunDT, DateTimeKind.Unspecified);

                    DateTime estTime = TimeZoneInfo.ConvertTimeFromUtc(date, estZone);
                    NSDate nSDate = Extensions.ToNSDate(estTime);
                    input.MaximumDate = nSDate;

                }

            }else if (e.PropertyName == DatePicker.IsFocusedProperty.PropertyName)
            {
                if (input != null)
                {
                    TimeZoneInfo estZone = TimeZoneInfo.Local;
                    DateTime date = DateTime.SpecifyKind(dtPicker.CDT, DateTimeKind.Unspecified);

                    DateTime estTime = TimeZoneInfo.ConvertTimeFromUtc(date, estZone);
                    NSDate nSDate = Extensions.ToNSDate(estTime);
                    input.Date = nSDate;

                }

            }
           
        }


        
            private void Input_ValueChanged(object sender, EventArgs e)
            {
                if (Control != null)
                {
                    var input = sender as UIDatePicker;

                    if (dtPicker != null)
                    {
                        DateTime date = input.Date.ToDateTime();
                        dtPicker.Date = date;
                        dtPicker.CDT = date;


                }

            }

            }
        
  


    }
}

But I want to use your component to have the same logic in Android and iOS. Can I develop with your component? 

Thanks 


HM Hemalatha Marikumar Syncfusion Team January 3, 2020 07:56 AM

Hi, 
  
Thanks for the update. 
  
We have analyzed your query. You can achieve this by using Picker SelectionChanged event. In this sample we have modified the Hours Collection based on your user selection date. Please find the sample from below location.  
  
  
Screenshot: 
  
 
  
Please let us know, if you have any other concern. 
 
Regards, 
Hemalatha M. 



MO movilidad@netkia.es January 7, 2020 11:30 AM

Ok
I tried the example and works. This function will be implemented in future versions of the control? Thank you very much for the help


SP Sakthivel Palaniyappan Syncfusion Team January 8, 2020 12:08 PM

Hi,

We are glad to know the sample fulfilled your requirement.

We have achieved this requirement in SfPicker control. So, there is no possibilities to implement this as a new feature in SfPicker control.

Please let us know if you have any other concern.

Regards,
Sakthivel P. 


Loader.
Live Chat Icon For mobile
Up arrow icon