hide/show datepicker with checkbox

Question

I have a checkbox , like this:

<div>
     <input class="k-checkbox" id="showEindDatum" type="checkbox">
     <label class="k-checkbox-label" for="showEindDatum">Deze wijziging is van tijdelijke aard</label>
</div>

and a datepicker,like this:

 <span class="k-picker-wrap k-state-default">
    <input id="EindDatum" name="EindDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="EindDatum_dateview" aria-disabled="false" style="width: 90%;">
    <span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview">
        <span class="k-icon k-i-calendar">
        </span>
    </span>
</span>

and a other one,like this:

 <span class="k-picker-wrap k-state-default">
    <input id="IngangsDatum" name="IngangsDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="IngangsDatum_dateview" aria-disabled="false" style="width: 90%;">
    <span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview">
        <span class="k-icon k-i-calendar">
        </span>
    </span>
</span>

So now I want to hide one of the datepickers when the checkbox is checked. I try it with Jquery like this:

$("#showEindDatum").click(function () {
        if ($(this).prop('checked') == true) {
             $("#EindDatum").show();
        } else {
             $("#EindDatum").hide();
        }
    });

But the datepicker will not be hidden.

So what I have to change that the datepicker will be hidden?

Thank you.

and this are the models of the datepicker:

<div class="col-md-6">
                                    <div class="form-horizontal">
                                        @FormGroupHelper.CreateFormGroup(Html, m => m.IngangsDatum, Html.Kendo().DatePickerFor(m => m.IngangsDatum).Min("01-01-2009").Max(new DateTime(DateTime.Today.Year + 1, 12, 31)).Format("dd-MM-yyyy").ParseFormats(new string[] { "ddMMyyyy" }).Events(e => e.Change("OnIngangsDatumChanged")))
                                        @FormGroupHelper.CreateFormGroup(Html, m => m.EindDatum, Html.Kendo().DatePickerFor(m => m.EindDatum).Min(Model.EindDatum.HasValue ? Model.EindDatum.Value : DateTime.Today).Format("dd-MM-yyyy").ParseFormats(new string[] { "ddMMyyyy" }).Events(e => e.Change("OnIngangsDatumChanged")))
                                    </div>
                                </div>

Answer 1

Using jquerys toggle is one way to do it. Not sure which element you wanted to be hidden but here's general idea.

 $("#showEindDatum").click(function () { $(".k-picker-wrap").toggle(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input class="k-checkbox" id="showEindDatum" type="checkbox"> <label class="k-checkbox-label" for="showEindDatum">Deze wijziging is van tijdelijke aard</label> </div> <span class="k-picker-wrap k-state-default"><input id="EindDatum" name="EindDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="EindDatum_dateview" aria-disabled="false" style="width: 90%;"><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview"><span class="k-icon ki-calendar"></span></span></span>

Answer 2

Works perfectly

 document.getElementById("box").style.display="none"; function myFunction() { var checkBox = document.getElementById("myCheck"); var text = document.getElementById("box"); if (checkBox.checked == true){ text.style.display = "block"; } else { text.style.display = "none"; } }

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#datepicker" ).datepicker(); } ); </script> </head> <body> <p>click:<input type="checkbox" id="myCheck" onclick="myFunction()"> <span id='box'>Date: <input type="text" id="datepicker"></span></p> </body> </html>

hide/show datepicker with checkbox

Question

2 answers

solution1
1 ACCPTED 2018-02-20 07:40:19

solution2
0 2018-02-20 08:27:53

hide/show datepicker with checkbox

Question

2 answers

solution1 1 ACCPTED 2018-02-20 07:40:19

solution2 0 2018-02-20 08:27:53

solution1
1 ACCPTED 2018-02-20 07:40:19

solution2
0 2018-02-20 08:27:53