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
close icon

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 02:59 PM UTC

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. 



PG Pablo Gutiérrez December 26, 2019 07:18 AM UTC

Thanks a lot. This is the solution :)


PG Pablo Gutiérrez December 27, 2019 07:53 AM UTC

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 


PG Pablo Gutiérrez December 30, 2019 02:42 PM UTC

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 12:40 PM UTC

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. 
 
 



PG Pablo Gutiérrez January 2, 2020 10:07 AM UTC

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 12:56 PM UTC

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. 



PG Pablo Gutiérrez January 7, 2020 04:30 PM UTC

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 05:08 PM UTC

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