Bootprap datepicker: выберите всю неделю и установите интервал недели в поле ввода
В настоящее время я использую bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), но хочу иметь возможность выбирать целые недели в календаре (с понедельника до Воскресенье), а также отображение интервала недели в поле ввода, которое я выбираю.
Интервал по умолчанию в поле ввода должен быть той неделей, в которой вы находитесь.
Я видел несколько схожий метод с использованием jQuery UI для отображения интервала на jsfiddle.
C
Я пробовал редактировать этот код для работы с bootstrap-datepicker, без везения.
Любая идея, как я могу реализовать это для bootstrap-datepicker?:
![The steps are outlined in this image]()
Любая помощь очень ценится!
Ответы
Ответ 1
Я использовал подборщик даты и времени Bootstrap в моем проекте, столкнулся с той же проблемой, что и ваш. При попытке выбрать недели.
Получив одно решение самостоятельно, вы можете попробовать его.
Необходимые файлы:
- Bootstrap.css
- Bootstrapdatetime picker css (вы можете использовать только datepicker вместо datetime)
- jquery.js
- Bootstrap.js
- moment.js
- Bootstrap Date time Picker js (Снова вы можете использовать только datepicker вместо datetime)
HTML:
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>
</div>
</div>
</div>
JS: Используется момент .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/
Ответ 2
Я оптимизировал вышеупомянутые примеры.
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>
</div>
</div>
</div>
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/
Ответ 3
В настоящее время я работаю над проектом с тем же требованием. Не знаю, где я его нашел, но эта скрипка на http://codepen.io/chanduvkm/pen/yeXKGW затрагивает почти ту же проблему несколько иначе, но с использованием начальной загрузки -datepicker, которую вы сейчас используете. Значение по умолчанию может быть легко добавлено. Тем не менее, CSS активной недели не работает, когда установлен параметр "weekStart: 1", что мне действительно нужно (неделя 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());
});
В ответ на предыдущий ответ пракаша я разблокировал скрипку, чтобы начать в понедельник: https://jsfiddle.net/skfw0k53/, добавив следующее:
moment.locale('en', {
week: { dow: 1 } // Monday is the first day of the week
});
Итак, в основном две разные библиотеки для решения этой проблемы.
Ответ 4
Вы можете попробовать.
Необходимый файл:
JQuery-1.11.3.js
самозагрузки-datepicker.min.js
самозагрузки-datepicker.css
bootstrap.min.css
HTML
<div class="container">
<div class="row">
<div class='col-md-3'>
Week Start <select id="cweek">
<option value='0'> 0 </option>
<option value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
<option value='6'> 6 </option>
<option value='7'> 7 </option>
</select>
</div>
<div class='col-md-3'>
Copy <select name='cweek_number' id='cweek_number'>
<option value='1'> 1 Week </option>
<option value='2'> 2 Week </option>
<option value='3'> 3 Week </option>
<option value='4'> 4 Week </option>
</select> from
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="from_cal"></div>
</div>
<div class="row">
<div class="to_cal"></div>
</div>
</div>
</div>
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 link https://jsfiddle.net/shivamanhar/ddphp8jx/9/
Ответ 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: /[^ -\/:[email protected]\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 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;
}
<!--RefLinks-->
<link href="~/libraries/bootstrap-datepicker-1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="~/libraries/bootstrap-datepicker-1.6.4/js/bootstrap-datepicker.js"></script>
<!--OnBody-->
<input id="datepicker2" class="datepicker4" style="width: 300px;" type="text">
<!--OnScriptSection-->
$(function ()
{
var $weekPicker = $("#datepicker2");
$weekPicker.datepicker
(
{
autoclose: true,
format: 'ww', //'dd-M-yyyy',
calendarWeeks: true,
//maxViewMode: 0,
weekStart: 1
}
)
