I am trying to set the time format in my calendar rows to appear as 1pm - 2pm, 2pm - 3pm, 3pm- 4pm, etc.
I have tried the following:
agenda: 'h:mm{ - h:mm}',
axisFormat: 'h:mm{ - h:mm}',
day: 'h:mm{ - h:mm}',
axisFormat: 'h(:mm)tt',
timeFormat: {
agenda: 'h:mm{ - h:mm}'
},
but none of the above, either alone or in combination seem to work for me.
I initialize my calendar as below:
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
firstHour: 9,
minTime: 9,
maxTime: 19,
selectable: true,
unselectAuto: true,
slotMinutes: 60,
weekends: false,
year: current_year,
month: current_month,
date: current_day,
columnFormat: '',
FullCalendar does not provide a "to" time for the axisFormat and therefore the { - h:mm} part of you axisFormat is ignored.
And I don't think there's any way to do it without editing the FullCalendar source code.
But if you are feeling adventurous you could do the following changes in fullcalendar.js around line 3207:
d = zeroDate();
maxd = addMinutes(cloneDate(d), maxMinute);
addMinutes(d, minMinute);
// Add two lines
var toD = cloneDate(d);
addMinutes(toD, opt('slotMinutes'));
slotCnt = 0;
for (i=0; d < maxd; i++) {
minutes = d.getMinutes();
s +=
"<tr class='fc-slot" + i + ' ' + (!minutes ? '' : 'fc-minor') + "'>" +
"<th class='fc-agenda-axis " + headerClass + "'>" +
// Changed line from "formatDate(d, opt('axisFormat')...)" to "formatDates(d, toD, opt('axisFormat')...)"
((!slotNormal || !minutes) ? formatDates(d, toD, opt('axisFormat')) : ' ') +
"</th>" +
"<td class='" + contentClass + "'>" +
"<div style='position:relative'> </div>" +
"</td>" +
"</tr>";
addMinutes(d, opt('slotMinutes'));
// Add line
addMinutes(toD, opt('slotMinutes'));
slotCnt++;
}
Related
I am using this
$('input[name="datefilter"]').daterangepicker({
opens: 'left',
"showDropdowns": true,
autoUpdateInput: true,
autoApply:true,
ranges: {
'All' :["",""],
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 15 Days': [moment().subtract(14, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 6 Months': [moment().subtract(6, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'This Year': [moment().startOf('year'), moment().endOf('year')],
'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
},
locale: {
format: 'DD/MM/YYYY'
}
}, function(start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
It is working fine, but it always shows the range list whenever I refresh the page. I have another text input box with autofocus attribute but always focused on the date range picker after page loades.
See this screenshot
How to prevent this when refreshing the page or show this after clicking the date range picker?
Please help...
I am using moment.js daterangepicker to accept from and to date from user interface.However,whenever I wish to set the date range more than a month or year the calendar dates auto adjust them to one month date range.
I have gone through the documentation and tried attribute maxSpan,autoUpdate,etc.
Ranges for Today,last month,etc are working fine.
I need custom range to accept any date range.
<script src="resources/js/moment/moment.min.js"></script>
<script>
var startDate;
var endDate;
var startDateCount = <%= l_startdatecount%>;
var endDateCount = <%= l_enddatecount%>;
startDateCount = -startDateCount;
endDateCount = -endDateCount;
$(document).ready(function() {
$('#reportrange_right').daterangepicker( {
startDate: moment().subtract(startDateCount, 'days'),
endDate: moment().subtract(endDateCount, 'days'),
minDate: '01/01/2012',
maxDate: '01/01/2050',
dateLimit: {
days: 365
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment()],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'right',
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary',
cancelClass: 'btn-small',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Clear',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
},
function(start, end) {
$('#reportrange_right span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
startDate = start.startOf('day');
endDate = end.startOf('day');
}
);
$('#reportrange_right span').html(moment().subtract(startDateCount, 'days').format('D MMMM YYYY') + ' - ' + moment().subtract(endDateCount, 'days').format('D MMMM YYYY'));
startDate = moment().startOf('day').subtract(startDateCount, 'days');
endDate = moment().startOf('day').subtract(endDateCount, 'days')
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Expected output:
Left calendar selects 2018-07-29 then right calendar can select any date from 2018-07-29 to future.
Actual output:
Left calendar selects 2018-07-29,right calendar only allows dates in August 2019 and vice-versa.
Got a solution from the forum of moment.js!
I got to add linkedCalendars:false and remove
dateLimit: {
days: 365
}
Can somebody explain to me the difference of .weekday() and .format('d') in moment.js?
e.g.
console.log('month: ' + month.format('DD/MM/YYYY'));
let firstDay = moment(month).startOf('M');
console.log('/1 firstDay: ' + firstDay.format('DD/MM/YYYY'));
console.log('/1 firstDay.weekday(): ' + firstDay.weekday());
console.log('/1 firstDay.format("d"): ' + firstDay.format('d'));
firstDay = moment('01/08/2018', 'DD/MM/YYYY');
console.log('/2 firstDay: ' + firstDay.format('DD/MM/YYYY'));
console.log('/2 firstDay.weekday(): ' + firstDay.weekday());
console.log('/2 firstDay.format("d"): ' + firstDay.format('d'));
produces:
month: 09/08/2018
/1 firstDay: 01/08/2018
/1 firstDay.weekday(): 2
/1 firstDay.format("d"): 3
/2 firstDay: 01/08/2018
/2 firstDay.weekday(): 3
/2 firstDay.format("d"): 3
In the pagination example, how do I replace the text at the bottom, "rows" with another word e.g. "products"?
Showing 1 to 10 of 800 rows
becomes
Showing 1 to 10 of 800 products
Ported from issue # 882 on bootstrap-table's issue tracker.
This text is part of bootstrap-table's localizations. English (en-US) is loaded by default.
Solution # 1
Create and include a custom locale
/js/locale/bootstrap-table-en-US-custom.js
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['en-US-custom'] = {
formatLoadingMessage: function () {
return 'Hold your horses...';
},
formatRecordsPerPage: function (pageNumber) {
return pageNumber + ' bananas per page';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' products';
},
formatSearch: function () {
return 'Search';
},
formatNoMatches: function () {
return 'No matching records found';
},
formatPaginationSwitch: function () {
return 'Hide/Show pagination';
},
formatRefresh: function () {
return 'Refresh';
},
formatToggle: function () {
return 'Toggle';
},
formatColumns: function () {
return 'Columns';
},
formatAllRows: function () {
return 'All';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US-custom']);
})(jQuery);
It is also important to note, that the localization settings get merged in to the table settings -meaning that you can simply
Solution # 2 Pass them as an argument in your table settings:
$('#table').bootstrapTable({
// .. your other table settings
pagination: true,
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' rows';
}
});
or you can
var $table = $('#bootstrap-table');
$table.bootstrapTable({
toolbar: ".toolbar",
clickToSelect: true,
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 8,
clickToSelect: false,
pageList: [8,10,25,50,100],
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' ';
}
});
based on jtrumbull`s totally correct answer, I would spent a third one:
Solution # 3 use a locale and merge / overwrite parts of them with your own:
in this example, we will overwrite the already defined "formatShowingRows" function.
// create an array where you store your own translations
var mylocale = {
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Ergebnisse <b>' + pageFrom + '-' + pageTo + '</b> von <b>' + totalRows + '</b>';
}
}
// extend the used locale
$.extend(true, $.fn.bootstrapTable.locales.de, mylocale);
I have a result in milliseconds and I am trying to display it as Hours and Minutes using Momentjs.
var x = 161545000;
var tempResult = moment.duration(x);
var formattedX = tempResult.asHours() + 'h ' + tempResults.minutes() + 'm ';
What is being displayed:
2.2701202777777776h 16m
What I want, but can't seem to format it right:
2h 16m
How about using Math.floor()?
var formattedX = Math.floor(tempResult.asHours()) + 'h ' +
Math.floor(tempResults.minutes()) + 'm ';
Or, better yet, use the Moment#hours() method instead of Moment#asHours():
var formattedX = tempResult.hours() + 'h ' + tempResults.minutes() + 'm ';