Set DatePicker Value to Text Field

calebahcalebah ✭✭USMember ✭✭

Any one have any knowledge or an example on how to do this in Xamarin. I can't figure it out or seem to find it anywhere, but seems like it would be a straightforward thing.

What built in function can I use in order to achieve this? Thanks.

Posts

  • Bob_ReckBob_Reck ✭✭✭ USMember ✭✭✭

    Here's an example straight out of one of my projects:

    UIActionSheet rangeDateActSheet = new UIActionSheet();
    rangeDateActSheet.Style = UIActionSheetStyle.BlackTranslucent;
    UIToolbar toolbarActionSheet = new UIToolbar(RectangleF.Empty);
    toolbarActionSheet.BarStyle = UIBarStyle.Black;
    toolbarActionSheet.Translucent = true;
    toolbarActionSheet.UserInteractionEnabled = true;
    toolbarActionSheet.SizeToFit();
    UIBarButtonItem btnCancel = new UIBarButtonItem(UIBarButtonSystemItem.Cancel, RangeDatePickerButtonCancelHandler);
    UIBarButtonItem btnFlexibleSpace = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace, null);
    UIBarButtonItem btnDone = new UIBarButtonItem(UIBarButtonSystemItem.Done, RangeDatePickerButtonDoneHandler);
    UIBarButtonItem[] btnItems = new UIBarButtonItem[] { btnCancel, btnFlexibleSpace, btnDone }; 
    toolbarActionSheet.SetItems(btnItems, true);
    rangeDateActSheet.AddSubview(toolbarActionSheet);
    
    UIDatePicker dpRangeDate = new UIDatePicker(RectangleF.Empty);
    dpRangeDate.Mode = UIDatePickerMode.Date;
    dpRangeDate.MaximumDate = NSDate.Now;
    dpRangeDate.TimeZone = NSTimeZone.LocalTimeZone;
    dpRangeDate.UserInteractionEnabled = true;
    rangeDateActSheet.AddSubview(dpRangeDate);
    
    UITextField txtRangeDate = new UITextField(new RectangleF(0,0,150,31));
    txtRangeDate.Font = UIFont.SystemFontOfSize(14);
    txtRangeDate.BackgroundColor = UIColor.White;
    txtRangeDate.BorderStyle = UITextBorderStyle.RoundedRect;
    txtRangeDate.VerticalAlignment = UIControlContentVerticalAlignment.Center;
    txtRangeDate.ClearButtonMode = UITextFieldViewMode.WhileEditing;
    txtRangeDate.EditingDidBegin += delegate {
        //prevent keyboard from popping up
        txtRangeDate.ResignFirstResponder();
        txtRangeDate.InputView = dpRangeDate;
        actionSheetSize = new SizeF (this.View.Frame.Width,364);
        rangeDateActSheet.ShowFromTabBar(tbc.TabBar); 
        rangeDateActSheet.Frame = new RectangleF (0, this.View.Bounds.Height - 150,actionSheetSize.Width, 320);
        dpRangeDate.Frame = new RectangleF(0, 44, rangeDateActSheet.Frame.Width, 216);
    };
    this.View.AddSubview(txtRangeDate);
    

    Bob

  • calebahcalebah ✭✭ USMember ✭✭

    @Bob

    Thanks that is a helpful start. There is an undefined Event Handler on the done button and that is really the main part of the code that I am looking for. What do you put in the event to select the current highlighted field?

  • Bob_ReckBob_Reck ✭✭✭ USMember ✭✭✭
    edited June 2013

    Doh! Sorry about that, Caleb. Here are the two handlers...

    public void RangeDatePickerButtonCancelHandler(object sender, EventArgs e)
    {
        rangeDateActSheet.DismissWithClickedButtonIndex(0,true);
    }
    
    public void RangeDatePickerButtonDoneHandler(object sender, EventArgs e)
    {
        NSDate sourceDate = dpRangeDate.Date;
    
        NSTimeZone sourceTimeZone = new NSTimeZone ("UTC");
        NSTimeZone destinationTimeZone = NSTimeZone.LocalTimeZone;
    
        int sourceGMTOffset = sourceTimeZone.SecondsFromGMT (sourceDate);
        int destinationGMTOffset = destinationTimeZone.SecondsFromGMT (sourceDate);
        int interval = destinationGMTOffset - sourceGMTOffset;
    
        var destinationDate = sourceDate.AddSeconds (interval);
        var dateTime = new DateTime(2001, 1, 1, 0, 0, 0).AddSeconds(destinationDate.SecondsSinceReferenceDate);
    
        txtRangeDate.Text = dateTime.Date.ToShortDateString();
        rangeDateActSheet.DismissWithClickedButtonIndex(0,true);
    }
    

    The point of all the date transformation code in the done button handler is to make sure the correct date is shown. I had an issue were the date was being incremented by one day depending on what time of day it was. This fixed it.

    Anyway, Sorry about forgetting these.
    Bob

  • calebahcalebah ✭✭ USMember ✭✭

    @Bob

    Thanks for that. I still haven't quite figured it out and I think the part where I am most confused is the actionSheet and setting that up, involving when to call the actionSheet and into what view. Let alone setting up the other UI parts of the sheet.

    Is there anyway to do this not in an UIActionSheet?

  • Bob_ReckBob_Reck ✭✭✭ USMember ✭✭✭
    edited June 2013

    @calebah,

    I use the action sheet, with the toolbar, so I have buttons for cancel and done. This is the way I dismiss the date picker. You can do it without the action sheet, but you'll have to somehow dismiss the date picker when they pick the date. This can get annoying because if you key on changing one of the values, the picker closes right away and I've found that my users get annoyed having to tap into the field again and again.

    In my example, the ActionSheet is not added to the view. It's shown from the tab bar when you tap into the field (txtRangeDate.EditingDidBegin) using the code:

    rangeDateActSheet.ShowFromTabBar(tbc.TabBar);

    If you don't have a TabBarController (tbc in my code) you will have to use something like rangeDateActSheet.ShowFromView(yourViewHere). So, the action sheet is not a sub view of your main view, it's just shown from the view.

    One thing that may be confusing you is the fact that I have all this UI components being built via code. I'm sorry, I don't typically use the storyboards or interface builder to build my views. I do it all in code.

    Let me know if this did not clarify it.
    Bob

  • calebahcalebah ✭✭ USMember ✭✭
    edited June 2013

    That helped a lot. It actually answered a question I had without me asking it.

    I had been using the interface builder some as I am getting use to Xamarin, so my hopefully last question lies within that. Currently my picker is getting cut off as shown in the attached picture. Which value needs to be changed in order to fix that. Sorry for my lack of knowledge on all this frame stuff.

    EDIT: Nevermind. I found it.

    However now this view is taking over another one of my pickers that shows up with another list of options...

  • calebahcalebah ✭✭ USMember ✭✭

    @Bob

    I do now have one last question about your code. When I run the action sheet compared to the other pickers I have the screen is overall darker, as shown in the attached screen shots. What in the code makes it do this. It isn't a big deal, but I would rather it didn't get darker. I tried playing with the other available styles for the action sheet, but none of them seem to make a difference. Thanks for the help.

  • Bob_ReckBob_Reck ✭✭✭ USMember ✭✭✭

    @calebah,

    That would be the action sheet making the screen darker. The action sheet is modal so the background does not allow user interaction until the action sheet is closed. Without the action sheet, your users will be able to click directly into the project field (for example) on your view. This may be just fine for your app, but you should handle resigning the first responders for every other possible field. If you don't, your date picker will remain in the background when they click into the other field. It will be behind your keyboard until the keyboard is closed. Perhaps you're already handling that, in which case, you're good to go. :)

    Bob

  • calebahcalebah ✭✭ USMember ✭✭

    Yeah, I am handling that. It is closing out properly and the screen isn't dark once the date is selected. I was just curious if it was able for it not to make it darker or if I should just make the screen darker somehow when my other picker is active.

  • jarrodglasgowjarrodglasgow USMember

    I have a UITabController that is disabling my bottom button on the action sheet. I don't have the UITabBarController local so I can't use ShowFromTabBar. Or at least I can't get it to work for me. Any ideas?

Sign In or Register to comment.