How to keep the format of ExtJS timefield in 24hours - extjs

I am trying to create a timefield combo box with extJS. I have done this successfully but now I have a problem when I get the value that I select in the combo box.
First the code for making the timefield:
items :[{
fieldLabel: 'Start Time',
name: 'startTime',
xtype: 'timefield',
id: 'startTime',
format: 'H:i',
altFormats:'H:i',
increment: 30
}]
What I want is to get the value in a 24h format. In order to get the value from the time field I use this code:
var startTime = Ext.getCmp('startTime').getSubmitValue();
The problem is that instead of getting the time in 24hour format, the values are transformed into 12 hours format. For example, while I select from the combo the time: 00:00 when I use getSubmitValue() the value is transformed into 12:00 AM, which is not very useful in my case.
My question is: Is there a way to keep the format of the time exactly how it is in the combo box? That would be a 24hour format.
I hope it's clear what I am trying to say.
Thanks
Dimitris

The reason is simple.
getValue returns date object, getSubmitValue returns formatted date.
You just need to format a date received by getValue method.
var field = Ext.getCmp('startTime');
var value = field.getValue();
var formattedValue = Ext.Date.format(value, 'H:i');
Sample here

I found out that if I use the:
var startTime = Ext.getCmp('startTime').getRawValue();
I retrieve the time in 24 format.

Related

extjs6 datefield - converting to short date string

In my extjs6 project I have a datefield. When I getvalue it comes back as '2017-07-26T00:00:00'. How can I convert this to 07-26-2017?
I am trying the below which is coming back blank.
var newVal = Ext.Date.format(value, 'm-d-Y')
screenshot below
As per the docs,
Ext.Date.parse makes a javascript date from a string.
Ext.Date.format makes a string from a javascript date.
Since you need to convert a string to a string, you have to combine the two:
Ext.Date.format(Ext.Date.parse('2017-07-26T00:00:00','c'), 'm-d-Y')
You don't need to use
Ext.Date.format and Ext.Date.parse functions
just change the xtype and format property to your gridcolumn
xtype: 'datecolumn',
format: 'm-d-Y'
Example code set grid column property
columns: [
{
text: 'Date',
dataIndex: 'date',
xtype: 'datecolumn',
format:'m-d-Y'
}
],
This will give the output as in '07-26-2017' format..
No need to use renderer as well
hope ull try this

How to convert timestamp to readable calendar date

I have timestamp date format from hosting database, My problem now is how to convert this timestamp format to readable calendar date and put inside the calendar, the process of converting will be done inside the calendar javascript I think this is possible my problem is how can I do that? I can now translate the to calendar format by using this if I have given declaration of timestamp format.
var timestamp = 1441987200;
var date = new Date(timestamp * 1000);
datevalues = [
date.getFullYear(),
date.getMonth()+1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
alert(datevalues);
But I cant put it inside my calendar because of different format of my plugin calendar with this new Date(y, 9, 2).
$scope.events =[ {title: 'Long Event',start: new Date(y, 9, 2),end: new Date(y, 10, 7)}],
Can anyone help me to find the solution for this? Thanks and regards.
I recommend using MomentJS when you have to handle a lot of times and dates. It's able to parse times in a more convenient way than JavaScript's Date and it's also able to format it just the way you like.

In Line graph, Why x-axis date format is not coming proper?

I have done application using Extjs 4.1. I have plotted line graph, in this x-axis date format is not coming proper. I have defined fromdate, todate and date format, but duplicating December month, Feb month is not coming. line is plotting proper. for more reference have attached images. Can any body tell me how to resolve this issue?. Great appropriated. Thank you.
Code is here:
{
type:'Time',
step: [Ext.Date.MONTH,1] ,
position:'bottom',
fields:['Month'],
fromDate: new Date('12/1/12'),
toDate: new Date('6/1/13'),
grid: true,
dateFormat: 'M Y',
constrain: true,
}
You can try to change the label orientation to have it displayed verticaly, thus giving more space to display intermediate labels.
You can add a section 'label' do this:
label: {
rotate: {degrees: 270}
},

How to convert Format for Date and Time in Sencha Touch?

In Sencha Touch 2 I have a model with the following fields, DateTimeStart if rendered in a List it shows in this format
Mon Feb 11 2013 11:55:00 GMT +100 (W. Europe Standard Time)
I need to create another field (DateTimeStartConverted) based on DateTimeStart
I need to convert such date in a more short format using 'Y-m-d'.
Printing the result of DateTimeStartConverted in my conversion method it does not display any result (no errors has been throw).
Any idea how to fix it?
{
name: 'DateTimeStart',
type: 'date',
dateFormat: 'MS'
}, {
name: 'DateTimeStartConverted',
type: 'date',
convert: function(value, record){
var jsonDate = record.get('DateTimeStart');
return Ext.Date.format(jsonDate, 'Y-m-d');
}
}
If you just need to display the date properly in a list item template, then you can use the :date() function within your template:
{
xtype: 'list',
...
itemTpl: '<p>Date display test - {DateTimeStart:date("m/d/Y")}</p>',
...
}
As for your convert function, it looks sound, but what do you get for the value and record arguments? Knowing those values would help a lot.

Couldn't get the date from DateField as expected in ExtJS

I tried to get value from datefield using Ext.getCmp('dateFieldId'). I expect it to be a string like 'dd-mm-yyyy'. But what I get is "Mon Feb 6 00:00:00 UTC......"
My code is
var effectivefromdate = new Ext.form.DateField({
fieldLabel: 'XX',
id:'XX',
name: 'XX',
format:'d/m/Y'
});
Plz help me on this,
I'm Stuck:(
What you get from DateField component is a Date object. To get a string from it use Ext.Date.format(yourDateObject,'d-m-Y')
You can use it..
Ext.getCmp('your date id').getSubmitValue()

Resources