jQuery UI Datepicker – How to show only one week?

Question

i was wondering how to teach the Jquery UI datepicker to only show the current week (Mon-Sun) and two buttons prev/next week.

Thanks

Answer 1

How many days remaing you wanat to show after selecting from datepicker you can replance friday varaiable down in the function. (i made the week ends as holidays) $(function () {

        $('#ToDate').val = null;


        $.datepicker.setDefaults($.datepicker.regional['en']);
        $('#FromDate').datepicker(
            {

                firstDay: 0,
                beforeShowDay: $.datepicker.noWeekends,
                onSelect: function (selectedDate) {
                    var date = $('#FromDate').datepicker('getDate');
                    var adddate = date;
                    adddate.setDate(date.getDate() + 5); // Add 7 days
                    //$('#FromDate').datepicker('option', 'minDate', 0);
                    //$('#ToDate').datepicker('setDate', $('#FromDate').datepicker('getDate'));
                    //$('#ToDate').datepicker('option', 'maxDate', adddate);
                    $('#ToDate').datepicker('option', 'minDate', $('#FromDate').datepicker('getDate'));
                    $('#ToDate').datepicker('option', 'maxDate', adddate);
                    //var weekday = $(this).datepicker('getDate');
                    //$('#Lbl1').val = weekday;


                }


            });

        //var Fromdate = $('#FromDate').datepicker('getDate');
        //var fromyear = Fromdate.getFullYear(); //get year
        //var frommonth = Fromdate.getMonth();
        //var fromdate = Fromdate.getDate();
        //var fromtime = Fromdate.getTime();


        //$('#ToDate').datepicker(
        //    {
        //        //stepMonths: 0,
        //        onSelect: function (selectedDate) {
        //            var Fromdate = $('#FromDate').datepicker('getDate');
        //            var Todate = $('#ToDate').datepicker('getDate');
        //            //var a = calcDate(Fromdate, Todate);
        //            //alert(a);
        //            //myfunc();
        //            days_between(Fromdate, Todate);
        //        }
        //    });


        //function days_between(Fromdate, Todate) {
        //    var date = $('#FromDate').datepicker('getDate');
        //    var adddate = date;
        //    adddate.setDate(date.getDate() + 7);
        //    // The number of milliseconds in one day
        //    var ONE_DAY = 1000 * 60 * 60 * 24;

        //    // Convert both dates to milliseconds
        //    var date1_ms = Fromdate.getTime();
        //    var date2_ms = Todate.getTime();

        //    // Calculate the difference in milliseconds
        //    var difference_ms = Math.abs(date1_ms - date2_ms);

        //    // Convert back to days and return


        //    if (parseInt(Math.round(difference_ms / ONE_DAY)) >= adddate) {
        //        alert("u cant select more than seven days");
        //    }
        //    else {
        //        $('#FromDate').datepicker('getDate') === null;
        //    }

        //}



        //$("#ToDate").datepicker(
        //    {

        //        //beforeShowDay: $.datepicker.noWeekends ,
        //    //In Datepicker set the Calendar display start with Monday


        //    //firstDay: $('#FromDate').datepicker('getDate'),
        //    ////stepMonths: 0,
        //    ////month: date.getMonth(),
        //    //showOtherMonths: true,
        //    //selectOtherMonths: true,
        //    ////startDate: new Date(month, date1, year), //set it here
        //    ////endDate: new Date(month, '31', year + 1),


        //    //    beforeShowDay: function (date)
        //    //    {

        //    //        //var monday = new Date("June 1, 2013 00:00:00"); Used it for testing

        //    //        //Get today's date
        //    //        var monday = $('#FromDate').datepicker('getDate');

        //    //        //Set the time of today's date to 00:00:00
        //    //        monday.setHours(0, 0, 0, 0);
        //    //        monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));

        //    //        //Set the Date to Monday
        //    //        var sunday = new Date(monday);

        //    //        //Now add 6 to Monday to get the Date of Sunday (End of that Week)
        //    //        sunday.setDate(monday.getDate() + 6);

        //    //        //Now return the enabled and disabled dates to datepicker
        //    //        return [(date >= monday && date <= sunday), ''];

        //    //    },

        //            //beforeShowDay: $.datepicker.noWeekends ,
        //        onSelect: function (selectedDate)
        //        {
        //            var Fromdate = $('#FromDate').datepicker('getDate');
        //            var Todate = $('#ToDate').datepicker('getDate');
        //            //var a = calcDate(Fromdate, Todate);
        //            //alert(a);
        //            //myfunc();
        //            days_between(Fromdate, Todate);

        //        }

        //});

        //Set the date format to dd/mm/yy ie., 30/10/1989



        $(function () {


            $('#ToDate').datepicker(
                {

                    firstDay: $('#FromDate').datepicker('getDate'),
                    //stepMonths: 0,
                    //month: date.getMonth(),
                    showOtherMonths: true,
                    selectOtherMonths: true,
                    //startDate: new Date(month, date1, year), //set it here
                    //endDate: new Date(month, '31', year + 1),


                    beforeShowDay: function (date) {

                        //var monday = new Date("June 1, 2013 00:00:00"); Used it for testing

                        //Get today's date
                        var monday = $('#FromDate').datepicker('getDate');

                        //Set the time of today's date to 00:00:00
                        monday.setHours(0, 0, 0, 0);
                        monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));

                        //Set the Date to Monday
                        var friday = new Date(monday);

                        //Now add 6 to Monday to get the Date of Sunday (End of that Week)
                        friday.setDate(monday.getDate() + 4);

                        //Now return the enabled and disabled dates to datepicker
                        return [(date >= monday && date <= friday), ''];

                    },
                    onClose: function (selected) {
                        if (selected.length <= 0) {
                            // selected is empty
                            $("#ToDate").datepicker('disable');
                        } else {
                            $("#ToDate").datepicker('enable');
                        }
                        $("#ToDate").datepicker("option", "dateFormat", "mm/dd/yy");
                    }

                });


        });

        $("#ToDate").datepicker("option", "dateFormat", "mm/dd/yy");


        //Ending the block
    });

