CODEWITHSUNDEEP
javascriptjqueryasp.netjquery-uijquery-ui-datepicker
John Adams
John Adams

Reputation: 4823

need jquery datepicker to fire again for changing a date

When i click in an empty textbox, the datepicker fires and the calendar dialog shows nicely. But if click again on a date in the textbox in order to change to a new date, I cannot cause the same datepicker dialog to pop up.

Markup after page is loaded follows:

<div id="panelVacationMode" class="row">
    <span class="labelCell" title="Skip reminder emails until I return"> 
    <input id="CheckBox1" type="checkbox" name="ctl00$MainContentPlaceHolder$CheckBox1" 
     checked="checked"><label for="CheckBox1">Vacation Mode</label></span>
    <div id="vacationModeBox" class="vacationRangeCell">
        <label for="txtFromDate" id="lblStart">Start:</label> 
            <input name="ctl00$MainContentPlaceHolder$txtFromDate" type="text" 
               value="11/1/2016" maxlength="10" 
               id="txtFromDate" class="dateTextBox" size="8">
        <label for="txtToDate" id="lblReturn">Return:</label> 
            <input name="ctl00$MainContentPlaceHolder$txtToDate" type="text" 
               value="12/31/2016" maxlength="10" 
               id="txtToDate" class="dateTextBox" size="8">
        <br>
    </div>
    <br>
    <br>    
</div>

Here is the code at the bottom of the .aspx page:

   <script>
    $(function () {
        // check if checkbox is unchecked 
        if ($("#CheckBox1").is(':checked'))
            $('#vacationModeBox').show();
        else
            $('#vacationModeBox').hide();
        // check if any checkbox has changed state
        $("input[type='checkbox']").click(function () {
            $('#txtFromDate').focus();
            $("input[type='checkbox']").on('change', function () {
                if ($(this).not(":checked")) {
                    $('.dateTextBox').val("");
                    $('#vacationModeBox').toggle(this.checked);
                }
                else
                    $('#txtFromDate').focus();
        });
        $(function () {
            var date = new Date();
            var currentMonth = date.getMonth();
            var currentDate = date.getDate();
            var currentYear = date.getFullYear();
            $("#txtFromDate").datepicker({
                numberOfMonths: 2,
                minDate: new Date(currentYear, currentMonth, currentDate),
                onSelect: function (selected) {
                    $("#txtToDate").datepicker("option", "minDate", selected)
                }

            });
            $('#txtToDate').focus();
            $("#txtToDate").datepicker({
                numberOfMonths: 2,
                onSelect: function (selected) {
                    $("#txtFromDate").datepicker("option", "maxDate", selected)
                }
            });
        });
    });
});
</script>

Update added 14-Oct-2016:

Perhaps I need some changes to these references below to make datepicker work for me as described in the original post? :

<html>
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" /> 
<link type="text/css" rel="stylesheet" href="~/IEStyles.css" />
<link type="text/css" rel="stylesheet" href="~/StyleSheet1.css" />
<link type="text/css" rel="stylesheet" href="~/css/app.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<script type="text/javascript" src="<%= ResolveClientUrl("~/js/sitewide.js") %>"></script>
<asp:ContentPlaceHolder ID="ExtraStyles" runat="server" />
</head>

Striving to be clear: when I click on a textbox without a date already stored, the datepicker UI "pops up" nicely with the calendar exposed for choosing; yet when I click in a textbox already with a date with the intention of picking a new date, nothing happens. Even if I clear the mm/dd/yyyy value out and then try to click for datepicker, nothing happens. Here is a sample of where I cannot interact with datepicker: once set to a date, I cannot change

Update 15 Oct: (no change after use of newest frameworks) The following screen snippet shows use of the newer resources yet datepicker behaves the same for me as in the OP: no response from datepicker if date already present

Upvotes: 0

Views: 346

Answers (1)

sanjeevprasad
sanjeevprasad

Reputation: 854

i updated your whole source code... now it seems that it will work...

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="panelVacationMode" class="row">
    <span class="labelCell" title="Skip reminder emails until I return"> 
    <input id="CheckBox1" type="checkbox" name="ctl00$MainContentPlaceHolder$CheckBox1" 
     checked='checked'><label for="CheckBox1">Vacation Mode</label></span>
    <div id="vacationModeBox" class="vacationRangeCell">
        <label for="txtFromDate" id="lblStart">Start:</label> 
            <input name="ctl00$MainContentPlaceHolder$txtFromDate" type="text" 
               value="11/1/2016" maxlength="10" 
               id="txtFromDate" class="dateTextBox" size="8">
        <label for="txtToDate" id="lblReturn">Return:</label> 
            <input name="ctl00$MainContentPlaceHolder$txtToDate" type="text" 
               value="12/31/2016" maxlength="10" 
               id="txtToDate" class="dateTextBox" size="8">
        <br>
    </div>
    <br>
    <br>    
</div>

<script>
$(function () {
            var date = new Date();
            var currentMonth = date.getMonth();
            var currentDate = date.getDate();
            var currentYear = date.getFullYear();
            $("#txtFromDate").datepicker({
                numberOfMonths: 2,
                minDate: new Date(currentYear, currentMonth, currentDate),
                onSelect: function (selected) {
                    $("#txtToDate").datepicker("option", "minDate", selected)
                }

            });
            $("#txtToDate").datepicker({
                numberOfMonths: 2,
                onSelect: function (selected) {
                    $("#txtFromDate").datepicker("option", "maxDate", selected)
                }
            });
});
$(function () {
        // check if checkbox is unchecked 
        if ($("#CheckBox1").is(':checked')){
            $('#vacationModeBox').show();
        $('#txtFromDate').focus();
    }
        else
            $('#vacationModeBox').hide();

        // check if any checkbox has changed state
    $("input[type='checkbox']").on('change', function () {
                if ($(this).not(":checked")) {
                    $('.dateTextBox').val("");
                    $('#vacationModeBox').toggle(this.checked);
                }
                if ($(this).is(":checked")){
                    $('#txtFromDate').focus();
        }
        });
});
</script>

Upvotes: 1

Related Questions