Can't set background color for inputDate control

Can't set background color for inputDate control

Posted by: thanhthuyeths on 6 January 2023, 1:57 am EST

• 

  thanhthuyeths

  • Post Options:
  • Link
    Copy

  Posted 6 January 2023, 1:57 am EST - Updated 6 January 2023, 2:07 am EST

  I am using inputDate control but can’t set background color for inputDate control when there is an error. Normal control when there is an error, there is a class [input-validation-error]. Is there a way to assign background color for inputDate control when there is an error?

  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 6 January 2023, 10:45 am EST

  Hi,
  
  You may make InputDate control same as normal Input by adding the class using cssClass property for the control.
  
  Please refer to the following code snippet for reference:

  <style>
      .wj-error{
          border:1px solid red;
          background-color:rgb(252, 181, 181);
      }
      .wj-inputdate-dropdown{
          background-color:white !important;
      }
  </style>
  
  @Html.C1().InputDate().Format("yyyyMMdd").CssClass("wj-error")

  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  thanhthuyeths

  • Post Options:
  • Link
    Copy

  Posted 8 January 2023, 11:13 pm EST

  Thank for your reply.
  
  Normal control when there is an error it automatically add the class input-validation-error
  
  I just want to add the class wj-error when there is an error, how can I do that?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2023, 1:03 pm EST

  Hi,
  
  For this, we may handle the valueChanged event and add the error class based on required condition.
  
  Please refer to the following code snippet for reference:

  <style>
      .wj-error{
          border:1px solid red;
          background-color:rgb(252, 181, 181);
      }
      .wj-inputdate-dropdown{
          background-color:white !important;
      }
  </style>
  <script>
      function valueChanged(s,e) {
          var hostElement = s.hostElement;
          wijmo.toggleClass(hostElement, "wj-error", !s.value);
      }
  </script>
  @Html.C1().InputDate().Format("yyyyMMdd").IsRequired(false).OnClientValueChanged("valueChanged")

  Hope it helps!

  Regards,
  
  Manish Gupta