Bootstrap datepicker: Select entire week and put week interval in input field

Question

I am currently using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), but want to be able to select entire weeks in the calendar (Monday to Sunday)

Answer 1

A very quick solution: 1. Modify JS file: bootstrap-datepicker.js 2. Modify CSS file: bootstrap-datepicker3.css 3. Modify your code.

        //Modifications on bootstrap-datepicker.js
        //-----
        if (!target.hasClass('disabled')){
                // Clicked on a day
                if (target.hasClass('day')){
                        day = parseInt(target.text(), 10) || 1;
                        year = this.viewDate.getUTCFullYear();
                        month = this.viewDate.getUTCMonth();
                        //HF[+][i]201612151500
                        datepickerPlugin.actualWeek = $(target[0].parentNode).find('.cw').text();
                        //HF[+][f]201612151500
                        // From last month
                        if (target.hasClass('old')){
                                if (month === 0) {
                                        month = 11;
                                        year = year - 1;
                                        monthChanged = true;
                                        yearChanged = true;
                                } else {
                                        month = month - 1;
                                        monthChanged = true;
                                }
                        }
        //-----
        //HF[-][i]201612151500
        //   validParts: /dd?|DD?|mm?|MM?|yy(?:yy)?/g,
        //HF[-][f]201612151500
        //HF[+][i]201612151500
        validParts: /ww?|dd?|DD?|mm?|MM?|yy(?:yy)?/g,
        //HF[+][f]201612151500
        nonpunctuation: /[^ -\/:-@\u5e74\u6708\u65e5\[-`{-~\t\n\r]+/g,
        parseFormat: function(format){
                if (typeof format.toValue === 'function' && typeof format.toDisplay === 'function')
                        return format;
                // IE treats \0 as a string end in inputs (truncating the value),
                // so it's a bad format delimiter, anyway
                var separators = format.replace(this.validParts, '\0').split('\0'),
                        parts = format.match(this.validParts);
                if (!separators || !separators.length || !parts || parts.length === 0){
                        throw new Error("Invalid date format.");
                }
                return {separators: separators, parts: parts};
        },
        //-----
        formatDate: function(date, format, language){
                if (!date)
                        return '';
                if (typeof format === 'string')
                        format = DPGlobal.parseFormat(format);
                if (format.toDisplay)
                        return format.toDisplay(date, format, language);
                var val = {
                        //HF[+][i]201612151500
                        ww: 'Semana ' + datepickerPlugin.actualWeek.toString(),
                        //HF[+][f]201612151500
                        d: date.getUTCDate(),
                        D: dates[language].daysShort[date.getUTCDay()],
                        DD: dates[language].days[date.getUTCDay()],
                        m: date.getUTCMonth() + 1,
                        M: dates[language].monthsShort[date.getUTCMonth()],
                        MM: dates[language].months[date.getUTCMonth()],
                        yy: date.getUTCFullYear().toString().substring(2),
                        yyyy: date.getUTCFullYear()
                };
                val.dd = (val.d < 10 ? '0' : '') + val.d;
                val.mm = (val.m < 10 ? '0' : '') + val.m;
                date = [];
                var seps = $.extend([], format.separators);
                for (var i=0, cnt = format.parts.length; i <= cnt; i++){
                        if (seps.length)
                                date.push(seps.shift());
                        date.push(val[format.parts[i]]);
                }
                return date.join('');
        },
        //-----

        .datepicker tbody tr:hover {
        	background-color: #eee;
        }
        .datepicker tbody tr:hover td,
        .datepicker tbody tr td.active {
        	border-radius: 0;
        }
        .datepicker tbody tr:hover td:last-child,
        .datepicker tbody tr td.active:last-child {
        	border-radius: 0 3px 3px 0;
        }
        .datepicker tbody tr:hover td:first-child,
        .datepicker tbody tr  td.active:nth-child(2) {
        	border-radius: 3px 0 0 3px;
        }

        
        
        
 
        
        

        
        $(function ()
        {
            var $weekPicker = $("#datepicker2");
            $weekPicker.datepicker
                (
                    {
                        autoclose: true,
                        format: 'ww', //'dd-M-yyyy',
                        calendarWeeks: true,
                        //maxViewMode: 0,
                        weekStart: 1
                    }
                )