What is the proper way to format a UNIX timestamp into a human date in Kendo UI Grid? - date

Well there seems to be a multitude of similar questions, but none that I can find answering this specific question.. so here goes..
Have a working Kendo UI grid. My datasource is returning a timestamp - here's the JSON response coming back to the code:
You'll notice that the next line is also a date.. returned by MySQL as a standard DateTime format - which I would be happy to use directly. But I've converted the date to a timestamp which I thought would be more universal. (??)
Now I need to do two things - format the timestamp into a readable date and edit the date so it can be saved back to the datasource. But let's tackle formatting first.
My code to display the column currently looks like this:
{ title: "Trial<br>Date",
field: "customer_master_converted_to_customer_date",
format: "{0:d/M/yyyy}",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px;"
}
},
Although I've tried..
toString(customer_master_converted_to_customer_date, "MM/dd/yyyy")
.. and several variations of that - in terms of format string. And yes, I've tried entering:
type: "date",
No matter what I do, I only get the timestamp.
Anyone?

You need to convert the timestamp to a JavaScript date first. Here is a sample implementation:
$("#grid").kendoGrid({
dataSource: {
data: [
{ date: 1371848019 }
],
schema: {
model: {
fields: {
date: {
type: "date",
parse: function(value) {
return new Date(value * 1000);
}
}
}
}
}
}
});
Here is it live: http://jsbin.com/utonil/1/edit

I just had the same problem and i tried this and now works perfectly, good luck.
template :#= kendo.toString(new Date(parseInt(dateOfBirth)), 'yyyy-MM-dd')#"
whre dateOfBirth is the date to format, the result will be like this : 2015-09-11.
good luck.

