JQuery Datepicker - 在日期单元格中显示日期名称

Question

我想在水平模式下制作带有日期和日期名称的日历。目前我发现唯一的解决方案是返回选择的日期名称。

这里是代码示例：

function datePickerSetup () {
    //todays date
    var dateToday = new Date();
    var todayDate = dateToday.toLocaleDateString("en-GB"); //returns 05-12-2014
    var todayDateNumber = dateToday.getDate(); //returns 5 if 05-12-2014
    $('#datepicker-date-selected').text(todayDateNumber);   

    var weekday = new Array(7);
    weekday[0]=  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var todaysDay = weekday[dateToday.getDay()]; // returns Tuesday
    $('#datepicker-day-of-week').text(todaysDay);

    $("#datepicker").datepicker({
        inline: true,
        minDate: new Date(),
        firstDay: 1,
        dateFormat: "dd-mm-yy",
        onSelect: function(date) {
            // work out selected date 
            var dateSelect = $(this).datepicker('getDate'); //used below

            var dayOfWeek = $.datepicker.formatDate('DD', dateSelect); //shows Monday
            $('#datepicker-day-of-week').text(dayOfWeek);

            var dateOfSelected = $.datepicker.formatDate('d', dateSelect); //shows 10 if 10/03/1994
            $('#datepicker-date-selected').text(dateOfSelected);
        }
    });
}

datePickerSetup();

这里有类似的问题：JQuery Datepicker - show day of week name in date cell

Answer 1

试试这个代码

使用dayNamesMin 选项

$("#datepicker").datepicker({
    dayNamesMin: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
   beforeShowDay: function (date) {
   var list=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var day = date.getDay();
    var curr=list[day];
   return [true, "",""+curr+""]; 
    }
});

在 css 中也添加这个来改变日历的宽度

.ui-datepicker {
    width:auto;
}

DEMO