CODEWITHSUNDEEP
javascriptjqueryjquery-uidatecalendar
Vrankela
Vrankela

Reputation: 1202

Why does Jquery UI erase my input box?

I am making a .net MVC aplication, and I recreated the problem in fiddle.

When I attempt to change my date, the calendar just stays there and when I click elsewhere on the screen the calendar goes but the other date gets erased.

I just want the calendar to disappear when I select the date, and not have the other date erased.

    $('#from').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd.mm.yy.',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        yearRange: "-50:+50",
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });

    $('#to').datepicker({
        inline: true,
        showOtherMonths: true,
        dateFormat: 'dd.mm.yy.',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        yearRange: "-50:+50",
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });

$(".dates").change(function () {
        var dateFrom = $("#from").val();
        //check that there is data before saving into sessionStorage
        if (dateFrom.value.length >= 8)
            sessionStorage.setItem("fromDate", this.value)

        var dateTo = $("#to").val();
        //check that there is data before saving into sessionStorage
        if (dateTo.value.length >= 8)
            sessionStorage.setItem("toDate", dateTo)

        if (dateTo != null && dateFrom !=null) {
            $.ajax({
                url: '/MainPage/DateSessionCreate',
                type: 'POST',
                data: { "dateTo": dateTo, "dateFrom": dateFrom },
                dataType: 'json'
            });
        }
        else {
            alert("one of the dates is null");
        }
    });

var today = new Date();
    var curr_date = today.getDate();
    var curr_month = today.getMonth();
    curr_month++;
    var curr_year = today.getFullYear();
    var toDate = "";
    //check if there's a to Date in sessionStorage 
    if (sessionStorage.getItem("toDate")) {
        toDate = sessionStorage.getItem("toDate");
        sessionStorage.setItem("toDate", toDate);
    } else {
        toDate = curr_date + "." + curr_month + "." + curr_year;
        sessionStorage.setItem("toDate", toDate);
        if (toDate != null) {
            $.ajax({
                url: '/MainPage/DateSessionCreate',
                type: 'POST',
                data: { "dateTo": toDate},
                dataType: 'json'
            });
        }
    }
    document.getElementById("to").value = toDate;


    today.setDate(today.getDate() - 7);
    var new_date = today.getDate();
    var new_month = today.getMonth();
    new_month++;
    var new_year = today.getFullYear();
    var fromDate = "";
    //check if there's a from Date in sessionStorage 
    if (sessionStorage.getItem("fromDate")) {
        console.log("if");
        fromDate = sessionStorage.getItem("fromDate");
        sessionStorage.setItem("fromDate", fromDate);
    } else {
        console.log("else");
        fromDate = new_date + "." + new_month + "." + new_year;
        sessionStorage.setItem("fromDate", fromDate);
        if (fromDate != null) {
            $.ajax({
                url: '/MainPage/DateSessionCreate',
                type: 'POST',
                data: { "dateFrom": fromDate },
                dataType: 'json'
            });
        }

    }
    document.getElementById("from").value = fromDate;

I admit, I am still a newbie, and the entire code could have been shortened if I knew how to make the date-picker write the date in the input box (but when I use 'defaultDate: -7' it only highlights the date in calendar). So that's the reason why I am creating the date format and manually writing it in the input box. The additional code is to make sure the dates stay there after page reload, and some is there to send information to the controller

EDIT1 Someone indicated that onClose functions are mixed up. Although it does solve the erasing problem, it creates another problem - I put those intentionally to restrict the date range. That way the 'to' date cannot be before the 'from' date. Maybe there is another way to restrict this?

Upvotes: 0

Views: 39

Answers (1)

eladcon
eladcon

Reputation: 5825

You can change the format of the dates to be without the . in the end:

dateFormat: 'dd.mm.yy',

Also the return value from $("#from").val() is string, so it doesnt have a value property. You can check the length of the string instead:

if (dateFrom.length >= 8)

Check this fiddle

To set the date for the datepicker, you can use the setDate method:

var today = new Date();
$('#to').datepicker("setDate", today);
$('#from').datepicker("setDate", new Date(today.setDate(today.getDate() - 7)));

Upvotes: 1

Related Questions