Bootstrap datepicker：选择整周并在输入字段中输入周间隔

我目前正在使用bootstrap-datepicker（ https://github.com/eternicode/bootstrap-datepicker ），但希望能够在日历中选择整周（周一至周日），并显示周中的周数。我正在选择的输入字段。 输入字段中的默认间隔应该是您当前所在的周。

我已经看到了一个使用jQuery UI在jsfiddle上显示间隔的方法 。

C 

我已经尝试编辑此代码以使用bootstrap-datepicker，没有任何运气。

知道如何为bootstrap-datepicker实现这个吗？ ：

任何帮助都非常感谢！

Answer 1

我在我的项目中使用Bootstrap日期时间选择器遇到了与你相同的问题当试图选择周时。

自己得到以下解决方案，你可以试试。

所需文件：

1. Bootstrap.css
2. Bootstrapdatetime picker css（你只能使用datepicker而不是datetime）
3. 的jquery.js
4. Bootstrap.js
5. moment.js
6. 引导日期时间选择器js（再次，您只能使用datepicker而不是datetime）

HTML：

JS：使用moment.js计算一周的开始和结束。

 //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can have your own) $("#weeklyDatePicker").datetimepicker({ format: 'MM-DD-YYYY' }); //Get the value of Start and End of Week $('#weeklyDatePicker').on('dp.change', function (e) { value = $("#weeklyDatePicker").val(); firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY"); lastDate = moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY"); $("#weeklyDatePicker").val(firstDate + " - " + lastDate); }); 

