Click here to Skip to main content
15,905,028 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi Team

I am struggling to check and uncheck-box so it can populate datepicker. Does anyone know how to do this in jquery? Below this what i tried on the razor side

What I have tried:

<div class="form-check">
                                                <div class="col-xl-2">
                                                    @Html.CheckBoxFor(model => model.Lockuntil, new { @checked = "unchecked", @class = "rb" })
                                                    <label class="form-check-label" for="@Html.IdFor(model => model.Lockuntil)">Lockuntil</label>
                                                    @Html.TextBoxFor(model => model.DateColumn, new { @class = "datepicker17", id = "datepicker17" })


                                                </div>

                                            </div>
Posted
Updated 15-Sep-20 4:45am
Comments
Sandeep Mewara 15-Sep-20 5:04am    
Not clear on what role checkbox has with datepicker. Can you please elaborate?
gcogco10 15-Sep-20 5:07am    
What i want, when a user click the checkbox-must bring datepicker in order to select date and time. when its unchecked it must dissapear not seeing.

Wrong control. A datepicker is not "on or off"; it's "popped", either using "on focus" or in response to a "button"; it's dismissed as soon as a user picks a date or "cancels" it.

Anything else is a "calendar" (control), which is used in a different context.
 
Share this answer
 
v2
Comments
gcogco10 15-Sep-20 9:55am    
Gerry can you give me an example of this as to how to use it in jquery and bootstrap?
[no name] 15-Sep-20 11:17am    
https://jqueryui.com/datepicker/

(click the textbox)
You'll need to use some simple Javascript:
HTML
@Html.CheckBoxFor(model => model.Lockuntil, new { @class = "rb", data_toggle = "hide-element", data_target = "#datepicker17" })
@Html.LabelFor(model => model.Lockuntil, new { @class = "form-check-label" })
@Html.TextBoxFor(model => model.DateColumn, new { id = "datepicker17" })
JavaScript
$(function(){
    var toggleHideElement = function(chk){
        var target = $(chk.getAttribute("data-target"));
        if (chk.checked) {
            target.removeClass("d-none").attr("aria-hidden", "false");
        }
        else {
            target.addClass("d-none").attr("aria-hidden", "true");
        }
    };
    
    // Change the state of the target element when the box is checked / unchecked:
    $(document).on("change", "input:checkbox[data-toggle='hide-element']", function(){ toggleHideElement(this); });
    
    // Set the initial state of the target element:
    $("input:checkbox[data-toggle='hide-element']").each(function(){ toggleHideElement(this); });
});
 
Share this answer
 
Comments
gcogco10 16-Sep-20 5:06am    
@Richard thanks mate

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900