[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.

Code:

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

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.

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

Code:

<%@ 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>

Code:

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!

Hi FabrÃ*cio,

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

Thank you
Gidi

Thanks for the feedback, glad it helped!