CSS：

 .bootstrap-datetimepicker-widget tr:hover { background-color: #808080; } 

链接到JSFiddle中的工作代码：

https://jsfiddle.net/Prakash_Thete/9usq3enn/

Answer 2

我已经优化了上面提到的例子。

HTML

JS

 $(document).ready(function(){ moment.locale('en', { week: { dow: 1 } // Monday is the first day of the week }); //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh) $("#weeklyDatePicker").datetimepicker({ format: 'MM-DD-YYYY' }); //Get the value of Start and End of Week $('#weeklyDatePicker').on('dp.change', function (e) { var value = $("#weeklyDatePicker").val(); var firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY"); var lastDate = moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY"); $("#weeklyDatePicker").val(firstDate + " - " + lastDate); }); }); 

CSS

 .bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover { background-color: #eee; } 

查看演示链接： https ： //jsfiddle.net/IamMHussain/ozdrdbqf/1/

Answer 3

我目前正在开发一个具有相同要求的项目。 不知道我在哪里找到它，但http://codepen.io/chanduvkm/pen/yeXKGW上的这个小提琴以稍微不同的方式处理几乎相同的问题，但是使用你当前使用的bootstrap-datepicker库。 可以轻松添加默认值。 但是，当设置选项’weekStart：1’时，活动周的CSS失败，这是我实际需要的（周一开始ISO-8601周）。

  var startDate, endDate; $('#weekpicker').datepicker({ autoclose: true, format :'mm/dd/yyyy', forceParse :false }).on("changeDate", function(e) { //console.log(e.date); var date = e.date; startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+6); //$('#weekpicker').datepicker("setDate", startDate); $('#weekpicker').datepicker('update', startDate); $('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' + startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' + endDate.getFullYear()); }); 

为了回应prakash之前的回答，我在周一开始分道扬琴： https ：//jsfiddle.net/skfw0k53/，添加以下内容：

  moment.locale('en', { week: { dow: 1 } // Monday is the first day of the week }); 

所以，基本上两个不同的库来解决这个问题。

Answer 4

你可以尝试一下。

所需文件：

jQuery的1.11.3.js
引导-datepicker.min.js
自举datepicker.css
bootstrap.min.css

HTML

 
 
 
 Week Start   0   1   2   3   4   5   6   7   
 
 Copy   1 Week   2 Week   3 Week   4 Week   from 
 
 
 
 
 
 
 
 
 
 
  

JS

 var weekOfStart = 0; var startDate; var endDate; var toCal_startDate; var toCal_endDate; var setNumberOfWeek = 1; var from_cal = '.from_cal'; var to_cal = '.to_cal'; var obj = $(from_cal).datepicker({ weekStart:weekOfStart, maxViewMode: 0, onSelect: function (date) { }, beforeShowDay: function(date) { var cssClass = ''; if(date >= startDate && date <= endDate) cssClass = 'oui-state-hover'; return [true, cssClass]; } // startDate: new Date() }); $(from_cal).on('changeDate', function(evt) { var date = evt.date; var dayAdjustment = date.getDay() - weekOfStart; if (dayAdjustment < 0) { dayAdjustment += 7; } if(setNumberOfWeek > 1) { weekLast = 7*(setNumberOfWeek-1); } else { weekLast = 0; } startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + (6+weekLast)); // console.log(startDate); // console.log(endDate); $(this).find('.active').closest('tr').addClass('oui-selected'); if(setNumberOfWeek > 1) { $(this).find('.active').closest('tr').nextAll().slice(0, (setNumberOfWeek-1)).addClass('oui-selected'); } }); $(from_cal).on('mousemove', '.table-condensed tr', function () { $(this).find('td').addClass('oui-state-hover'); if(setNumberOfWeek > 1) { $(this).nextAll().slice(0, (setNumberOfWeek-1)).find('td').addClass('oui-state-hover'); } }); $(from_cal).on('mouseleave', '.table-condensed tr', function () { $(this).find('td').removeClass('oui-state-hover'); $(this).nextAll().find('td').removeClass('oui-state-hover'); }); $(from_cal).find('td').on('click', function(){ console.log('ok'); }); obj.datepicker(); // To date Calendar code var toCalObj = $(to_cal).datepicker({ weekStart:weekOfStart, maxViewMode: 0, // startDate: new Date() }); toCalObj.datepicker(); $(to_cal).on('mousemove', '.table-condensed tr', function () { $(this).find('td').addClass('kui-state-hover'); if(setNumberOfWeek > 1) { $(this).nextAll().slice(0, (setNumberOfWeek-1)).find('td').addClass('kui-state-hover'); } }); $(to_cal).on('mouseleave', '.table-condensed tr', function () { $(this).find('td').removeClass('kui-state-hover'); $(this).nextAll().find('td').removeClass('kui-state-hover'); }); $(to_cal).on('changeDate', function(evt) { var date = evt.date; var dayAdjustment = date.getDay() - weekOfStart; if (dayAdjustment < 0) { dayAdjustment += 7; } if(setNumberOfWeek > 1) { weekLast = 7*(setNumberOfWeek-1); } else { weekLast = 0; } toCal_startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment); toCal_endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + (6+weekLast)); console.log(toCal_startDate); console.log(toCal_endDate); $(this).find('.active').closest('tr').addClass('oui-selected'); if(setNumberOfWeek > 1) { $(this).find('.active').closest('tr').nextAll().slice(0, (setNumberOfWeek-1)).addClass('oui-selected'); } // console.log(date.getDay()); }); //comman code $('#cweek').change(function() { weekOfStart = $('#cweek').val(); obj.datepicker('destroy'); toCalObj.datepicker('destroy'); obj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update'); toCalObj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update'); }); $('#cweek_number').change(function() { setNumberOfWeek = $('#cweek_number').val(); obj.datepicker('destroy'); toCalObj.datepicker('destroy'); obj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update'); toCalObj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update'); }); $('.table-condensed').addClass('table'); 

屏幕截图

JSFiddle链接https://jsfiddle.net/shivamanhar/ddphp8jx/9/

Answer 5

一个非常快速的解决方案：1。修改JS文件：bootstrap-datepicker.js 2.修改CSS文件：bootstrap-datepicker3.css 3.修改代码。

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