PDA

View Full Version : Datepicker values.



profunctional
14 Jul 2010, 5:55 PM
In the example, the DatePicker example shows:

March : 23: 1984

Is there a way to configure it so that it allows the user to see?

Tue July 20 : 10 : 30 : PM

evant
14 Jul 2010, 6:02 PM
Touch includes the same date library as Ext, so yes:



v = v.format('D F d : h : i : A');


Obviously since you're only picking the date, you'd need to set the time part yourself.

Docs here: http://www.sencha.com/deploy/touch/docs/?class=Date

profunctional
14 Jul 2010, 6:08 PM
Hey Evan,

What do you mean by setting the time part myself. The functionality I am trying to recreate is the native Appointment app on the iPhone. When you go to add a new appointment on your iPhone, check out the selected fields. I can select both the date and time using the same picker.

I looked in the codebehind for the datepicker, and didn't see any reference to hours or minutes. Can it be done?

profunctional
14 Jul 2010, 6:10 PM
In my original post, I wasn't trying to display the selected date. The ":" between each field was just the spacer when selecting each item.

evant
14 Jul 2010, 6:23 PM
Right, I get you.

Currently, no, but it would be pretty easy to extend... hang on.

evant
14 Jul 2010, 6:47 PM
Something like this:



Ext.DateTimePicker = Ext.extend(Ext.DatePicker, {
initComponent: function() {
var yearsFrom = this.yearFrom;
var yearsTo = this.yearTo;
var years = [];

// swap values if user mixes them up.
if (yearsFrom > yearsTo) {
var tmp = yearsFrom;
yearsFrom = yearsTo;
yearsTo = tmp;
}

for (var i = yearsFrom; i <= yearsTo; i++) {
years.push({
key: i,
value: i
});
}

var daysInMonth;
if (this.value) {
daysInMonth = this.getDaysInMonth(this.value.month, this.value.year);
} else {
daysInMonth = this.getDaysInMonth(0, new Date().getFullYear());
}

var days = [];
for (i = 0; i < daysInMonth; i++) {
days.push({
key: i+1,
value: i+1
});
}

var months = [];
for (i = 0, ln = Date.monthNames.length; i < ln; i++) {
months.push({
key: Date.monthNames[i],
value: i
});
}

var range = function(start, end){
var arr = [];
for(var i = 0; i <= end; ++i){
arr.push({
key: i,
value: i
});
}
return arr;
};

this.slots = [{
text: 'Hour',
name: 'hour',
align: 'left',
items: range(0, 23)
}, {
text: 'Minute',
name: 'minute',
align: 'left',
items: range(0, 59),
},{
text: 'Month',
name: 'month',
align: 'left',
items: months
},{
text: 'Day',
name: 'day',
align: 'center',
items: days
},{
text: 'Year',
name: 'year',
align: 'right',
items: years
}];

Ext.DatePicker.superclass.initComponent.call(this);
this.on('pick', this.onPick, this);
},

getValue: function() {
var v = Ext.DatePicker.superclass.getValue.call(this),
day,
daysInMonth = this.getDaysInMonth(v.month, v.year);

if (v.day !== "") {
day = Math.min(v.day, daysInMonth);
} else {
day = daysInMonth;
var dv = this.items.itemAt(1),
idx = dv.store.find(this.valueField, daysInMonth),
r = dv.store.getAt(idx),
n = dv.getNode(r);
this.scrollToNode(dv, n);
}
return new Date(v.year, v.month, day, v.hour, v.minute);
}
});

profunctional
15 Jul 2010, 7:00 AM
Thanks Evan. I have extended your sample to get closer to what I need. However, there are two problems.

1. If I switch the order of the items in the slots array, for example showing day, month, year, hours, mins, the picker freezes. This happens if I quickly scroll through the different slots.

2. Now that I can display the day of the week next to the date number, the day name doesn't refresh when a new month or year is selected. How do I get the items to refresh?

3. The text overlaps in my Day slot. How do I adjust the width of the slots?

4. Much of what I'd like to do could be solved with a Calendar control. Are there plans for one?

Here is my code so far:




MyApp.controls.DateTimePicker = Ext.extend(Ext.DatePicker, {
initComponent: function() {
var yearsFrom = this.yearFrom;
var yearsTo = this.yearTo;
var years = [];

// swap values if user mixes them up.
if (yearsFrom > yearsTo) {
var tmp = yearsFrom;
yearsFrom = yearsTo;
yearsTo = tmp;
}

for (var i = yearsFrom; i <= yearsTo; i++) {
yearName = i.toString().substring(2,4) + '\'';
years.push({
key: yearName,
value: i
});
}

var daysInMonth;
if (this.value) {
daysInMonth = this.getDaysInMonth(this.value.month, this.value.year);
} else {
daysInMonth = this.getDaysInMonth(0, new Date().getFullYear());
}

var dayInWeek = function(lookupDate) {
return Date.getShortDayName(lookupDate.getDay());
};
var days = [];
for (i = 0; i < daysInMonth; i++) {
dayNum = i+1;
displayDate = new Date(this.value.year, this.value.month, dayNum, 12, 00, 00);
dayName = dayInWeek(displayDate) + ' ' + dayNum;
days.push({
key: dayName,
value: i+1
});
}

var months = [];
for (i = 0, ln = Date.monthNames.length; i < ln; i++) {
months.push({
key: Date.monthNames[i],
value: i
});
}

var hours = [];
for (var i = 0; i < 24; i++)
{
var displayHr;
if (i < 12)
{
displayHr = i + 1;
hours.push({key: displayHr + 'am', value: i});
}
else
{
displayHr = i - 11;
hours.push({key: displayHr + 'pm', value: i});
}
}

var minutes = [
{key: '00', value: 00},
{key: '05', value: 05},
{key: '10', value: 10},
{key: '15', value: 15},
{key: '20', value: 20},
{key: '25', value: 25},
{key: '30', value: 30},
{key: '35', value: 35},
{key: '40', value: 40},
{key: '45', value: 45},
{key: '50', value: 50},
{key: '55', value: 55}
];

var range = function(start, end){
var arr = [];
for(var i = 0; i <= end; ++i){
arr.push({
key: i,
value: i
});
}
return arr;
};

this.slots = [{
text: 'Hour',
name: 'hour',
align: 'left',
items: hours
}, {
text: 'Minute',
name: 'minute',
align: 'left',
items: minutes
},{
text: 'Month',
name: 'month',
align: 'left',
items: months
},{
text: 'Day',
name: 'day',
align: 'center',
items: days
},{
text: 'Year',
name: 'year',
align: 'right',
items: years
}];

Ext.DatePicker.superclass.initComponent.call(this);
this.on('pick', this.onPick, this);
},

getValue: function() {
var v = Ext.DatePicker.superclass.getValue.call(this),
day,
daysInMonth = this.getDaysInMonth(v.month, v.year);

if (v.day !== "") {
day = Math.min(v.day, daysInMonth);
} else {
day = daysInMonth;
var dv = this.items.itemAt(1),
idx = dv.store.find(this.valueField, daysInMonth),
r = dv.store.getAt(idx),
n = dv.getNode(r);
this.scrollToNode(dv, n);
}
return new Date(v.year, v.month, day, v.hour, v.minute);
}
});

profunctional
15 Jul 2010, 5:51 PM
bump

PK_ExtJS
3 Aug 2010, 11:55 PM
:)