jQuery UI Datepicker – How to show only one week?

i was wondering how to teach the Jquery UI datepicker to only show the current week (Mon-Sun) and two buttons prev/next w开发者_JAVA技巧eek.

Thanks

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

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)

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