I'm using vue.js v2. From my api I get an object with some date fields in ISO format but vue.js is not correctly displaying those value in an input tag.
<input type="date" class="form-control" v-model="lastPortalInvoiceDate">
Value found via the vue debug extension in Edge
"2022-02-06T23:00:00Z"
Value returned in JSON from api
{
"data": {
"portalInvoiceNumberPrefix": "I-{{BY}}-",
"portalInvoiceFilePrefix": "ABC",
"lastPortalInvoiceNumber": 1,
"lastPortalInvoiceDate": "2022-02-06T23:00:00Z",
"nextBookYearSwitchDate": "2022-02-10T23:00:00Z",
"id": 1,
"value": 1
},
"tenantId": 1,
"responseType": "ok",
"responseMessages": [
"Successfully read PortalInvoiceConfig"
]
}
Select a date with datepicker and see the changes in your data. You will see the output in format 'yyyy-mm-dd'.
You must format your date. For this, you can split your time string to parse date only.
yourDateStr = yourDateStr.split('T')[0]; //if your date is "2022-02-06T23:00:00Z" format
Parsing with new Date(yourDateStr) will cause you trouble setting the right time zone. So, if you want a simple solution you could do just parse the date.
Related
I'm using React running Tabulator 0.18.1. I have a timestamp formatted in ISO 8601 (ex. 2022-05-08T03:24:19.991+00:00) that I'd like to be converted into mm/dd/yyyy.
This is what I'm doing to set up the column data and formatter:
var columns = [
{
title: "Last Seen", field: "attributes.lastSeen", width: 200, formatter: "datetime", formatterParams: {
inputFormat: "iso",
outputFormat: "mm/dd/yyyy",
invalidPlaceholder: "(invalid date)",
timezone: "America/Los_Angeles",
}
}
]
My problem is that Tabulator prints (invalid date) in the table, instead of the converted date. I have luxon 2.3.2 installed, and am getting no errors regarding that, just the invalid date. I'm actually not getting any errors in the console at all, so I'm having trouble diagnosing this. I've tried looking for other possible inputFormats that might work, but I've yet to find anything.
Any recommendations on how to get this ISO time converted to mm/dd/yyyy? Hopefully I covered everything, but if any additional detail is need, just ask. Thank you all very much!
I'm assuming that the type of lastSeen is ISO string in your input data.
Working Demo: https://codesandbox.io/s/valid-date-from-iso-f06hc2?file=/components/Home.js
I used a fake data for the above demo which you can find in data.js inside components folder.
Hope it helps!
I am trying to set the date to date picker but not able to set the date.
bellow is my chunk of sencha touch code.
this.scheduledDatePicker = Ext.create('Ext.field.DatePicker', {
//label: 'To',
//labelAlign: 'right',
//cls: 'form-block',
value: new Date(),
flex: 2.6,
});
and I am setting value after page load or get values from the database as using below code. I tried this many was as you can see commented code. but cant able to set this value.
var date= Ext.Date.format(Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s"), "d/m/Y");
//var date= Ext.Date.parse(this.rec.get('bookingDateTime'));
//var date= this.rec.get('bookingDateTime');
this.scheduledDatePicker.setValue(date);
can anyone tell me why my code is not working or any solution for this issue?
A datefield accepts a javascript date, however it seems you don't provide one.
You should check what this.rec.get('bookingDateTime') returns, and how to modify that field in such a way that you get a javascript date.
I expect that you already have a model, where you could specify that field to be of type date with a certain date format:
Ext.define('MyModel', {
fields: [{
name: 'bookingDateTime',
type: 'date',
dateFormat: 'Y-m-d H:i:s' // specify format that is received from the server
}]
});
Then ExtJS will do the conversion for you and you could just use setValue without any parsing:
this.scheduledDatePicker.setValue(this.rec.get('bookingDateTime'));
If you don't have a model already, you can still read the string from bookingDateTime and parse it now and then and put it into the picker:
var date= Ext.Date.parse(this.rec.get('bookingDateTime'), "Y-m-d H:i:s");
console.log(date); // <- if date is null, format is not specified correctly.
this.scheduledDatePicker.setValue(date);
In both cases, console logging the interim result can help pinpoint down the issue: most of the time, the "parsed date" is null, because the format string does not match the date format received from the server.
I have a form with several fields. One of those fields has xtype of datefield. Values for this form come from a json file, which looks like so:
{"field_1":"text value", "field_2": "2017-08-16T21:00:00.000Z"}
However, when I do:
form.setValues(json);
only the first field is set. The second datefield, which is defined like:
{
"xtype":"datefield",
"name": "field_2"
}
is not set for some reason. What is wrong with that and how can I fix it?
Because JSON does not support javascript dates natively, the value in field_2 is a string, not a javascript date.
While a string can represent a date, there are a variety of formats. In this case the string is in a format unrecognized by datefield. When the datefield tries to set the value, it will try to parse the string into a date, but since your selected format is not one known to datefield by default, the value is set to null.
The format and altFormats configs contain the formats datefield recognizes, and can be exchanged/amended to contain the date format(s) you want to support.
I'm trying to fetch data using http://api-sandbox.oanda.com/v1/history?instrument=EUR_USD&candleFormat=midpoint&granularity=W&start=1351728000000&end=1368144000000
to get data in between to dates but it showing:
{
"code" : 45,
"message" : "Invalid timestamp: [start] parameter",
"moreInfo" : "http:\/\/developer.oanda.com\/"
}
What I did wrong? I'm using this reference to set sart and end date. http://developer.oanda.com/docs/v1/rates/
According to docs you posted, you should be using RFC3339 format, not timestamp:
start:
Optional
The start timestamp for the range of candles requested. Must be specified in RFC3339 format.
Examples:
2002-10-02T15:00:00Z
2012-11-01T00:00:00Z
2013-05-01T00:00:00Z
And proper encoded URI:
http://api-sandbox.oanda.com/v1/history?instrument=EUR_USD&candleFormat=midpoint&granularity=W&start=2012-11-01T00%3A00%3A00&end=2013-11-01T00%3A00%3A00
I'm creating some models in Titanium studio using Alloy. I'd like some of the columns to be a date or a boolean, but it doesn't accept it when I run the app.
According to the documentation:
The following data types are accepted and mapped to the appropriate
SQLite type: string, varchar, int, tinyint, smallint, bigint, double,
float, decimal, number, date, datetime and boolean.
But when I run my app, I get this message in the console:
[WARN] : "date" is not a valid sqlite field, using TEXT instead
[WARN] : "date" is not a valid sqlite field, using TEXT instead
[WARN] : "boolean" is not a valid sqlite field, using INTEGER instead
[WARN] : "boolean" is not a valid sqlite field, using INTEGER instead
Perhaps I am setting my Models up incorrectly? Here is my code:
exports.definition = {
config: {
columns: {
"availability_end": "date",
"availability_start": "date",
"deleted": "boolean",
"duration": "integer",
"title": "text",
},
adapter: {
type: "sql",
collection_name: "videos"
}
},
/* the rest of the model definition... */
Because it isn't a valid SQLite data type.
http://www.sqlite.org/datatype3.html
1.2 Date and Time Datatype
SQLite does not have a storage class set aside for storing dates and/or times. Instead, the built-in Date And Time Functions of SQLite are capable of storing dates and times as TEXT, REAL, or INTEGER values:
TEXT as ISO8601 strings ("YYYY-MM-DD HH:MM:SS.SSS").
REAL as Julian day numbers, the number of days since noon in Greenwich on November 24, 4714 B.C. according to the proleptic Gregorian calendar.
INTEGER as Unix Time, the number of seconds since 1970-01-01 00:00:00 UTC.
Applications can chose to store dates and times in any of these formats and freely convert between formats using the built-in date and time functions.
Perhaps the documentation is just telling you that it automatically maps it properly. Maybe it also manages the date operations for you automatically.