Thank you #Atanas Korchev, that worked for me, here is what I ended up doing:
// in datasource
schema:{
model: {
fields: {
date: { type: "date",
parse: function(value) {
return new Date(value);
}
}, // … other fields
// in columns
columns: [
{
field: "date",
title: "Date",
type: "date",
format: "{0:dd MMM yyyy}"
},
// ... other columns
]

The easiest way to use the TimeStamp format data from your database for KendoGrid.
https://stackoverflow.com/a/67106362/5671943
<kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
[width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
[style]="{'background-color': '#36455a','color': '#fff'}">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
</ng-template>
</kendo-grid-column>

Related

Aurelia converted values and dataTables

I'm using DataTables jQuery plugin in Aurelia component. using column ordering and it works well excluding columns with dates.
Inside this columns I'm using value-convertet to convert isoString value to DD.MM.YYYY date format. Value covreters usage leads to wrong date column ordering, but if I'm not using value-converter everything works well. Unfortunately I didn't find any reason why it doesn't work correctly.
Wrong filtering example: I see rows with date value like 27.05.2010 before 18.05.2017
DataTables init:
$('#searchResultsTable').dataTable({
destroy: true,
searching: false,
paging: false,
orderMulti: false,
order: [[ 2, "desc" ]],
dateFormat: 'DD.MM.YYYY'
});
Date value converter (using moment library):
import * as moment from 'moment';
export class DateFormatValueConverter {
toView(value: Date, format: string): string {
if (value) {
return moment(value).format(format);
}
return null;
}
fromView(value: string, format: string): Date {
var isValid = moment(value, format, true).isValid();
if (value && isValid) {
return moment(value, format).toDate();
}
return null;
}
}
UPDATE:
Ordered with value converter
Orderd without ValueConverter(ordered like it should 2017 year value on the top)
The ordering mechanism of the data table is working correctly - it's your understanding that's off I'm afraid.
When ordering in descending order, any that start with 27. will be at the top, as they're the "biggest". Within all the dates that start with 27, it'll order on the month, biggest first, and then the year.
The order mechanism doesn't realise you're ordering a date so we need to look at the Custom Sorting Plugins;
https://www.datatables.net/plug-ins/sorting/
And specifically the Date-De plugin - as that matches your date format;
https://www.datatables.net/plug-ins/sorting/date-de
An example taken from the above page;
$('#example').dataTable( {
columnDefs: [
{ type: 'de_datetime', targets: 0 },
{ type: 'de_date', targets: 1 }
]
});

Elasticsearch: Intuitive Date Search

I have a dt_birth property of type date. I would like to be able to search for a date in different ways. For example 1/13/1992, 01/13/1992, 1-13-1992, January 13, 1992. How could I go about this? Currently I can only search by the format I have implemented bellow:
dt_birth: {
type: 'date',
format: 'strict_date_optional_time||epoch_millis'
},
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
UPDATE: I am having a few issues comprehending this.
for the dt_birth format:
dt_birth: {
type: 'date',
format: 'strict_date_optional_time||epoch_millis'
}
How does the format specified above 'strict_date_optional_time||epoch_millis' effect the query format specified below:
{
"query": {
"range": {
"dt_birth": {
"gte": "01/13/1992",
"lte": "1-13-1992",
"format": "d/MM/yyyy||dd/MM/yyyy||d-MM-yyyy||dd-MM-yyyy"
}
}
}
}
Also, I'm a bit confused when you say add the date formats you need to support. How does the format correspond to the LTE and GTE? For example I would like to accept the date format January 15, 2000 - 1/15/2000 - 01/15/200 - 1-15-2000 - 01-15-2000. If I have 5 different formats I wish to support would that mean I would need 5 GTE/LTE? These last two questions are the most confusing. I appreciate any help :)
The definition of your dt_birth field contains the date format that ES expects to find in your document when you index it, so that it can retrieve the number of milliseconds (as a long) and index that.
At query time, you have the option to search by date by specifying any other date format using the format property of the range query:
{
"query": {
"range": {
"dt_birth": {
"gte": "01/13/1992",
"lte": "1-13-1992",
"format": "d/MM/yyyy||dd/MM/yyyy||d-MM-yyyy||dd-MM-yyyy"
}
}
}
}
or
{
"query": {
"range": {
"dt_birth": {
"gte": "1/13/1992",
"lte": "January 13, 1992",
"format": "d/MM/yyyy||MMMM dd, yyyy"
}
}
}
}
You can simply add all the date formats you need to support at query time in the format property and then simply fill the gte and lte properties with the appropriate dates. ES will happily parse them.

How to format json data in miliseconds to Date format in highcharts?

I get array of date from json as 1420185600000,1420531200000,1420617600000,1420704000000,1420790400000,1420876800000. How do I format it to show the correct date in the XAxis labels of the highcharts?
You need to tell highcharts that the xAxis is a date type.
xAxis: {
type: 'datetime'
},
You may need extra formatting if you want the date displayed in some form other than the default. That can be done via the labels.formatter.
Sample code that lets you do what you want (minus what formatting you want your date in):
xAxis: {
categories: [1420185600000,1420531200000,1420617600000,1420704000000,1420790400000,1420876800000],
labels: {
formatter: function () {
return new Date(this.value);
}
}
},
You would then need to determine what parts of your new date string you actually want to show. The sample above doing return Date(this.value) is the kitchen sink approach.
UPDATE: If you want the strings formatted, Highcharts gives you functions to set up the date string. See this fiddle (same as fiddle linked in the comments below with formatter using highcharts): http://jsfiddle.net/CaptainBli/psd3ngsh/13/
xAxis: {
type: "datetime",
categories: xArray,
labels: {
formatter: function () {
return Highcharts.time.dateFormat('%Y-%m-%d %H:%M:%S.%L', new Date(this.value));
}
}
},
arrayOfDatesFromJson = arrayOfDatesFromJson.map(function (element) {
return new Date(element);
});

change the date format in a grid field ExtJS

simple question but I can't figure out how to resolve it.
I'm receiving a date with hour from JSON with this format :
"date_deb":"2013\/12\/28 23:00:00"
Note that the \ are for escaping the / and are not displayed.
I would like to display this dates in this format into my grid :
"28/12/2013 23:00:00"
I've tried this into my fields definition:
{name:'date_deb', type: 'date', dateFormat: 'd-m-Y H:i:s'}
But it's not working, nothing is displayed.
By checking the ExtJS docs, I've seen this :
dateReadFormat
I'm using ExtJS4.2
In your field definition provide the dateFormat as it is returned from the server:
{name:'date_deb', type: 'date', dateFormat: 'Y/m/d H:i:s'}
and then in your column config use ExtJS's built-in dateRenderer with the format you'd like to render your dates with:
renderer: Ext.util.Format.dateRenderer('d/m/Y H:i:s')
You'll only need dateReadFormat and dateWriteFormat if you have a reader (to read data from server) AND a writer (to send modified data back to server) which need different date formats. Otherwise dateFormat will apply as the default format for both.
If the above doesn't work for you, try adding xtype: 'datecolumn' in your grid's 'columns' config.
columns: [{
text : 'date',
dataIndex: 'LoginDateTime',
xtype: 'datecolumn',
format: 'Y-m-d g:i A',
}]
This should work.
use this function to render date for grid
In your column definition define renderer as this
renderer: renderDate
example { dataIndex: 'TaskEndDate', header: 'PlannedEndDate', flex: 1, renderer: renderDate },
function renderDate(value)
{
if (value == '' || value == undefined) {
return '';
}
else {
getDate = new Date(parseInt(value.substr(6)));
}
return Ext.util.Format.date(getDate, 'm-d-Y');
}
In your column config use "formatter".
formatter: 'date("d/m/Y H:i:s")'

Kendo Grid Datepicker save format

I have a grid that has a date field.
When a json POST is made to the server, the data that's sent looks like this: "2013-09-13T16:40:34.301Z", and a PUT looks like this: "2013-09-13T04:00:00.000Z". So it looks like the same format, but the POST is including some screwy time value and the PUT some other screwy time value (neither of which are correct).
I want to only send the DATE. Anyone have any idea?
kendoGrid.....
model: {
id: "ID",
fields: {
ID: {
editable: false,
type: "number"
},
START_DATE: {
field: "START_DATE",
type: "date",
format: "{0:MM/dd/yyyy}",
validation: {
required: true
}
},
Use the Data function (of the upload or create config) to send that date in a different format or use the parameterMap to change the existing format.