1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to get date to label from SfDatePicker

How to get date to label from SfDatePicker

HI all,

I have two labels in my form, one for start date, other for end date, ana I want do use a sfDatepicker.

Do I need to have two sfdatepickers, one for each label, or can use the same sfdatepicker.

How to I get the date when I prese the sfdatpikcer OK button?

Thank you,

Regards,
Helder Correia

17 Replies
RS Ruba Shanmugam Syncfusion Team April 10, 2020 01:31 PM UTC

Hi Helder, 
Greetins from Syncfusion. 
We have validated your query and prepared a sample based on the your requirement. In this sample, we have used two SfDatePickers for StartDate and EndDate. 
Code Snippet for OkCommand: 
  public ICommand OkCommand => new Command(OkButton); 
  private void OkButton(object obj) 
        { 
         // you can get the selected date  
            var datePicker = obj as Syncfusion.SfPicker.XForms.SelectionChangedEventArgs; 
            var date = GetSelectedItems(datePicker.NewValue as ICollection); 
        } 
 
 
Get the sample from below link. 
Please let us know, if you have any other queries. 
Regards, 
Ruba Shanmugam 



SS Shankar Sharma July 26, 2021 01:02 PM UTC

Hi All,

I have sfdatepickers with default day, month, year style  is there any way to customized the month/year/day data with my own data source( like to change the date selection into 00-99(year), A - L(month), 00 - 31(day) ) instead the default values.


Thank you,

Regards,
Shankar

JK Jeya Kasipandi Syncfusion Team July 27, 2021 03:29 PM UTC

Hi Shankar,

Currently, we don't have support to customize the DataSource based on your requirement in SfDatePicker. We suggest you use SfPicker to customize the DataSource based on your requirement. We have created sample based on your requirement by using SfPicker and please find the sample from below link

Sample Link:

Please refer the below UG link for Picker

Please check with the above and let us know if you have any concern.

Regards,
Jeya K


SS Shankar Sharma July 28, 2021 01:08 PM UTC

Hello @Jeya Kasipandi,

Thanks for the demo, further on this can you help me on how to get the selected value of Month,Year,Day on click of footer OK button I'm following the MVVM pattern?

Thanks

Shankar


JK Jeya Kasipandi Syncfusion Team July 29, 2021 12:45 PM UTC

Hi Shankar,

We have modified the sample based on your requirement and Please find the sample from below link


In this sample , we have added OkCommand to get the selected item in view model by using EventCommandBehaviour as like below code snippet

 void OnOkClicked(Object obj)
        {

            var selectedItemValue = (obj as Syncfusion.SfPicker.XForms.SelectionChangedEventArgs).NewValue;
        }
        public ViewModel()
        {
            OkCommand = new Command<Object>(OnOkClicked);

  }

 <local:CustomDatePicker.Behaviors>
                <local:EventToCommandBehavior EventName="OkButtonClicked"   Command="{Binding OkCommand}" />
              </local:CustomDatePicker.Behaviors>
        </local:CustomDatePicker>

Please check with the above and let us know if you have any concern.

Regards,
Jeya K

SS Shankar Sharma replied to Jeya Kasipandi July 30, 2021 08:09 AM UTC

Hi  Jeya K,


Thanks for the help and updated demo based on my requirement it works now, moreover I could not find any property to set the font size of footer buttons (OK/Cancel), can you help me on that?


Thanks

Shankar


JK Jeya Kasipandi Syncfusion Team August 2, 2021 12:50 PM UTC

Hi Shankar,

Currently we don't have support to customize the font size of default footer buttons (OK/Cancel) in Picker. If you want to customize the footer view , you can add custom footer view as like below code snippet and we would like to inform you that you can get the selected value in custom footer ok button click by using selected item property only.

Code snippet
<local:CustomDatePicker.FooterView>
                <StackLayout Orientation="Horizontal" >
                    <Button Text="OK" WidthRequest="70" Command="{Binding OkCommand}" HorizontalOptions="EndAndExpand"></Button>
                    <Button Text="Cancel" WidthRequest="80"  Clicked="Button_Clicked_2" HorizontalOptions="EndAndExpand"></Button>
                </StackLayout>
            </local:CustomDatePicker.FooterView>

We have modified the sample based on this and please find the sample from below link


Please refer the below UG link for this
https://help.syncfusion.com/xamarin/picker/dealingwithheaderandfooter#set-custom-footer

Please check with the above and let us know if you have any concern.

Regards,
Jeya K


SS Shankar Sharma replied to Jeya Kasipandi August 3, 2021 10:14 AM UTC