Answer 2

Hi just looked up some handy snippets an build the a minimal version for myself

init: function() {
    // Get today (or any other date)
    var today = new Date();

    // Get monday
    var monday = this.getMonday(today);

    // Render the week
    this.renderWeekFromMonday(monday);
},

renderWeekFromMonday : function(date) {
    var dayContainer = $('#dayContainer');

    // clear div
    dayContainer.empty();

    // Render days
    for (var i = 0; i <= 7; i++) {

        // Get mondday day (1-31)
        var day = date.getDate();

        // Today
        var t = new Date();

        // Create dayobject for usage inside for loop
        var d = new Date(date);

        // Render 7 days (1 week) 
        for (var i = 0; i < 7; i++) {

            // New day (+1)
            d.setDate(day + i)

            // Create html
            var span = $("<span>").addClass("day").attr("time", d.getTime())
            span.html("<span class=dayNumber>" + d.getDate() + "</span>");

            // Append day
            dayContainer.append(span);
        }
    }
},
getMonday: function (date) {
    // Get the day of the week for the specified date. 0 = Sun, 1 = Mon etc.
    var day = date.getDay(),

    diff = date.getDate() - day + (day == 0 ? -6:1);  sunday ?
    return new Date(date.setDate(diff));
}

Answer 3

There is no way to make jQuery UI datepicker to show weeks. I haven't seen any plugin yet that allows this now that I think of it.

You could get the sourcecode from github and modify that to your needs, but that will take a lot of time I think. https://github.com/jquery/jquery-ui

If you need to show week by week because you only want to allows selection of a week instead of day(s). Then you could use the wijmo calendar. This allow selection (not display) of weeks. http://wijmo.com/Wijmo-Open/samples/#calendar|selection (enable days and weeknumber)