如何修复 JQuery Datepicker 日期格式？

Question

我昨天已经问过一个关于日期选择器的问题，但现在我遇到了一个我无法自己解决的新问题。我正在使用 JQuery Datepicker 制作一个日历，我可以在其中选择日期范围。当我尝试将日期格式从默认值（即 mm/dd/yy）更改为 dd.mm.yy 时，它因错误而失败，并在我尝试 select 任何日期时停止工作。此外，使用默认日期格式时，我的代码无法使用默认的 selected 加载日期。

这是我的当前日期选择器设置的代码（它可以选择日期范围并使用额外的类设置样式，它还放置日期来自和到到隐藏的输入和可见的div's），完整的样式看起来像截图：

日期选择器范围工作：

希望你能帮我解决这个问题！

// This code doesn't work with default dateformat
// start date on default
//$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
//$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
//$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
//$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
        
        // jquery datepicker settings
        $(function() {
            $("#datepicker").datepicker({
                numberOfMonths: 3,
                showButtonPanel: false,
                minDate: 0,
                beforeShowDay: function(date) {
                    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
                  
                    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
                   
                    if (date1 && date && (date1.getTime() == date.getTime())) {
                        return [true, 'ui-red-start', ''];
                    }
                    if (date2 && date && (date2.getTime() == date.getTime())) {
                        return [true, 'ui-red-end', ''];
                    }

                    if (date >= date1 && date <= date2) {
                        return [true, 'ui-state-selected-range', ''];
                    }

                    return [true, '', ''];
                },
                onSelect: function(dateText, inst) {
                    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
                    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
                    if (!date1 || date2) {
                        $('#start-date').val(dateText);
                        $('.start-date-visible').text(dateText);
                        $('#end-date').val('');
                        $('.end-date-visible').text('');
                        $(this).datepicker('option', dateText);
                    } else {
                        if (new Date(dateText) < date1) {
                            var sDate = $('#start-date').val();
                            $('.start-date-visible').text(dateText);
                            $('#start-date').val(dateText);
                            $(this).datepicker('option', null);

                            $('.end-date-visible').text(sDate);
                            $('#end-date').val(sDate);

                        } else {
                            $('.end-date-visible').text(dateText);
                            $('#end-date').val(dateText);
                            $(this).datepicker('option', null);
                        }
                    }
                }
            });
        });

td.ui-state-selected-range:first-child a {
    border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
    border-radius: 0 20px 20px 0;
}
.ui-red-start a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
    content: '';
    right: -1px;
    left: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-right: none;
    background-color: #f8c3b1;
    z-index: -1;
}
.ui-red-end a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
    content: '';
    left: -1px;
    right: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-left: none;
    background-color: #f8c3b1;
    z-index: -1;
}

.ui-state-selected-range .ui-state-default {
    border: 1px solid #f29676 !important;
    border-left: none !important;
    border-right: none !important;
    background: #f8c3b1 !important;
    box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>


<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">

<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>

Answer 1

// This code doesn't work with default dateformat
// start date on default
//$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
//$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
//$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
//$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));

// jquery datepicker settings
$(function() {
    $("#datepicker").datepicker({
        numberOfMonths: 3,
        showButtonPanel: false,
        minDate: 0,
        dateFormat: 'dd/mm/yy',
        beforeShowDay: function(date) {
            var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
            var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());

            // var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());

            if (date1 && date && (date1.getTime() == date.getTime())) {
                return [true, 'ui-red-start', ''];
            }
            if (date2 && date && (date2.getTime() == date.getTime())) {
                return [true, 'ui-red-end', ''];
            }
            
            //change here for selection
            
            if(date1 && date2 && date1-date2){
             if (date2<=date && date<=date1) {
                return [true, 'ui-state-selected-range', ''];
             }
            }
            else if(date1 && date2 && date2-date1){
             if (date2<=date && date<=date1) {
                return [true, 'ui-state-selected-range', ''];
             }
            }

            if (date1<=date && date<=date2) {
                return [true, 'ui-state-selected-range', ''];
            }

            return [true, '', ''];
        },
        onSelect: function(dateText, inst) {
            var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
            var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
            if (!date1 || date2) {
                $('#start-date').val(dateText);
                $('.start-date-visible').text(dateText);
                $('#end-date').val('');
                $('.end-date-visible').text('');
                $(this).datepicker('option', dateText);
            } else {
                if (new Date(dateText) < date1) {
                    var sDate = $('#start-date').val();
                    $('.start-date-visible').text(dateText);
                    $('#start-date').val(dateText);
                    $(this).datepicker('option', null);

                    $('.end-date-visible').text(sDate);
                    $('#end-date').val(sDate);

                } else {
                    $('.end-date-visible').text(dateText);
                    $('#end-date').val(dateText);
                    $(this).datepicker('option', null);
                }
            }
        }
    });
});

td.ui-state-selected-range:first-child a {
    border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
    border-radius: 0 20px 20px 0;
}
.ui-red-start a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
    content: '';
    right: -1px;
    left: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-right: none;
    background-color: #f8c3b1;
    z-index: -1;
}
.ui-red-end a {
    position: relative;
    background-color: #F29676;
    border-radius: 20px;
    border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
    content: '';
    left: -1px;
    right: 50%;
    top: -1px;
    bottom: -1px;
    position: absolute;
    border: 1px solid #f29676;
    border-left: none;
    background-color: #f8c3b1;
    z-index: -1;
}

.ui-state-selected-range .ui-state-default {
    border: 1px solid #f29676 !important;
    border-left: none !important;
    border-right: none !important;
    background: #f8c3b1 !important;
    box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>


<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">

<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>

使用 dateFormat: 'dd/mm/yy', 并在解析日期时使用相同的格式进行解析。

如何修复 JQuery Datepicker 日期格式？

How to fix JQuery Datepicker dateformat?

javascript

jquery

jquery-ui

datepicker

jquery-ui-datepicker