Thanks for the update Jeya K, really appreciate for the effort given.

Moreover In this demo month picker is configured as A-L values means (Jan to Dec), so how can I achieve below points.


1- Days are not related to the month (can select 1-31 days in all moth). Leap years must be taken into account (e.g. if we could select February 29, 2020),

2- on opening of the picker it should display defaulted to today's date.

looking forward to hearing from you at earliest.


Thanks

Shankar


SS Shankar Sharma replied to Shankar Sharma August 3, 2021 01:22 PM UTC

@ Jeya Kasipandi @ Syncfusion Team


kindly revert the solution as i'm in the middle of it, waiting for your response.


Thanks

Shankar


JK Jeya Kasipandi Syncfusion Team August 3, 2021 03:28 PM UTC

Hi Shankar,

Currently, we are validating on this and will update the details on August 4, 2021. We appreciate your patience until then.

Regards,
Jeya K

JK Jeya Kasipandi Syncfusion Team August 4, 2021 08:01 AM UTC

Hi Shankar,

Query 1 : Days are not related to the month  (can select 1-31 days in all month). Leap years must be taken into account (e.g. if we could select February 29, 2020),

We have modified the sample based on your requirement and please find the sample from below link


Query 2: On opening of the picker, it should display defaulted to today's date.

In sample, year has been added from 0 to 99 . So, the current date is not displayed in picker. You can set the current date as like below code snippet in view model and if the current year populated in the data source means it will display the current date.

Please find the code snippet for this

  Months = new Dictionary<string, string>();

            ObservableCollection<object> todaycollection = new ObservableCollection<object>();
            int j= 65;
            for (int i = 1; i < 13; i++)
            {
                if(!Months.ContainsKey(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i).Substring(0, 3)))
                    Months.Add(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i).Substring(0, 3), ((char)j).ToString());

                j++;
            }
            //Select today dates
            var mon=CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(DateTime.Now.Date.Month).Substring(0, 3);
            todaycollection.Add(Months[mon]);
            todaycollection.Add(DateTime.Now.Date.Year.ToString());
            if (DateTime.Now.Date.Day < 10)
                todaycollection.Add("0" + DateTime.Now.Date.Day);
            else
                todaycollection.Add(DateTime.Now.Date.Day.ToString());
            this.StartDate = todaycollection;

Please check with the above and let us know if you have any concern.

Regards,
Jeya K


  


SS Shankar Sharma August 4, 2021 12:08 PM UTC

Hi @ Jeya Kasipandi,


I would like to really appreciate for the effort given for such customization, everything is ok now except one small concern.


Query 1 :  Its perfectly working as expected.


Query 2: On opening of the picker, it should display defaulted to today's date.


date picker default date value is working fine for Months & Day picker but not for the Year picker(see the attached screenshot.

As you quoted above year has been added from 0 to 99 . So, the current date is not displayed in picker, 

moreover month picker value is also customized as (A-L) and working with defaulted value, likewise is there any way to customize the year picker to with customized data source(like months dictionary) so that it can show the current year selected too?


Attachment: yearerror_cc0e6c2.zip

JK Jeya Kasipandi Syncfusion Team August 5, 2021 09:01 AM UTC

Hi Shakar,

We have modified the sample to display the current year as 21( default selected year) in picker based on your requirement. Please find the below code snippet for this

         var year = DateTime.Now.Date.Year.ToString();
           todaycollection.Add(year.Substring(2,2));

Please find the modified sample from below link


Please let us know if you any concern.

Regards,
Jeya K


SS Shankar Sharma replied to Jeya Kasipandi August 6, 2021 05:18 AM UTC

Hello @Jeya Kasipandi,

Appreciate it, it's working now. 

one thing year taking from 0-99 it is throwing an exception "Date can't be zero it must be between 1-9999" although no issue between 1-99. is there anything need to change for 0-99?


Regards,

Shankar


JK Jeya Kasipandi Syncfusion Team August 6, 2021 10:48 AM UTC

Hi Shankar,

Thanks for the update.

We can't set the year from 0 to 99.  If we change the value from 0 to 99, an exception will be thrown.

Please refer the below link for this

Please let us know , if you have any other queries.

Regards,
Jeya K


SS Shankar Sharma replied to Jeya Kasipandi August 6, 2021 05:56 PM UTC

Thank you, got it.


Regards,

Shankar


RS Ruba Shanmugam Syncfusion Team August 9, 2021 04:57 AM UTC

Hi Shankar,


Thanks for the update. Let me know if you have any other concerns.


Regards,

Ruba Shanmugam


Loader.
Up arrow icon