Related
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've got the mfpierre:chartist meteor package installed and the mspi:chartistlegend plugin for it installed (both atmosphere packages). I've got the plugin like so:
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend() ]
});
The chart won't render with the "plugins" key/value pair in place. If I remove the "plugins" key/value, the chart renders fine. As far as I can tell, I'm following the documentation. Any help welcome.
I am not using meteor so your mileage may vary but I am using Angular2 and was getting similar errors. The answer for me was to use the legend plugin to get it initialized first and then use it in the Chartist plugin definition like you have done. This feels hacky but its working...
import * as Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-legend';
constructor(){
var tester = new MyLegend(); //without this line, you get 'Chartist.plugins undefined'
}
.... in another method like ngOnInit or something...
new Chartist.Bar('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]
]
}, {
plugins: [ Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill']
}) ]
});
You need to provide an object to .legend() containing names for the legends, like this:
new Chartist.Line('.ct-chart-line', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
},
plugins: [
Chartist.plugins.legend({
legendNames: ['Blue pill', 'Red pill', 'Purple pill'],
})
]
});
More demos here: https://codeyellowbv.github.io/chartist-plugin-legend/
You can also add names in the series like this:
series: [
{ "name": "Money A", "data": [60000, 40000, 80000, 70000] },
{ "name": "Money B", "data": [40000, 30000, 70000, 65000] },
{ "name": "Money C", "data": [8000, 3000, 10000, 6000] }
]
Source
I am working with date-time highchart and I want x-axis tick interval to appear every month(jan-12, Feb-12, Mar-12). But If the data points are less than 4 then the x-axis label starts showing days of month as well (10 dec,24 dec, 7 jan). How do I make sure that even if there are less data points or the graph is zoomed, the tick interval are monthly. Here is the code for x-axis:
xAxis : {
type: 'datetime',
tickmarkPlacement:'on',
dateTimeLabelFormats: {
month: '%b-%y',
},
minRange:1*30*24*60*60*1000,
labels : {
rotation :'280',
align:'right',
style: {
fontFamily : 'Helvetica',
fontSize: '10px'
}
}
}
Thanks in Advance
As mentioned in my earlier comment, the easiest way to get what you've asked for is to set the tickInterval:
xAxis: {
type: 'datetime',
tickInterval:86400000 * 30
}
Example:
http://jsfiddle.net/jlbriggs/Lmfa5v55/
With this setup it doesn't matter what interval your data is in - in the example, it's daily - or if it's irregularly spaced or not.
It doesn't matter what level of zoom, or how many data points, you'll have a tick and label for each month within the bounds of the data.
Try put exact interval tick, and automatic day or month will appear.
You only need format label, after put ticks.
Options.xAxis.tickPositioner = function () {
const ticks = this.series[0].xData;
let result = [];
for (let index = 0; index < ticks.length; index++) {
result.push(ticks[index]);
}
return result;
};
and format xAxis
labels: {
format: "{value:%b-%Y}",
align: "center"
}
to tooltips
tooltip: {
valueSuffix: "",
valuePrefix: "",
xDateFormat: "%B - %Y",
valueDecimals: 0
},
The problem here is that not all the months have 30 days, is better not to set the tickInterval or the minRange. You could try to generate the months at your own, like:
startDate = Date.UTC(2012, 1, 1); //your starting date
// Set the xaxis value as first day of month
for (var i = 0; i < yourData.length; i++) {
var d = new Date();
d.setTime(startDate);
d.setMonth(d.getMonth() + i);
categories.push(d.getTime());
}
Or generate your own categories as shown on Highcharts demo page:
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec' //etc.
],
},
See a working demo of first option at: http://jsfiddle.net/gjkde5np/1/
Extracted from: How to set PointIntervals per month in HighChart
You could also check the code from highcharts "Time series with irregular intervals" http://www.highcharts.com/demo/spline-irregular-time . Here they use the [Date.UTC(1970, 9, 21), 0], [Date.UTC(1970, 10, 4), 0.28]
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.
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?