PDA

View Full Version : DateTime xtype combined with DateRange vtype



iwosz
16 Nov 2010, 2:55 AM
Hi,

Is it possible to combine somehow DateTime xtype (http://www.sencha.com/forum/showthread.php?22661-new-version-DateTime-Field) with DateRange vtype (http://dev.sencha.com/deploy/dev/examples/form/adv-vtypes.html)? I mean, is it possible to set vtype to 'daterange' in DateTime field? DateRange vtype use startDateField and endDateField options to set Id's of datefields, also in DateTime field with 'from' Id, datefield has 'from-date' Id and timefield has 'from-time' Id, so I tried to set 'from-date' as startDateField etc. but it don't work :-?

code here:

var form = new Ext.FormPanel({
labelWidth: 110,
labelAlign: 'right',
frame: true,
title: 'Date period',
defaultType: 'datefield',
width: 350,
items: [{
xtype: 'xdatetime',
fieldLabel: 'From',
name: 'from',
id: 'from',
vtype: 'daterange',
endDateField: 'to-date' // id of the end date field
,timeFormat: 'H:i'
,timeConfig: {
altFormats: 'H:i'
,allowBlank: false
,editable: true
,increment: 60
,value: '00:00'
}
,dateFormat: 'Y-m-d'
,dateConfig: {
altFormats: 'Y-m-d|Y-n-d'
,allowBlank: false
,editable: false
}
},{
xtype: 'xdatetime',
fieldLabel: 'To',
name: 'to',
id: 'to',
vtype: 'daterange',
startDateField: 'from-date' // id of the start date field
,timeFormat: 'H:i'
,timeConfig: {
altFormats: 'H:i'
,allowBlank: false
,editable: true
,store: hoursData // array with hours XX:59
,value: '23:59'
}
,dateFormat: 'Y-m-d'
,dateConfig: {
altFormats: 'Y-m-d|Y-n-d'
,allowBlank: false
,editable: false
}
}]
});

What I'm doing wrong? (:|

iwosz
17 Nov 2010, 2:00 AM
Any ideas? :]

alexaung
22 Nov 2010, 8:37 PM
Yes, I am also facing same issue. Is there any solution. Actually I used xtype = 'datefield' and my dateformat is 'd M Y H:i'. For validation, I set Today Date as MaxValue. So that user can't choose the data and time later than current date and time. It is working fine in my previous Extjs 3.2.1 version. But after I migrated to 3.3.0. datefield does not reconige time. So I alway got validation error if i put time in date field, I got the error "The date in this field must be equal to or before 23 Nov 2010 00:00". But Current time is 23 Nov 2010 11:00:00.
So I should have enter 23 Nov 2010 10:59:00. I even clear the time but it does not work.

//var todate = new Date().clearTime();
var todate = new Date();

So I plan the seperate date and time and used xtype = 'xdatetime' but daterange is not working in xdatetime because dt.setMaxValue(todate) is not a funciton. Is there any other work around solution.

Condor
23 Nov 2010, 5:03 AM
Answer to first post:
id: 'from' needs to match startDateField: 'from-date'
and
id: 'to' needs to match endDateField: 'to-date'

Condor
23 Nov 2010, 5:05 AM
@alexaung:
Yes, the Ext 3.3.0 DateField no longer supports time. You will have to use a Date/time combined field user extension and you'll have to modify the DateRange vtype to work with this extension.

alexaung
23 Nov 2010, 6:58 PM
Thanks Condor!!!

iwosz
24 Nov 2010, 2:21 AM
Answer to first post:
id: 'from' needs to match startDateField: 'from-date'
and
id: 'to' needs to match endDateField: 'to-date'

Thx, but problem is that when I add xtype: 'xdatetime' to the daterange fields, validation stops work. Even when I put code from this example (http://dev.sencha.com/deploy/dev/examples/form/adv-vtypes.html) and add 'xdatetime' xtype, it stops work... I use Ext 3.2.1

(it works without xtype: 'xdatetime' )

Condor
24 Nov 2010, 2:34 AM
I already told you that you need to modify the daterange vtype for XDateTime fields (maybe create an xdaterange vtype?).

alexaung
28 Nov 2010, 9:39 PM
Hi iwosz,

You have to move vtype and Start and EndDateFile into dateConfig. It is working for me. Thanks


var form = new Ext.FormPanel({
labelWidth: 110,
labelAlign: 'right',
frame: true,
title: 'Date period',
defaultType: 'datefield',
width: 350,
items: [{
xtype: 'xdatetime',
fieldLabel: 'From',
name: 'from',
id: 'from',
//vtype: 'daterange',
//endDateField: 'to-date' // id of the end date field
,timeFormat: 'H:i'
,timeConfig: {
altFormats: 'H:i'
,allowBlank: false
,editable: true
,increment: 60
,value: '00:00'
}
,dateFormat: 'Y-m-d'
,dateConfig: {
altFormats: 'Y-m-d|Y-n-d'
,allowBlank: false
,editable: false
,vtype: 'daterange'
,endDateField: 'to-date' // id of the end date field
}
},{
xtype: 'xdatetime',
fieldLabel: 'To',
name: 'to',
id: 'to',
//vtype: 'daterange',
//startDateField: 'from-date' // id of the start date field
,timeFormat: 'H:i'
,timeConfig: {
altFormats: 'H:i'
,allowBlank: false
,editable: true
,store: hoursData // array with hours XX:59
,value: '23:59'
}
,dateFormat: 'Y-m-d'
,dateConfig: {
altFormats: 'Y-m-d|Y-n-d'
,allowBlank: false
,editable: false
,vtype: 'daterange'
,startDateField: 'from-date' // id of the start date field
}
}]
});

iwosz
3 Dec 2010, 4:56 AM
Thx alexaung! it work's for me in this way too :) but there is problem with function setMaxValue and error occurs:


start.setMaxValue is not a function
in start.setMaxValue(date);
Condor: also thx for help! :)