We Keep Coding

How to display months in the correct sequence?

How to get months like in the picture? Now I see - feb20
const chartOptions = {
options: {
chart: {
id: "basic-bar"
},
xaxis: {
labels: {
formatter: function(value, timestamp, index) {
return moment(new Date()).format("MMM YYYY")
}
}
}
},
series: [
{
name: "Доход",
data: [onSumArr() !== undefined ? onSumArr() : 0]
}
]
};
Now I do like this, and it does not work.

Change your xaxis.labels.formatter function to
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("MMM YYYY")
}

Your problem arises here
return moment(new Date()).format("MMM YYYY")
Date() initializes as the current date month, now February. You need to set the month of the date with date.setMonth([0-11]). timestamp or index in the anonymous function parameters could provide that.
I'm not an expert in apexCharts, but you could replace your formatter with this:
formatter: function(value, timestamp, index) {
var startDate = moment(new Date('2019-12-01T00:00:00'));
startDate.add(index, 'months');
return moment(startDate).format("MMM YYYY")
}

How can I render text on specific days in Fullcalendar v4?

I'm new in using Fullcalendar io. For example, I want to render the "Hello World" on January 1, 15, and 30 2020. How do I do that in Fullcalendar v4?
dayRender: function(dayRenderInfo) { dayRenderInfo.el.innerHTML = "<p>Hello World</p>"; }
Want to achieve something like this. Just a plain text:

You can achieve that with dayRender function.
$('#my_calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'some-event',
start: '2020-01-01 10:00',
end: '2020-01-01 19:00',
}],
dayRender: function(date, cell) {
cell.append('<div class="custom-class">Hello World</div>');
},
});
EDIT:
On version 4 it changed to an object (from their docs):
So you should compare the column date to you dates, for example:
dayRender: function(info) {
let colDate = new Date(info.date);
let myDates = [
new Date('2020-01-01'),
new Date('2020-01-15'),
new Date('2020-01-30'),
];
myDates.forEach((date) => {
if (colDate.getYear() === date.getYear() &&
colDate.getMonth() === date.getMonth() &&
colDate.getDate() === date.getDate()) {
info.el.innerText = 'hello'
}
});
}

How to set maxDate is last day of december on current year?

