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

时间:2017-08-03 16:24:15

标签: jquery-ui datepicker jquery-ui-datepicker

我希望以横向模式制作日历,其中包含日期和日期名称。目前我发现只有选择返回日期名称的解决方案。

以下是代码示例:

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

1 个答案:

答案 0 :(得分: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