Why do I get an error with Date formatting in sapUI5? - sapui5

I get the error message Uncaught TypeError: Cannot read property 'group' of undefined when formatting a date in my UI5 code. I have tried using pattern and oDate.parse() but that doesn't return the date in MM/DD/yyyy HH:mm:ss format.
Here is the function that is doing the formatting
getSomeDate: function (sDate) {
var oDate = DateFormat.getDateTimeInstance({
format: "MM/DD/yyyy HH:mm:ss",
source: {
pattern: 'YYYYMMDDhhmmss'
}
});
return oDate.format(sDate);
},
The expected result is date in the format MM/DD/yyyy HH:mm:ss.

Expected date format : MM/DD/yyyy HH:mm:ss.
Source date format: new Date() object
getSomeDate: function (sDate) {
var oDate = DateFormat.getDateTimeInstance({
pattern: 'MM/dd/yyyy hh:mm:ss
});
return oDate.format(sDate);
}
If you directly want to try this out in console, you can use below code.
function getSomeDate(sDate) {
var oDate = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: 'MM/dd/yyyy hh:mm:ss'
});
console.log(oDate.format(sDate));
}
getSomeDate(new Date());

If you want to format a date string you should use a DateTime type.
getSomeDate: function (sDate) {
var oType = new sap.ui.model.type.DateTime({
pattern: "MM/dd/yyyy hh:mm:ss",
source: {
pattern: "yyyyMMddhhmmss"
}
});
return oType.formatValue(sDate, "String");
},

if you want to use a specific pattern for formatting a date, you should use the "pattern" property. This will format your date according to the defined pattern.
The format property only allows pattern symbols. If you use a symbol that is not a valid pattern; you'll get the error "Cannot read property 'group' of undefined".
From the spec:
The format string does contain pattern symbols (e.g. yMMMd or Hms) and will be converted into the pattern in the used locale, which matches the wanted symbols best.
The symbols must be in canonical order, that is: Era (G), Year (y/Y), Quarter (q/Q), Month (M/L), Week (w/W), Day-Of-Week (E/c), Day (d/D), Hour (h/H/k/K), Minute (m), Second (s), Timezone (z/Z/v/V/O/X/x).
So if you use format the "system" tries to format the passed date according to current user settings. Using pattern will strictly follow your defined pattern.
Regards

Related

how to get only day number from date in flutter

I am trying to get day from date, and date comes from the api response, api response look like this
"data": [
{
_id: 6116c2e12760f71630342604,
username: 'abc',
Date: '2021-08-13',
},
{
_id: 6119ba9162069c32ccdf11c3,
username: 'acv',
Date: '2021-08-15',
}
]
i am trying to do it like this
date=Response.data['data']['Date']); //if i get date here 2021-08-15
day=date.split('-') //then will split it [2021,08,05]
day=date[2] //and then will get the day 05
but it is not working, it sends this error
type 'String' is not a subtype of type 'int' of 'index'
when i print this line day=Response.data['data']['Date']); it send same error, it is not getting date, but when i print onResponse.data it prints the api response.
please help how to do this
If your date String is in standard ISO format, simply use DateTime.parse then you can get the day easily, it would also allow you to check that the date is valid (parse will fail if date is not valid, see documentation):
String dateStr = Response.data['data']['Date']);
DateTime dateObj = DateTime.parse(dateStr);
print(dateObj.day);
If this is a custom format, you could use DateFormat from intl package (documentation):
String dateStr = Response.data['data']['Date']);
DateTime dateObj = DateFormat('yyyy-MM-dd').parse(dateStr);
print(dateObj.day);
you should use date.split("-").last and actually your index is wrong it should be day=date[2]
Let's try or you will use day[2]
day=Response.data['data']['Date']); //if i get date here 2021-08-15
day=date?.split('-').last; //then will split [05]
print(day) //and then will get the day 05

.timeFormat(%b %Y) not giving me the right dates