I have this date range datepicker :
$(function () {
//date picker range
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#<%= TextBox1.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: MinDateManipulation(),
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#<%= TextBox2.ClientID %>").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: DisableMonday,
maxDate: '+2M',
numberOfMonths:1
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
It work when i tried to disable date from 2 months after current date, but the purpose is, to disable date in January 1st every next year after current year.
for example : current date [11/3/2018]
I want to disable date to chose after last day of December every current year, with maxDate [31/12/2018].
But how do we set dynamically for the value of the maxDate? without update the value of the year manually with my daterange condition script?

It's not clear the range you are trying to capture, yet you can do a lot with what you already have.
One way would be to set it to a string format:
var yr = $.datepicker.formatDate("yy", new Date());
var dec31 = "12/31/" + yr;
....({
maxDate: dec31,
})
this will get the current Year (2018) and create a string that can be used as the max date: 12/31/2018. This will remain dynamic and update each year.
You could also define a number of days in the year as holidays. Lots of things you can do.
Maybe this example will help clear up a few things.
$(function() {
var holidays = {
2018: {
11: {
12: [
false,
"holiday",
"Veterans Day Observed"
],
22: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
},
2019: {
1: {
1: [
false,
"holiday",
"New Year's Day"
],
21: [
false,
"holiday",
"Martin Luther King Jr. Day"
]
},
2: {
18: [
false,
"holiday",
"Presidents' Day"
]
},
5: {
27: [
false,
"holiday",
"Memorial Day"
]
},
7: {
4: [
false,
"holiday",
"Independence Day"
]
},
9: {
2: [
false,
"holiday",
"Labor Day"
]
},
10: {
14: [
false,
"holiday",
"Columbus Day"
]
},
11: {
11: [
false,
"holiday",
"Veterans Day"
],
28: [
false,
"holiday",
"Thanksgiving Day"
]
},
12: {
25: [
false,
"holiday",
"Christmas Day"
],
31: [
false,
"holiday",
"New Year's Eve"
]
}
}
};
function disableDays(d) {
var result = [true, ""];
var yr = $.datepicker.formatDate("yy", d),
mo = $.datepicker.formatDate("m", d),
dy = $.datepicker.formatDate("d", d);
if ($.datepicker.formatDate("D", d) == "Mon") {
result[0] = false;
}
if (holidays[yr] !== undefined) {
if (holidays[yr][mo] !== undefined) {
if (holidays[yr][mo][dy] !== undefined) {
console.log("Holiday:", yr, mo, dy);
result = holidays[yr][mo][dy];
}
}
}
return result;
}
var dateFormat = "mm/dd/yy",
from = $("#client-id-1").datepicker({
//defaultDate: "+1w",
changeMonth: true,
minDate: 0,
beforeShowDay: disableDays,
maxDate: '+1y',
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#client-id-2").datepicker({
//defaultDate: "+1w",
changeMonth: true,
beforeShowDay: disableDays,
maxDate: '+2m',
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Client 1: <input type="text" id="client-id-1"></p>
<p>Client 2: <input type="text" id="client-id-2"></p>

You can use moment.js and use my code to get max date:
function _getMaxDate() {
const today = moment().startOf('day')
const lastDayOfYear = moment().endOf('year').startOf('day')
return lastDayOfYear.diff(today, 'days')
}

How to disable occupied dates in daterangepicker JS and Laravel

I'm trying to implement a resort booking where I can check if a specific date is still available or not by using bootstrap daterangepicker but I can't figure out how to do this. I got this thread but it is not using daterangepicker.
Note: I'm also using laravel5.1 so maybe this can help the problem.
Database fields
id
name
Place
start_time
end_time
My JS Code Setup with daterangepicker
$(function () {
$('.time').daterangepicker({
"minDate": moment('{{ date('Y-m-d G') }}'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
}
});
});

You want to ideally, use the isInvalidDate configuration option when creating a new instance of the daterangepicker.
isInvalidDate
var disabledDates = {{ $disabledDates->toJson(); }};
$(function () {
$('.time').daterangepicker({
"minDate": moment('{{ date('Y-m-d G') }}'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
},
"isInvalidDate": function (date) {
return disabledDates.indexOf(date) != -1;
}
});
});
The $disabledDates php variable in this instance, is assumed to be a collection of disabled dates, all as their string formats.

Assume you have a start_date and a end_date.
$(function() {
var start_date = '2018-3-1';
var end_date = '2018-3-10';
$('input[name="daterange"]').daterangepicker({
"minDate": moment('2018-1-1'),
"timePicker": true,
"showDropdowns": true,
"timePicker24Hour": false,
"timePickerIncrement": 5,
"autoApply": true,
"locale": {
"format": "MM/DD/YYYY hh:mm:ss A",
"separator": " — ",
},
"isInvalidDate": function (date) {
var is_valid = true;
#foreach($dates as $date)
if(moment(date).isBetween($date->start_date, $date->end_date, 'day', '[]')){
is_valid = false;
}
#endforeach
return is_valid;
}
});
});
Then you can't select the day between start_date and end_date.

How to convert string into date while setting custom filters in jquery grid?

This is one of the columns in my grid-
{ name: 'DueDate',
index: 'DueDate',
sortable: true,
sorttype: 'date',
editable: false,
width: 125,
formatter: 'date',
searchoptions: {
dataInit: function(element) {
$(element).datepicker({
dateFormat: 'mm/dd/yy'
});
}
}
}
I am trying to setup a custom filter like this-
var now = moment();
var formattedDate = now.format('MM/DD/YYYY');
var date = Date.parse(formattedDate);
var f = { groupOp: "OR", rules: [] };
f.rules.push({ field: 'DueDate', op: 'lt', data: date});
$grid[0].p.search = true;
$.extend($grid[0].p.postData, { filters: JSON.stringify(f) });
$grid.trigger('reloadGrid');
'DueDate' returned is a date string. so i need to parse it before i can compare. How do i do this? Is there even a way to do it?
UPDATE:
DueDate is a Datetime object and the value from the controller is
/Date(-62135568000000)/(json object) This is formatted into 'mm/dd/yy' format and
this converts to a date string and looks like normal date. I have a
drop down menu item with all the filter criteria. I click on one of
the menu-items, which is to select all the rows that have DueDate <
Today's date for which i need to parse 'DueDate' field's value.
For Testing, when i use this-
var now = moment();
var formattedDate = now.format('MM/DD/YYYY');
var rowdata = $grid.jqGrid('getRowData');
var dueDate = rowdata[0].DueDate; //just picking first row's due date
alert("DueDate: " + dueDate);//alerts "1/1/2015"
var d = Date.parse(formattedDate);
//var ts = dueDate.getTime(); --I get an error here- getTime() not supported for this object.
//this works fine- & I need something like this for filters
if (Date.parse(dueDate) < d) {
alert("It is due");
}
var f = { groupOp: "AND", rules: [] };
f.rules.push({ field: 'DueDate', op: 'lt', data: d });
f.rules.push({ field: 'HasMapping', op: 'eq', data: true });
$grid[0].p.search = true;
$.extend($grid[0].p.postData, { filters: JSON.stringify(f) });
$grid.trigger('reloadGrid');