How to set minDate n maxDate for the datePicker editor in RadDataForm


#1

How to set minDate n maxDate for the datePicker editor in RadDataForm, also i have been struggling to initialize the datepicker with an initial value, i literally tried every single date format, i’m running angular5 and the latest tns modules


#2

If you are looking to setup an initial value, you may try Year-Month-Date format. For instance 2017-08-24 for 24th Aug, 2017.


#3

Also for min and max dates you might use the range validator.


#4

1- for min, max: there’s a difference between date validation and setting minDate/maxDate on date picker, the later is in the UX favor, and i think it’s a feature that is a must to have.
2- for initializing the date value, your example works, sadly i use JSON style, which through this error when i try to initialize it with the same way u provided
ERROR Error: java.lang.Error: DataFormDateEditor does not support properties of type String. Please specify a value converter for your property.
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.loadPropertyValue(EntityPropertyViewer.java:430)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.loadPropertyValue(EntityPropertyEditor.java:201)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.load(EntityPropertyViewer.java:409)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.load(EntityPropertyEditor.java:189)
JS: com.telerik.widget.dataform.visualization.RadDataForm.load(RadDataForm.java:814)
JS: com.telerik.widget.dataform.visualization.RadDataForm.reload(RadDataForm.java:493)
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
JS: com.tns.Runtime.callJSMethod(Runtime.java:957)
JS: com.tns.Runtime.callJSMethod(Runtime.java:941)
JS: com.tns.Runtime.callJSMethod(Runtime.java:933)
JS: com.tns.gen.org.nativescript.widgets.Async_CompleteCallback.onComplete(Async_CompleteCallback.java:12)
JS: org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:585)
JS: org.nativescript.widgets.Async$Http$1$1.run(Async.java:486)
JS: android.os.Handler.handleCallback(Handler.java:751)
JS: android.os.Handler.dispatchMessage(Handler.java:95)
JS: android.os.Looper.loop(Looper.java:154)
JS: android.app.ActivityThread.main(ActivityThread.java:6119)
JS: java.lang.reflect.Method.invoke(Native Method)
JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
JS: Caused by: java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Number
JS: com.telerik.widget.dataform.visualization.editors.DataFormDateTimeEditor.applyEntityValueToEditor(DataFormDateTimeEditor.java:108)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.loadPropertyValue(EntityPropertyViewer.java:428)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.loadPropertyValue(EntityPropertyEditor.java:201)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyViewer.load(EntityPropertyViewer.java:409)
JS: com.telerik.widget.dataform.visualization.core.EntityPropertyEditor.load(EntityPropertyEditor.java:189)
JS: com.telerik.widget.dataform.visualization.RadDataForm.load(RadDataForm.java:814)
JS: com.telerik.widget.dataform.visualization.RadDataForm.reload(RadDataForm.java:493)
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
JS: com.tns.Runtime.callJSMethod(Runtime.java:957)
JS: com.tns.Runtime.callJSMethod(Runtime.java:941)
JS: com.tns.Runtime.callJSMethod(Runtime.java:933)
JS: com.tns.gen.org.nativescript.widgets.Async_CompleteCallback.onComplete(Async_CompleteCallback.java:12)
JS: org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:585)
JS: org.nativescript.widgets.Async$Http$1$1.run(Async.java:486)
JS: android.os.Handler.handleCallback(Handler.java:751)
JS: android.os.Handler.dispatchMessage(Handler.java:95)
JS: android.os.Looper.loop(Looper.java:154)
JS: android.app.ActivityThread.main(ActivityThread.java:6119)
JS: java.lang.reflect.Method.invoke(Native Method)
JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
JS: ERROR CONTEXT [object Object]


#5

Did you try the live playground example on your device? It worked for me at least in Android. iOS seems not, may be I will check it again when I find few mins.


#6

Ur example worked, but i’m using Json style dataform, after hours of trials, what worked for me -on android- was to initialize the date as number of milliseconds, so i had to use this (new Date()).getTime() which returns number of milliseconds, didn’t test IOS yet, that is very inconvenient tbh, i wasted over 20 hours trying to initialize a date component :S, the behavior of the Pro UI components are not consistent nor the documentation!


#7

it’s also worth noticing again, that minDate and maxDate for date pickers are crucial feature for UX. i should not need validation as the user should only be restricted on the dates can choose!


#8

May be why don’t you try using a custom validation?


#9

Also there’s obviously a bug with the date element, even with your example, the year value is not correct, however when i open the date picker, the value is correct.


#10

After some discussions, the value reflected on the form of the datepicker don’t include the year value, rather the last value represents the day number, for UX, we need the year value also displayed instead of the day number.
thanks