jquery - nacimiento - Establecer TextBox.Text después de seleccionar una fecha en un Ajax CalendarExtender

seleccionar fecha en html5

Question

En una página ASP.NET, tengo un par de controles CalendarExtender (AJAX Control Toolkit para ASP.NET 4.0) en una página que actúa como un rango de fechas. Lo que quiero hacer es, después de que el usuario haya seleccionado el valor para TextCheckInDate , rellenar TextCheckOutDate con TextCheckInDate+ 1 si TextCheckOutDate está vacío.

Lamentablemente, mis habilidades de jQuery aún no están donde me gustaría que estuvieran. Sé que tengo que crear una función jQuery que se TextCheckInDate cuando cambie TextCheckInDate , necesito poder leer ambos cuadros de texto, realizar aritmética de fecha básica y escribir en el segundo cuadro de texto. La implementación me elude. Gracias a esta publicación , sé usar date.js para mi aritmética de fechas, que se incluye a continuación ...

Lo que tengo hasta ahora

$("input[id$=''TextCheckInDate'']").keyup
    (function (e) {
        checkCheckOutDate( $("#TextCheckInDate").val() );
    }
    );


function checkCheckOutDate(checkInDate) {
    var startDate = Date.parse(checkInDate);
    if ($("#TextCheckOutDate").val() == "") {
        $("#TextCheckOutDate").val((1).days().after(startDate));
    }
}

Answer 1

¿Puedes prohibir ingresar texto en cuadros de texto de fecha? Si es así, puede usar el siguiente enfoque:

<script type="text/javascript">
    function checkInDateChanged(sender, args) {
        var checkInDate = sender.get_selectedDate();

        var checkOutDateExtender = $find("CheckOutdateExtender");
        var checkOutdate = checkOutDateExtender.get_selectedDate();
        if (checkOutdate == null || checkOutdate < checkInDate) {
            checkOutdate = new Date(checkInDate.setDate(checkInDate.getDate() + 1));
            checkOutDateExtender.set_selectedDate(checkOutdate);
        }
    }
</script>
<asp:TextBox runat="server" ID="TextCheckInDate" />
<ajax:CalendarExtender runat="server" ID="CheckInDateCalendarExtender" TargetControlID="TextCheckInDate"
    OnClientDateSelectionChanged="checkInDateChanged" />

<asp:TextBox runat="server" ID="TextCheckOutDate" />
<ajax:CalendarExtender runat="server" ID="CheckOutDateCalendarExtender" BehaviorID="CheckOutdateExtender"
    TargetControlID="TextCheckOutDate" />

en el método PreRender agrega el siguiente código:

TextCheckInDate.Attributes.Add("readOnly", "readonly");
TextCheckOutDate.Attributes.Add("readOnly", "readonly");

Answer 2

Debería poder modificar ligeramente su código para checkCheckOutDate() también su función checkCheckOutDate() cuando se active el evento de change la checkCheckOutDate() entrada.

$("input[id$=''TextCheckInDate'']").bind(''keyup,change'', function (e) {
    checkCheckOutDate( $("#TextCheckInDate").val() );
});


function checkCheckOutDate(checkInDate) {
    var startDate = Date.parse(checkInDate);
    if ($("#TextCheckOutDate").val() == "") {
        $("#TextCheckOutDate").val((1).days().after(startDate));
    }
}

Tenga en cuenta que muchos de los métodos de evento en jQuery como click() , keyup() , etc. son solo envoltorios de bind(''click'', function() { ... }) .