Обновить дату, выбранную после сохранения в базе данных через ajax

Question

$( function() {
    var dateFormat = "mm/dd/yy",
        from = $("#from").datepicker({
            defaultDate: "+1w",
            minDate: 0,
        }).on( "change", function() {
            to.datepicker( "option", "minDate", getDate( this ) );
        }),
        to = $("#to").datepicker({
            defaultDate: "+1w",
            minDate: 0,
        }).on("change", function() {
            from.datepicker( "option", "maxDate", getDate( this ) );
        });

    function getDate(element) {
        var date;
        try {
            date = $.datepicker.parseDate( dateFormat, element.value );
        } catch( error ) {
            date = null;
        }
        return date;
    }
});

Я работаю с jquery datepicker.Сначала я выбираю дату начала и окончания.Затем я отправляю даты, используя ajax, чтобы сохранить их в базе данных.

Я очищаю поле ввода даты следующим образом:

document.getElementById('from').value = '';

document.getElementById('to').value = '';

После этого, как только я хочу добавить другую датуdatepicker (даты, основанные на выбранной дате начала и дате окончания) disabled.

Я просто хочу обновить datepicker, чтобы я мог свободно выбирать и добавлять другую дату.

Answer 1

Для очистки текстового поля вы можете использовать $("#textboxid").val('');.И в соответствии с вашими требованиями вам нужно поместить приведенный ниже код в блок успеха ajax, чтобы повторно инициализировать указатель даты.

$("#dpFrom").val('');
$("#dpTo").val('');
$("#dpFrom").datepicker();
$("#dpTo").datepicker();

В следующем фрагменте кода вы можете очистить текстовые поля DatePicker и повторно инициализировать DatePicker.

$(function() {
    $("#dpFrom").datepicker();
    $("#dpTo").datepicker();
});

function clearDates() {
    $("#dpFrom").val('');
    $("#dpTo").val('');
    $("#dpFrom").datepicker();
    $("#dpTo").datepicker();
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label>From Date: </label>
<input type="text" id="dpFrom">
<br />
<label>To Date: </label>
<input type="text" id="dpTo">
<br />
<button onclick="clearDates();">Clear and Reinitialize Datepicker</button>

Answer 2

Повторно инициализируйте ваш выбор даты в Ajax success, как показано ниже.

success: function() {
            $( "#from" ).datepicker();
            $( "#to" ).datepicker();
        } ,