[CLOSED] Set Picker Date manually

  1. #1

    [CLOSED] Set Picker Date manually

    Hi,

    i use the DateField and i want to set the date of the picker manually.

    For example the value of the datefield is 2020/01/01 an the date of the picker is 2020/01/01.

                                Dim nControl As DateField
                                nControl = New DateField
    
                                With nControl
                                    .ID = "test"
                                    .Value = New Date(2020, 1, 1)
    
                                    Dim nPicker As New DatePicker
                                    nPicker.Value = New Date(2022, 1, 1)
    
                                    .PickerOptions = nPicker
    
    
                                End With
    But the picker only shows the date of the nControl.value.

    Do you have an idea?

    Thanks
    Gidi
    Last edited by fabricio.murta; Apr 29, 2021 at 5:23 PM.
  2. #2
    Hello, Gidi!

    The quick answer for your question is that it is not supported out of the box. What's in the picker should be the value.

    The long answer is that you can customize the picker show event to switch it to a date of your choice. You can provide that data from the server (as a separate, hidden field or custom value to component), but ultimately the picker display would be set from client-side code.

    We'll come back to you soon with one or two ways to implement that.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Here is, maybe, the simplest solution I found so far. I will post the proof-of-concept in C# and will try to suggest changes to your VB.NET code snippet but won't be able to actually test it. Provide a working test case if you need help with the VB.NET syntax.

    C# PoC
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        public void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack && !X.IsAjaxRequest)
            {
                DateField1.Value = new DateTime(2020, 1, 1);
                DateField1.CustomConfig.Add(new ConfigItem("pickerDate", "2022-01-01"));
                DateField1.CustomConfig.Add(new ConfigItem("onExpand", "Ext.emptyFn", ParameterMode.Raw));
            }
        }
    
        protected void StyleCB(object sender, DirectEventArgs e)
        {
            //cb1.AddCls("styled");
        }
    </script>
    <html>
    <head runat="server">
        <title>DatePicker value different than selection</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager runat="server" />
            <ext:DateField runat="server" ID="DateField1" FieldLabel="Date">
                <Listeners>
                    <Expand Handler="item.picker.setValue(item.pickerDate)" />
                </Listeners>
            </ext:DateField>
        </form>
    </body>
    </html>
    Dim nControl As DateField
    nControl = New DateField
    
    With nControl
        .ID = "test"
        .Value = New Date(2020, 1, 1)
        .CustomConfig.Add(New ConfigItem("pickerDate", New Date(2022, 1, 1)))
        .CustomConfig.Add(New ConfigItem("onExpand", "Ext.emptyFn", ParameterMode.Raw))
        .Listeners.Expand.Handler = "item.picker.setValue(item.pickerDate)"
    End With
    You can also, instead of Ext.emptyFn + Listener, just replace the Ext.emptyFn bit with function(item) { item.picker.setValue(item.pickerDate) }. By default this onExpand handler will sync the picker value with whatever value is in the date field every time it is expanded, so you are but replacing the default behavior with your own one.

    In your original approach, if you just disabled the default onExpand like in the suggested solution, then the picker value will still figure the one you selected at first, but will be kept at whatever value it was selected last time it was interacted with. So, initially 2022; if user expanded the picker and chose a 2021 date, next time it is expanded would show 2021. If the field was programmatically changed to 2024 though, the picker would still display 2021, the last user-interacted date. A page refresh or so-called "full postback" would also reset the picker date to 2022.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hi FabrÃ*cio,

    thanks for your code. It work's perfectly :-)

    Thank you
    Gidi
  5. #5
    Thanks for the feedback, glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Date picker of Month Year Type > Set Date Value Manually
    By PriceRightHTML5team in forum 2.x Help
    Replies: 0
    Last Post: May 19, 2015, 10:39 AM
  2. [CLOSED] Date Picker show special date
    By trePjt in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 06, 2013, 12:12 AM
  3. Replies: 3
    Last Post: May 09, 2012, 4:28 PM
  4. [CLOSED] Manually adding a new row to a grid - date issue
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 26, 2011, 7:01 PM
  5. Replies: 3
    Last Post: May 06, 2010, 12:48 PM

Posting Permissions