Unplanned
Last Updated: 10 Mar 2020 12:51 by ADMIN
Jose
Created on: 30 Sep 2019 20:23
Category: Date/Time Pickers
Type: Bug Report
0
DatePicker messages disapper when the ng-model is null initially

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!

8 comments
ADMIN
Alex Hajigeorgieva
Posted on: 10 Mar 2020 12:51

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:

https://feedback.telerik.com/kendo-jquery-ui/1432094-datepicker-messages-disapper-when-the-ng-model-is-null-initially

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Jose
Posted on: 09 Mar 2020 15:46

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!

ADMIN
Alex Hajigeorgieva
Posted on: 02 Mar 2020 16:25

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Jose
Posted on: 01 Mar 2020 20:48

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!

ADMIN
Alex Hajigeorgieva
Posted on: 27 Feb 2020 10:26

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Alex Hajigeorgieva
Posted on: 02 Oct 2019 12:15

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Jose
Posted on: 01 Oct 2019 15:19
Not really. I'm using this component inside another custom one which uses the ngModel to do some general process we cant change. And, as far as I know, k-ng-model can't be used along with ngModel, isn't?
ADMIN
Alex Hajigeorgieva
Posted on: 01 Oct 2019 15:04

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:

https://docs.telerik.com/kendo-ui/framework/AngularJS/widget-basics/binding#using-the-k-ng-model-value

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.