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")
}
Related
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'
}
});
}
I am getting this error while trying to modify the values in the following ways
const columns = [
{ label: 'Title', key: 'title' },
{ label: 'Start', key: 'start_time',format: (value, { all_day }) => <span className="start-time">{value.format(timeFormat(all_day))}</span>},
{ label: 'End', key: 'end_time'},
{ label: 'Status', key: 'status', format: (value) => <Status status={value} /> }
]
and this is throwing an error I have mentioned.
where timeFormat is
const timeFormat = (allDay) => allDay ? 'MM/DD/YYYY' : 'MM/DD/YYYY [#] h:mma'
Although I am using the same at other positions where it is working fine. Please help where I am doing wrong. I am getting this error while formatting the dates means while showing data in a table this shows the error.
.format() is part of Moment.js so you should include it in your app then use it:
const value = "2019-01-16T05:00:00.000Z";
const timeFormat = (allDay) => allDay ? 'MM/DD/YYYY' : 'MM/DD/YYYY [#] h:mma'
console.log(moment(value).format(timeFormat()))
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
The purpose of this code is to include only the dates within the array and to activate the first date as initial in the datepicker.
I was able to get the first key of the array, which in the case is the first date I need to be as initial.
I believe the problem is in the format of the date, since it is deconfiguring the datepicker.
Follow my code:
JAVASCRIPT
// datepicker
var availableDates = {
"19102017": [
"09:00",
"09:15",
"09:45",
"11:45",
"14:00"
],
"20102017": [
"09:30"
],
"21102017": [
"14:00"
],
"22102017": [
"11:45"
],
"23102017": [
"09:00"
],
"24102017": [
"09:15"
],
"25102017": [
"09:30"
],
"26102017": [
"09:45"
],
"27102017": [
"10:00"
],
"28102017": [
"10:15"
]
};
getMinDate(Object.keys(availableDates)[0]);
function returnavailableDates(){
return availableDates;
}
function getMinDate(date) {
console.log(date);
return date;
}
function checkDateis(d) {
var check = false;
$.each(availableDates, function( key, value ) {
if (d === key) {
check = true;
}
});
if(check) return true;
}
function available(date) {
var dmy = $.datepicker.formatDate('dmyy', date);
var check = checkDateis(dmy);
if (check) {
return [true, "", "Available"];
}
else {
return [false, "", "unAvailable"];
}
}
$("#datepicker").datepicker({
showOtherMonths : true,
selectOtherMonths : true,
minDate : 0,
nextText : '',
prevText : '',
dateFormat : 'dd-mm-yy',
beforeShowDay : available
})
.datepicker('setDate', getMinDate(Object.keys(availableDates)[0]))
fiddle for tests: https://jsfiddle.net/n2n4udkf/
Yes the problem is format of the date being passed to setDate.
You can fix the issue by formatting the date before passing it to setDate
function formatDate(date) {
return date.slice(0,2) + '-' + date.slice(2,4) + '-' + date.slice(4);
}
$("#datepicker").datepicker({
showOtherMonths : true,
selectOtherMonths : true,
minDate : 0,
nextText : '',
prevText : '',
dateFormat : 'dd-mm-yy',
beforeShowDay : available
})
.datepicker('setDate', formatDate(getMinDate(Object.keys(availableDates)[0])))
You should just change dateFormat in datepicker's init options:
$("#datepicker").datepicker({
...
dateFormat : 'ddmmyy',
...
})
Documentation: formatDate().
Added: Also, there is an error in available() function:
var dmy = $.datepicker.formatDate('dmyy', date);
It should be:
var dmy = $.datepicker.formatDate('ddmmyy', date);
It works now, because all of your date have two digits in both day and month components, but it will fail with dates like 01122017, for example: this function will produce 1122017 key and checkDateis(dmy) call will always return false.
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');
I am trying to sort date in the dojo grid. But the sorting is not happening properly, it considers date as string and sorting doesn't work. Is there anyway that would help me?
My date format: EE MMM dd yyyy HH:mm:ss z
My code:
myStore = new ItemFileWriteStore({
data:storeData
});
myStore.comparatorMap = {};
myStore.comparatorMap["scan_date"] = function(a,b){
var af = dojo.date.locale.parse(a,{datePattern:"dd/MM/yyyy hh:mm:ss",selector:"date"});
var bf = dojo.date.locale.parse(b,{datePattern:"dd/MM/yyyy hh:mm:ss",selector:"date"});
var c = dojo.date.compare(af, bf);
return c;
}
// myStore.comparatorMap = {};
// myStore = new ObjectStore({ objectStore:new Memory({ data: data }) });
grid = new DataGrid({
store: myStore,
query: { id: "*" },
queryOptions: {},
structure: [
{ type: "dojox.grid._RadioSelector" },
[
// {name:'S.No.', field: 'Id', width: '47px'},
{name:"Client Name",field:"client_name",width: "auto"},
{name:"Contractor Name",field:"contractor_name",width: "auto"},
{name:"Barcode Number",field:"barcode_number",width: "auto"},
{name:"Replacement Seal Number",field:"container_number",width: "auto"},
{name:"Container Number",field:"container_no",width: "auto"},
{name:"Address",field:"address",width: "auto"},
{name:"Scan Date & Time",field:"scan_date",datatype:"date",width: "auto",formatter:formatDate},
{name:"Contractor Remarks",field:"contractor_remarks",width: "auto"}
]
]
}, "grid");
grid.startup();
});
As your date format is
EE MMM dd yyyy HH:mm:ss z
you might need to change your,
dojo.date.locale.parse(a,{datePattern:"dd/MM/yyyy hh:mm:ss",selector:"date"});
to have proper date format like below,
dojo.date.locale.parse(a,{datePattern:"EEE MMM dd yyyy HH:mm:ss Z",selector:"date"});