CODEWITHSUNDEEP
jquery-uidatepickerjquery-ui-datepicker
Foxsk8
Foxsk8

Reputation: 308

JQuery Datepicker - show day names in date cell

I want make calendar in horizontal mode with dates and names of day. At the moment i found only solution that return days name of select.

Here is code example: 

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();

Here is similar question: JQuery Datepicker - show day of week name in date cell

Upvotes: 0

Views: 3827

Answers (1)

Amal
Amal

Reputation: 3426

Try this code

use dayNamesMin option

$("#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+""]; 
    }
});

Also add this in css to change width of calendar

.ui-datepicker {
    width:auto;
}

DEMO

Upvotes: 1

Related Questions