Platform is Sencha Touch 2.1.1. I am using a datPicker in a form panel as follows:
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'dateOfEvaluation',
label: 'Date of evaluation',
dateFormat: 'm/d/Y',
value: new Date(),
picker: {
yearFrom: 2013
}
},
which is being saved to as a date type in my model:
{name: 'dateOfEvaluation', type: 'date'},
If there is a value in the store it gets rendered via an itemTpl via the follwing method:
onSelectSiteGeneral: function(view, index, target, record, event) {
console.log('Selected a SiteGeneral from the list');
var siteGeneralForm = Ext.Viewport.down('siteGeneralForm');
if(!siteGeneralForm){
siteGeneralForm = Ext.widget('siteGeneralForm');
}
siteGeneralForm.setRecord(record);
siteGeneralForm.showBy(target);
}
This all works fine and dandy.
The problem is with records that do not have dates saved in them. In localStorage for a date type, the null/empty value seems to be 0, which gets displayed on my above form as '12/31/1969.' I know I could write a handler to have this display as the current date, but am sure how to proceed (I cannot use a default value: new Date(), btw, since this does not work with a value already in the data store being rendered to the form). I know I would have to add n-days to zero to get the current date, but am unsure how to get this to rerender in my form.
Any suggestions for how to get the 0th date to show up as a more realistic date, such as the current date (I will stress that default dates do not seem to work when using the above method, onSelectSiteGeneral). Grazie!
Related
I'm using a 'Ext.form.field.Date' and on CRUD process it writes given date as one day back. I mean if I select 05 June 2018, it writes as 04 June 2018.
I've checked related model and widget itself but nothing seems weird! Why this could be?
Here is model statement and field;
Ext.define('MyApp.FooModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'mydatefld', type: 'date', dateReadFormat: 'c', dateWriteFormat: 'Y-m-d'},
//and implementation
Ext.define('MyApp.BaseDateFld', {
extend: 'Ext.form.field.Date',
xtype: 'basedatefld',
format: 'd.m.Y',
flex: 1,
labelAlign: 'right',
name: 'MyDate Fld',
fieldLabel: 'MyDate Fld',
bind: '{currRec.mydatefld}'
});
Each time saves date as on XHR request payload;
2018-06-05T21:00:00.000Z //But should be 2018-06-06T06:05:00.000Z
Update:
I've tried change dateWriteForm to 'Y-m-d H:i:s' and 'Y-m-d H:i' but still noting changes on payload and keep decrease one day and sets time to 21:00:00
As well tried to change compouter TS to some another as #Alexander adviced but nothing changed.
Update 2:
I've over come the current issue but really a very DRY solution, so not safe!
Below there is insertion method (update method is almost same as this) and formating the related date value on here, thusly became success.
Server accepting the date format for this field as Y-m-d, so I've stated dateWriteFormat on model and submitFormat on datefield as 'Y-m-d' but it keeps write the date value with timestamp.
When I check rec param on method it is as 2018-06-06T21:00:00.000Z(The TZ part shouldn't be here!). And store param changes the givin date one day off as 2018-06-05T21:00:00.000Z.
Still not sure why I can't convert/format through model or field.
Thanks for advices.
recInsertion: function (rec, store) {
store.getProxy().url = store.getProxy().api.create;
rec.data.givindate = Ext.Date.format(rec.data.mydate, 'Y-m-d'); //This is current solution to format date! Which is really not safe and will cause DRY.
Ext.Ajax.request({
url: store.proxy.url,
method: 'POST',
jsonData: JSON.stringify(rec.data),
callback: function (options, success, response) {
Ext.GlobalEvents.fireEvent('showspinner');
if (success) {
Ext.GlobalEvents.fireEvent('refreshList');
}
else
Ext.GlobalEvents.fireEvent('savefailed');
}
});
},
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 }
]
});
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);
});
I am trying to do something which I think should be simple enough. I am using a datepickerfield in ST2.1 and trying to set the start date. I know I can set the year like so:
{
xtype: 'datepickerfield',
picker: {
yearFrom: newDate().getFullYear(),
yearTo: 1930
}
}
but I also want to be able to set the start day and month. Is this possible? The above produces a result like 'January 1, 2013' and that is not what I want.
If you just want to set the initial date the picker comes up with, then you just want the value config attribute of the picker.
{
xtype: 'datepickerfield',
value: (new Date()), // the value in the actual input (will also be in the picker UI)
picker: {
value: (new Date()), // use this if you DON'T want/have a value in the actual input
yearFrom: (new Date()).getFullYear(),
yearTo: 1930
}
}
Read more in the documentation (especially the "value" and "picker" config options). And here'a a Sencha Fiddle demonstrating usage.
You can create monthFrom,monthTo and dayFrom,dayTo configs. But for that you need to extend Ext.picker.Date. Create appropriate configs for those field and change createSlots method to limit month and day values.
In response to your comment, you can have reorder slots with slotOrder config in picker. Like -
slotOrder:['day', 'month', 'year']
Once you extend Ext.picker.Date you can modify certain slot as you want and then can have full day name in first slot.
I have the following date field i want to get date of one day before , how can i get that ?
In my form panel
items: [{
fieldLabel: 'Start Date',
name: 'fromdate',
ref: '../fromdate',
id: 'fromdate',
vtype: 'daterange',
value: new Date(),
endDateField: 'todate' // id of the end date field
}, {
fieldLabel: 'End Date',
name: 'todate',
id: 'todate',
vtype: 'daterange',
value: new Date(),
startDateField: 'fromdate' // id of the start date field
}]
Today I am getting 03/23/2011 but I want 03/22/2011 How I can get 03/22/2011?
Speaking ExtJS language, you can use Ext.Date library for manipulation dates. For example:
Ext.Date.add (new Date(),Ext.Date.DAY,1)
Depending on your code logic, you can modify the default value of date field by several ways:
1) In the item's value configuration:
{
...
vtype: 'daterange',
value : Ext.Date.add (new Date(),Ext.Date.DAY,1),
fromDateField: 'fromdate',
...
}
2) During the component's event. Basically, ExtJS containers have initComponent method which is the most first running, but be sure to set your code after callParent() method in order to access items collection. Example:
initComponent: function() {
...
this.callParent(arguments);
this.items.getByKey('fromdate').value = Ext.Date.add (new Date(),Ext.Date.DAY,1);
...
}
Try this:
new Date().add(Date.DAY, -1);
Or this:
var date = new Date();
date.setDate(date.getDate()-1);