I'm a beginner with d3.js. The goal for now is to take the date column from "2018-11-01" to "Nov 18".
The dates start from "2016-11-01" to "2020-08-01" and each date in between is only the first of each month.
For example:
"2016-11-01",
"2016-12-01",
"2017-01-01",
"2017-02-01",
"2017-03-01",
"2017-04-01",
"2017-05-01",
The code I've used is below:
var format = d3.timeFormat("%b %Y");
var data = d3.dsv(",", dsvPath, function (d) {
return {
//Year : getYear(new Date(+d.year,0,1)),
date: format(new Date(d.date)),
['Catan=count']:+d['Catan=count'],
['Dominion=count']:+d['Dominion=count'],
['Codenames=count']:+d['Codenames=count'],
['Terraforming Mars=count']:+d['Terraforming Mars=count'],
['Gloomhaven=count']:+d['Gloomhaven=count'],
['Magic: The Gathering=count']:+d['Magic: The Gathering=count'],
['Dixit=count']:+d['Dixit=count'],
['Monopoly=count']:+d['Monopoly=count']
//['Running Total'] : +d["running_total"]
};
}).then(function (data) {
console.log(data[0]);
minDate = d3.min(data,function(d){console.log(d); return d.date;});
maxDate = d3.max(data,function(d){console.log(d); return d.date;});
console.log(minDate);
However, for the minimum date, I get April 2017 instead of November 2016. The max date is May 2020 instead of September 2020.
When I read in the data as is without the data formatting, the minDate and maxDate are correct. As soon as I format, however, Oct 2016, which doesn't exist in the dataset, is somehow logged twice.
Furthermore, the data in the console stops at "July 2020": there's no August and Sept 2020. I'm honestly very puzzled.
Any help would be much appreciated!
Thank you!
Converting to a Date via the Date() constructor is notoriously tricky. Thankfully, since D3 gives us methods to go from a date to a string, it also has the reverse, going from a string to a date.
Our process will be twofold:
For each string in a certain format, convert to Date with d3.timeParse().
Convert each date to your desired string format.
(1.) (2.)
"2016-01-01" 🡒 Date<2016-01-01T00:0O> 🡒 "January 2016"
d3.timeParse d3.timeFormat
You already have (2.) in your code, so we need (1.):
var toDate = d3.timeParse("%Y-%M-%d");
var format = d3.timeFormat("%b %Y"); // (2.)
var data = d3.dsv(",", dsvPath, function (d) {
return {
date: format(toDate(d.date)),
};
})

ngx-bootstrap datepicker output format is not ISO format

The default output format of ngx-bootstrap datepicker is not ISO format as documented.
I would welcome this format but the actual format that I get is:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
Stackblitz Example
I know there are ways to post process the format but this format seems weird for a default output format. Does anyone have experience with this?
In vanilla JavaScript there is a 'Date' object, the default output of which gives you the line you are seeing:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
In physical memory, your Date object is actually being stored as the number of milliseconds since "January 1, 1970, 00:00:00" which using our above line is actually "1596410220000" milliseconds.
You can read the full specifications for the 'Date' object here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates
Meanwhile, to answer your question more specifically, your date picker is not giving the output you listed but instead applying its date to a 'Date' object (newDate). You are then setting another 'Date' object (updatedDate) to be equal to the Date object assigned by your date-picker (newDate).
This is done here:
onValueChange(newDate: Date) {
this.updatedDate = newDate;
}
So in memory your updatedDate is now represented as "1596410220000" milliseconds. When you output that 'Date' object to your HTML your browser is going to use the default output for the 'Date' object, giving you:
Sun Aug 02 2020 19:17:00 GMT-0400 (Eastern Daylight Time)
So there are two solutions that you can use if you want to get that Date into a different format.
First you can call a method on your newDate to return a different formatted string. For example, if we wanted to output it as the ISO string that you were looking for originally we change this:
export class AppComponent implements OnInit {
myDateValue: Date;
updatedDate: Date;
ngOnInit() {
this.myDateValue = new Date();
}
onValueChange(newDate: Date) {
this.updatedDate = newDate;
}
To this:
export class AppComponent implements OnInit {
myDateValue: Date;
updatedDate: String;
ngOnInit() {
this.myDateValue = new Date();
}
onValueChange(newDate: Date) {
this.updatedDate = newDate.toISOString();
}
First we changed "updatedDate" to be a string object and we called the method "toISOString()" on our "newDate" (which is the Date returned from our date-picker). This gives us the ISO formatted string, which for our example is:
2020-08-02T23:17:00.000Z
The other option is to simply apply formatting to your date in your angular DatePipe. For example, if we change this:
</div>
Updated Date: {{updatedDate}}
</div>
To this:
</div>
Updated Date: {{updatedDate | date:"shortTime"}}
</div>
We would be applying the shortTime format which is "h:mm a" or for our example:
7:17 PM
You can read the full list of angular date formats here: https://angular.io/api/common/DatePipe
To summarize:
Vanilla JavaScript (not angular or ngx-bootstrap) is controlling the output format for the "Date" object here. While the output looks weird, the variable itself is not stored in that format but in milliseconds (UNIX epoch time). You can call methods on a Date object to get various formats (including ISO, UTC, etc) or you can format from angular by passing a format command along the datepipe.

Flatpickr and Moment.js unexpected date format

I'm using the following instantiation code for Flatpickr.
$("#entry_date_time").flatpickr({
enableTime: true,
altInput: true,
defaultDate: moment().format("YYYY-MM-DD HH:MM:SS"),
dateFormat: "YYYY-MM-DD HH:MM:SS",
minuteIncrement: 1
});
The issue I'm having is that moment().format("YYYY-MM-DD HH:MM:SS"); gives me the right data but the output of $("#entry_date_time").val() is equal to
2017201720172017-JanJan-SatSat 0000:JanJan:0000
instead of the expected format I provided.
Any ideas as to what could be causing this would be great, thanks for any help!
Flatpickr has its own formating tokens that are different from the ones supported by moment. But the good thing is you can use parseDate and formatDate config options to support custom formatting tokens.
/* A custom datestring parser */
parseDate: (date: string, format: string) => Date;
/* Allows using a custom date formatting function instead of the built-in. Generally unnecessary. */
formatDate: (date: Date, format: string, locale: Locale) => string;
Example with moment.js compatible tokens
https://jsfiddle.net/armujahid/pwqhznj0/
const fp = flatpickr(".date", {
altInput: true,
dateFormat: "YYYY-MM-DD",
altFormat: "DD-MM-YYYY",
allowInput: true,
parseDate: (datestr, format) => {
return moment(datestr, format, true).toDate();
},
formatDate: (date, format, locale) => {
// locale can also be used
return moment(date).format(format);
}
});
Reference: my comment at https://github.com/flatpickr/flatpickr/issues/1549#issuecomment-537939826
Update: this snippet has also been added in official docs
Based on the output, and looking at the flatpickr docs for date and time, it seems that only single characters are expected in the format instead of multiple ? For example, the 4 Y's would explain the year being repeated 4 times, the month twice, etc.
The dateFormat that you need should probably be:
dateFormat: "Y-M-D H:i"
...however, I do NOT see a formatting option for the seconds portion of the time by flatpickr?
Update on the seconds:
There is a flatpickr feature request for the seconds capability.

Plot a date in x-axis in dhtmlxChart(DhtmlxSuite library)

I am trying to work with DHTMLxChart and display the date values in x-axis.
Input is in Date format origDate= "Sat Jul 02 08:30:00 EDT 2016".
which I tried to format as String
DateFormat
formatter = new SimpleDateFormat("dd/MM/yy");
String date = formatter.format(origDate); (02/07/16)
I tried implementing the below template to display the date in x-axis:
xAxis:{
template:function(obj){
return dhtmlx.Date.date_to_str("%d/%m/%Y")(obj.$unit);
},
value: function (obj) {
return dhtmlx.Date.str_to_date("%m/%d/%Y")(obj.date);
},
units:{
start:new Date(2016,5,29),
end:new Date(2016,6,10),
next:function(d){
return dhtmlx.Date.add(d, 1, "day");
}
}
}
In spite of that it calculates the date values as “0.01756222” (performs division of 02/07/16) and throws an error- “Uncaught TypeError: date.split is not a function”.
I am not able to understand why the date value is calculated.
xAxis configuration looks correct. Probably "date" properties of data items are not correct. Try to check that "obj.date" in "value" method is a string in "%m/%d/%Y" format.