DateTimeInput throws a RangeError

[ArCiGoParticipant]

I’m using the jqxDateTimeInput in my form, but when I select a date the DateTimeInput throws this error:

Uncaught RangeError: Maximum call stack size exceeded.

Could anybody help me solving this?

This is my code:

<!--Calling the modal-->

$('#createPaquetes').click(function () {
            var url = $('#panelPaquetesCreateModal').data('url');
            $.get(url, function (data) {
                $('#panelPaquetesCreateModal').html(data);
                $('#panelPaquetesCreateModal').modal('show');
            });
        });

The partialView

<div class="modal-dialog">
    <div class="modal-content">
        
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModal-label">Crear Nuevo Paquete</h4>
        </div>

        <div class="modal-body">
            <form class="form-horizontal" action="" method="post" id="createPaqueteForm">
                <div class="form-group">
                    <label for="nomPaquete" class="col-sm-2 control-label">Paquete</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nomPaquete" placeholder="Nombre del Paquete" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="fechaInicio" class="col-sm-2 control-label">Fecha de Inicio</label>
                    <div class="col-sm-10">
                        <div id="fechaInicio" class="form-control"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="fechaFin" class="col-sm-2 control-label">Fecha de Fin</label>
                    <div class="col-sm-10">
                        <div id="fechaFin" class="form-control"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="imagen" class="col-sm-2 control-label">Imagen</label>
                    <div class="col-sm-10">
                        <input type="file" class="form-control" id="imagen" multiple="multiple" name="imagen">
                    </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="nacionPaq" /> ¿Nacional?
                    </label>
                </div>
            </form>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-success" id="save">Guardar</button>
        </div>

    </div>
</div>

@* Scripts *@

<script src="~/Scripts/partialPanelPaquetesCreate.js"></script>

The JavaScript

$(document).ready(function () {
    
    $('#panelPaquetesCreateModal').on('hidden.bs.modal', function (e) {
        $('#createPaqueteForm').jqxValidator('hide');
    });

    $('#fechaInicio').jqxDateTimeInput({ width: '300px', height: '25px' });
    $('#fechaFin').jqxDateTimeInput({ width: '300px', height: '25px' });

    $('#createPaqueteForm').jqxValidator({
        rules: [
            { input: '#nomPaquete', message: "El Nombre del Paquete es requerido", action: 'keyup, blur', rule: 'required' }
        ],
        onSuccess: function () {
            if (window.FormData != undefined) {
                var fechaInicio = $('#fechaInicio').jqxDateTimeInput('getDate');
                var fechaFin = $('#fechaFin').jqxDateTimeInput('getDate');
                
                var fileImage = $('#imagen').get(0).files;
                var fromData = new FormData();
                for (var i = 0; i < fileImage.length; i++) {
                    fromData.append(fileImage[i].name, fileImage[i]);
                }

                fromData.append("Entity", "Paquete");
                fromData.append("NomPaquete", $('#nomPaquete').val());
                fromData.append("FechaInicio", fechaInicio);
                fromData.append("FechaFin", fechaFin);
                fromData.append("NacionPaq", $('#nacionPaq').val());

                $.ajax({
                    url: "/PanelPaquetes/Create",
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    data: fromData,
                    success: function (data) {
                        if (data.d == "") {
                            $('#panelPaquetesCreateModal').modal('hide');
                            window.location.reload();
                        }
                    },
                    error: function (err) {
                        alert('Error al enviar');
                        alert(err);
                        console.log(err);
                    }
                });
            }
        }
    });

    $('#save').on('click', function () {
        $('#createPaqueteForm').jqxValidator('validate');
    });

});

[DimitarParticipant]

Hello ArCiGo,

Your jqxDateTimeInput-related code seems correct. Could you, please, share a simplified jsEditor example we can test to reproduce the reported error? Please also make sure you are using the latest version of jQWidgets (4.1.2).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts