Two jqxDateTimeInputs Date() values??

[lenniehParticipant]

I’ve got an issue with jqxDateTimeInput.val(‘date’) (same thing happens with jqxDateTimeInput(‘getDate’) so I guess it’s the same underlying issue

I have two divs that look like this

                            <div id="startDate"></div>
                            <div id="endDate"></div>

I have these in document.ready

                $("#startDate").jqxDateTimeInput({ width: '250px', height: '30px' });
                $("#endDate").jqxDateTimeInput({ width: '250px', height: '30px' });
                $("#startDate").jqxDateTimeInput('setDate', defStartDate);
                $("#endDate").jqxDateTimeInput('setDate', defEndDate);

The fields display correctly, so today I see start date of 1st Feb and end Date of 1st March

But when I get the values later to send to my api I see the following inconsistencies ( the comments are the actual values displayed by chrome debugger) So the val() call returns the text as displayed on the page, but the val(‘date’) doesn’t. In actual fact it seems to return the last edited date value, so if I select a start date then both fields will return that date, and if I select a new end date then both fields will return that:

var startDate = $("#startDate").val('date'); //startDate = <strong>Wed Mar 01 2017 18:14:31 GMT+0000 </strong>(GMT Standard Time)
var startDateText = $("#startDate").val(); //startDateText = "01/02/2017"

var endDate = $("#endDate").val('date'); //endDate = Wed Mar 01 2017 18:14:31 GMT+0000 (GMT Standard Time)
var endDateText = $("#endDate").val(); //endDateText = "01/03/2017"

[Peter StoevKeymaster]

Hi lennieh,

val(‘date’) returns a Javascript Date object with your Local time applied which is the default behavior of Javascript Date objects. jqxDateTimeInput works with the standard Javascript Date object. val() returns only the text displayed in the INPUT field. It’s not a Javascript Date object. The point is that you’re experiencing a normal behavior.

Best Regards,
Peter Stoev

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

[lenniehParticipant]

You have missed the key point, the text in the start date field is 01/02/2017 i.e. 1st Feb 2017 but the value returned by $(“#startDate”).val(‘date’) is 1st March 2017.

[lenniehParticipant]

Here is a simple version of my code

<div class="form-horizontal">
    <div class="row">
        <div class="col-sm-2">Start Date:</div>
        <div class="col-sm-2"><div id="startDate"></div></div>
        <div class="col-sm-2">End Date:</div>
        <div class="col-sm-2"><div id="endDate"></div></div></div>
    <table>
        <thead>
        <tr><th></th><th>.val()</th><th>.val('date')</th></tr>
        </thead>
        <tbody>
        <tr>
            <td>StartDate</td>
            <td><input id="stVal"/></td>
            <td><input id="stValDate"/></td>
        </tr>
        <tr>
            <td>EndDate</td>
            <td><input id="endVal"/></td>
            <td><input id="endValDate"/></td>
        </tr>
        </tbody>
    </table>
    <br/>
    <div class="row">
        <button id="grabDates" type="button">Grab Dates</button>
    </div>
</div>

and the js

    <script type="text/javascript">

        $(document)
            .ready(function() {
                $("#startDate").jqxDateTimeInput({ width: 160, height: 30 });
                $("#endDate").jqxDateTimeInput({ width: 160, height: 30 });
                var stDate = new Date();
                var endDate = new Date();
                endDate.setDate(28);
                $("#startDate").jqxDateTimeInput('setDate', stDate);
                $("#endDate").jqxDateTimeInput('setDate', endDate);

                $("#grabDates")
                    .click(function () {
                        var stVal = $("#startDate").val(); 
                        $('#stVal').val(stVal);
                        var stValDate = $("#startDate").jqxDateTimeInput('getDate');
                        $("#stValDate").val(stValDate);
                        var endVal = $("#endDate").val();
                        $('#endVal').val(endVal);
                        var endValDate = $("#endDate").jqxDateTimeInput('getDate');
                        $("#endValDate").val(endValDate);
                    });
            });

    </script>

Try it, you’ll see that the value in the .val(‘date’) column is always the same, and is always the date time from whichever of the two date time input fields was clicked last.

[lenniehParticipant]

Seems to be an issue in Chrome, I’m running latest version (56.0.2924.87 – 64- bit) on Windows 7.
Works as expected in Internet Explorer V11

[Peter StoevKeymaster]

Hi lennieh,

Sorry, but I see no problem.

Best Regards,
Peter Stoev

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

[Author]

Posts