Question 11125 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Hide Kendo date picker based on drop down list selection – Jquery

I have a Kendo drop down list and a date picker and I’d the datepicker element to be invisible when the drop down selection is ‘Not Started’

<div id="view">
  <label for="dateinput">Completed Date</label>
  <input id="completedatepicker" value="" title="monthpicker" />
</div>


<div>
  <label for="dropdown">Status</label>
  <input id="dropdown" />
</div>

<script>
  $(document).ready(function() {
    // create DatePicker from input HTML element
    $("#duedatepicker").kendoDatePicker();

    $("#completedatepicker").kendoDatePicker();

    $('#dropdown').kendoDropDownList({
      dataSource: ['Not Started', 'Completed', 'In Progress']
    });

  });
</script>
Tags:

2

Answers


  1. 0

    You can initially hide the DatePicker container, add a change event handler and toggle the visibility of the container – example

    Login or Signup to reply.
  2. 0 
    $(document).ready(function() {
    // create DatePicker from input HTML element
    $("#duedatepicker").kendoDatePicker();
    $("#completedatepicker").kendoDatePicker();
    $('#dropdown').kendoDropDownList({
      dataSource: ['Not Started', 'Completed', 'In Progress'],
      change:function(e){
        if(e.sender.value() != "Not Started"){
          $("#view").show();
        } else {
          $("#view").hide();
        }
      }
    });

  });
     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
<div id="view" style="display:none;">
  <label for="dateinput">Completed Date</label>
  <input id="completedatepicker" value="" title="monthpicker" />
</div>
<div>
  <label for="dropdown">Status</label>
  <input id="dropdown" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search