Can't seem to get unix timestamps working with moment.js...
date_create is equal to my php unix timestamp in this case and I want to use that as the startDate, minDate, and a few other places... I am not getting an error, but it is displaying as 'December 31, 1969 # 7:00 pm' which is obviously not correct.
What am I doing wrong here? The goal is to have the correct date/time shown as computers time from the utc timestamp given.
For instance 1401079499 is 05 / 26 / 14 # 4:44:59am UTC, but this would show as May 26, 2014 12:44:59 am on my own computer being gmt-4
var date_create = $('#dashboard-report-range #date-display').html(); //equals 1401079499
//date range stuff
$('#dashboard-report-range').daterangepicker({
opens: 'left',
startDate: moment.unix(date_create).startOf('day'),
endDate: moment().endOf('day'),
minDate: moment.unix(date_create).startOf('day'),
maxDate: moment().endOf('day'),
showDropdowns: false,
showWeekNumbers: true,
timePicker: true,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'All': [moment.unix(date_create).startOf('day'), moment().endOf('day')],
'Today': [moment().startOf('day'), moment().endOf('day')],
'Yesterday': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
'Last 7 Days': [moment().subtract('days', 6).startOf('day'), moment().endOf('day')],
'Last 30 Days': [moment().subtract('days', 29).startOf('day'), moment().endOf('day')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
},
buttonClasses: ['btn'],
applyClass: 'btn-sm btn-success',
cancelClass: 'btn-sm btn-default',
format: 'MM/DD/YYYY',
//format: 'MM-DD-YY',
separator: ' to ',
locale: {
applyLabel: 'Apply',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom Range',
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) {
$('#dashboard-report-range #date-display').html('<span class="ddate_start">' + start.format('MMMM D, YYYY [#] h:mm a') + '</span> <i class="fa fa-arrows-h"></i> <span class="ddate_end">' + end.format('MMMM D, YYYY [#] h:mm a') + '</span>');
$('#dashboard-report-range #date-start').html( start.unix() );
$('#dashboard-report-range #date-end').html( end.unix() );
dt.draw();
}
);
$('#dashboard-report-range #date-display').html('<span class="ddate_start">' + moment.unix(date_create).startOf('day').format('MMMM D, YYYY [#] h:mm a') + '</span> <i class="fa fa-arrows-h"></i> <span class="ddate_end">' + moment().endOf('day').format('MMMM D, YYYY [#] h:mm a') + '</span>');
$('#dashboard-report-range').show();
};
EDIT - solution :
I had forgotten to change the id I grab the unix timestamp from... $('#dashboard-report-range #date-create').html(); With that change everything works as it should.
Multiply the timestamp by 1000.
PHP returns timestamp in seconds, but JS understands it as milliseconds.
Related
With great shame, I've now spent several hours across multiple days only to continue failing to figure this one out:
How can I create a flatpickr onChange event where the minDate (or minTime?) of the second datetime input is +x hours or minutes relative to the first datetime input selection? I can't figure out how to set a relative increase less than one full day.
These config options are successfully forcing the second input's minDate to be that of the first input's datetime output down to the minute, but will accept the very same time:
// Start Date and Time: input_144_5
const startDate = $('#input_144_5').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
defaultDate: new Date(),
onChange: function(selectedDates, dateStr, instance) {
endDate.set('minDate', new Date(dateStr))
}
});
// End Date and Time: input_144_6
const endDate = $('#input_144_6').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
});
While this one is successfully setting the second input's minimum to +1 full day:
// Start Date and Time: input_144_5
var startDate = $('#input_144_5').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
defaultDate: new Date(),
onChange: function(selectedDates, dateStr, instance) {
endDate.set('minDate', new Date(dateStr).fp_incr(1))
}
});
// End Date and Time: input_144_6
var endDate = $('#input_144_6').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
altInput: true,
altFormat: "D, F j \\a\\t h:i K",
});
Is there any way to set—or restrict—fp_incr() in a way that only increases the minute value by +1, or maybe targets the minutes portion of the dateStr exclusively?
FlatPickr documentation here if helpful.
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
}
I am using fullcalendar plugin to get and display holidays of a month via Ajax. The problem I am having, is that the method that retrieves the holidays accepts only a year and a month as parameter, not a date range.
When using month view of fullcalendar, the start and end parameter ranges from feb 23rd and Apr 6th. I need it to range from Mar 1st to Mar 31st. That way, I can only get year and month part to call the method.
This is what I tried but without success:
$('#calendar').fullCalendar({
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
events: '/get_month_holidays',
start: {
month: new Date((new Date()).getFullYear(), (new Date()).getMonth(), 1)
},
end: {
month: (new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 1)) - 1
},
buttonText: {
today: 'hoy'
}
})
Any help will be appreciated,
Thanks
Jaime
Finally I used:
eventSources: [
{
url: '/get_month_holidays',
type: 'POST',
data: function() {
var fecha = $('#calendar').fullCalendar('getDate');
return {
month: fecha.getMonth() + 1,
year: fecha.getFullYear()
}
}
}
],
And it worked. Thanks anyway.
Jaime
jstuardo's solution adds new parameters to the request so you end up with something like this:
http://your.api.com/events?month=8&year=2015&start=2015-07-27&end=2015-09-07
Which is quite confusing and requires you to change the API accordingly.
Better solution would be to change the default start and end parameters. You can achieve that using something like this:
{
url: baseUrl + '/events',
startParam: null, //resetting default fullcalendar parameter
endParam: null, //resetting default fullcalendar parameter
data: function() {
var date = $('#gc-calendar').fullCalendar('getDate')._d;
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
firstDay = $filter('date')(firstDay, 'yyyy-MM-dd');
lastDay = $filter('date')(lastDay, 'yyyy-MM-dd');
//AngularJS way of changing the date format to yyyy-mm-dd
return {
start: firstDay,
end: lastDay
}
}
}
This way your request looks like this:
http://your.api.com/calendar_orders?start=2015-08-01&end=2015-08-31
You can format the date to 'yyy-MM-dd' using any method you like. You can find a bunch of them here:
Get String in YYYYMMDD format from JS date object?
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++;
}