Question

我正在制作一个.net MVC应用程序，我在fiddle中重新创建了这个问题。

当我尝试更改日期时，日历就会停留在那里，当我点击屏幕上的其他地方时，日历会消失，但另一个日期会被删除。

我只是希望日历在我选择日期时消失，而不会删除其他日期。

    $('#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;

我承认，我仍然是新手，如果我知道如何让日期选择器在输入框中写日期，那么整个代码可能会被缩短（但是当我使用＆＃39; defaultDate：-7＆＃39;它只突出显示日历中的日期）。这就是我创建日期格式并在输入框中手动编写日期格式的原因。 附加代码是为了确保页面重新加载后日期保留在那里，有些可以向控制器发送信息

EDIT1 有人表示onClose功能已混淆。虽然它确实解决了擦除问题，但它产生了另一个问题 - 我故意将这些问题限制在日期范围内。这样就可以了解到＆＃39;日期不能早于＆＃39;来自＆＃39;日期。也许还有另一种方法来限制这个？

Answer 1

您可以将日期的格式更改为最终没有.：

dateFormat: 'dd.mm.yy',

$("#from").val()的返回值也是字符串，因此它没有值属性。您可以改为检查字符串的长度：

if (dateFrom.length >= 8)

检查this fiddle

要设置日期选择器的日期，您可以使用setDate方法：

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

为什么Jquery UI会擦除我的输入框？

1 个答案: