Hi,
When I'm set ngModel directive to the component, the messages are gone when my initial model value is null, empty string or undefined. Is there a way to prevent this behavior? I want to show the messages of the dateInput if the model does not have a valid date.
Here is an example of this. https://dojo.telerik.com/UvAWurud/5. You will be able to see the messages briefly displayed, but then they go away.
Thanks!
Hello, Jose,
Thank you for mentioning the culture.
We can use the internal methods that render these messages and that way, you will not have to change anything when the culture changes:
https://dojo.telerik.com/@bubblemaster/IjAfiVEF
if(!$(elem).val()){
var dateInput = $(elem).data("kendoDatePicker")._dateInput;
var stringAndFromat = dateInput._dateTime.toPair(dateInput.options.format, dateInput.options.culture, dateInput.options.messages);
$(elem).val(stringAndFromat[0]);
}
I would not worry about performance as setting the value of an input if it meets a condition is not really a resource heavy task as far as I am aware.
I have now transferred this thread to our public feedback portal and you can see it here:
You may also follow it in GitHub if you prefer:
https://github.com/telerik/kendo-ui-core/issues/5660
Finally, as a token of appreciation for helping us improve, I have also added some Telerik points to your account.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Hi Alex
The workaround is working, but unfortunately I can't implement it in our project since our application could have several date fields and I feel this approach would impact to the performance. Also, I'd need to find out a way to set the messages based on the culture considering meridian formats (AM/PM).
Regarding publishing this thread, if that's needed to fix this bug I have no problem if you convert it to a bug report.
Thanks!
Hello, Jose,
I am very pleased to let you know that I have discussed this behaviour with the team again and we believe that the DatePicker should not behave like this when using ng-model. If you do not mind, I would like to convert this thread to a public bug report.
Meanwhile, I found that you will be able to use ng-model and have the messages if you restore the messages after a short time out in the kendoRendered event:
https://dojo.telerik.com/iyeLeQeD
$scope.$on("kendoRendered", function(){
var pickerElements = $("[data-role='datepicker']");
$timeout(function(){
$.each(pickerElements, function(i, elem){
if(!$(elem).val()){
$(elem).val("month/day/year");
}
});
});
});
For the particular example, it seems that you can use the same approach as above to restore the message programmatically even without a timeout:
https://dojo.telerik.com/@bubblemaster/iQurARIs/2
$scope.$on("kendoRendered", function(){
var pickerElements = $("[data-role='datepicker']");
$.each(pickerElements, function(i, elem){
if(!$(elem).val()){
$(elem).val("month/day/year");
}
})
});
Let me know if I can convert this thread, if not, I will log a separate one on your behalf.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Hi Alex
I'd expect the component works with ng-model as any other component since our whole app architecture is designed to work with ng-model and we have other attribute directives that require ng-model.
Also, the solution provided was not entirely applicable. But, it gave me an idea of the limitations of the component.
I've implemented something similar with k-ng-model, but, I'm still not getting the messages displayed of the dateInput.
Here is an example of my current implementation, maybe you can help me to find out what is wrong now.
https://dojo.telerik.com/eFITEMOS/4
My goal is to show the dateInput messages when the value is null or an empty string. Not always I'll have an initial value for the component.
I appreciate the attention on this. I hope you can help me.
Thanks!
Hello, Jose,
I am sorry to see that my response has failed to meet the expected quality.
Is the reason for the low rating because the solution is not applicable, perhaps we can look for other ways of accomplishing the desired result or is it because of the way the wrappers are designed?
Your opinion is important to me as I strive to be helpful and knowledgeable with all our clients and it will provide me with the full picture and help me improve.
I would appreciate if you have a moment to share your thoughts.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Hi, Jose,
Something you can do in this case is to hook a change event handler and update the desired ng-model property and call $apply():
<input kendo-date-picker="picker" k-options="datePickerOptions" k-delay="datePickerOptions" k-ng-model="kendoPickerModel"/>
change:function(e){
$scope.datePickerModel = $scope.kendoPickerModel;
$scope.$apply();
}
https://dojo.telerik.com/eFITEMOS/2
The reason we cannot really use ng-model here is that it binds to the input value which is the format in our case and so the model wipes it out. Let me know if the suggestion above works for you or if we should log an issue and investigate it further..
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Hello, Jose,
Would you be able to use the "k-ng-model" instead? It represent a genuine date object instead of the text value of the input and it does not interfere with the messages:
Updated Dojo - https://dojo.telerik.com/@bubblemaster/iGOMOwep
Let me know what you think or in case you need further information.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik