PDA

View Full Version : Ext.form.ux.touch.CalendarPicker



ed.canas
3 Feb 2011, 8:02 AM
Simple calendar to use instead of the default date picker. This is my first shot at creating a custom control so I'm sure there will be better ways of doing things, any additions are welcome since it still needs a little bit of work, fixing up the style on the form field display. Anybody with more experience on styling let me know on how to fix the gray box and text alignment.

Git - https://github.com/ecanas/Ext.form.ux.touch.CalendarPicker
Demo - http://www.ordersinseconds.com/calendarpicker/


Here are some pics of how it looks iphone:

http://www.ordersinseconds.com/calendarpicker/iphone.png

and ipad:
http://www.ordersinseconds.com/calendarpicker/ipad.png

tomalex0
11 Feb 2011, 10:19 PM
Nice to see that you developed a calendar :),

I have posted this as Feature Request some months ago and status is open. So we could expect some thing from Sencha Guys :D

http://www.sencha.com/forum/showthread.php?104853-OPEN-157-ICal-New-calendar-functionality

Hope you could do more based on that .

eladgel
4 Mar 2011, 6:56 AM
Would you mind if I take your example and create a time picker?

ed.canas
4 Mar 2011, 6:57 AM
Not at all you can reuse any of the code to fit your needs.

eladgel
4 Mar 2011, 7:00 AM
I think you should change the next flow:
user searches for a date-> user touches the day -> date has been picked->date window is closed

to

user searches for a date-> user touches the day -> date has been picked-> user has a visual feedback that date was picked -> user clicks on a confirm button

this is how it works in most calenders

Cheers- you did a wonderful job

Riaz
8 Mar 2011, 7:18 PM
Hi "cd.Canas":
I am trying to implement your code. I have a issue on that. Could you check, and give me some ideas.

I have two panels into the “Ext.extend(Ext.Panel, {...}”

Sample code:


var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
title: 'Timesheet',
iconCls: 'time',
fullscreen: true,
items: [{
xtype: "fieldset",
title: "Weekly Timesheet",
items: [{
xtype: "calendarpickerfield",
label: "Date",
dateFormat: 'd-m-Y',
Value: new Date(),


}, [WeeklyTimesheet]

]
});




When value of “value” is changed, I want to refresh “WeeklyTimesheet” panel. How do I do that?

ed.canas
9 Mar 2011, 6:38 AM
the calendar picker has an Event for when the value changes. So you need to add a listerner for "select" search for the following lines of code



initComponent: function() {
this.addEvents('select');
.....
....
onPickerChange: function(picker, value) {
this.setValue(value);
this.fireEvent('select', this, this.getValue());
},
...

Riaz
9 Mar 2011, 3:48 PM
Thanks for your reply. Could you please give details, how to add a listeners for "select" search? It will be appreciated.

Riaz
22 Mar 2011, 4:12 PM
I have a following code:



var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
title: 'Timesheet',
iconCls: 'time',
fullscreen: true,
items: [{
xtype: "fieldset",
title: "Weekly Timesheet",
items: [{
xtype: "calendarpickerfield",
label: "Date",
dateFormat: 'd-m-Y',
value: new Date(), // Here is the date value

listeners: {
render: function () {
var ChangingDate = ??? // How do I get changing date?
alert(ChangingDate);
}
}
//~Riaz-23rd11

}]
}


]
});



Ext.reg("jsWeeklyTimeSheetList", WeeklyTimesheetFrame);


How do I get value into the "ChangingDate" variable?

ed.canas
22 Mar 2011, 5:42 PM
If you are using my calendar picker code, then you need to listen for select see code below



var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
title: 'Timesheet',
iconCls: 'time',
fullscreen: true,
items: [{
xtype: "fieldset",
title: "Weekly Timesheet",
items: [{
xtype: "calendarpickerfield",
label: "Date",
dateFormat: 'd-m-Y',
value: new Date(), // Here is the date value

listeners: {
select: function (picker, value) {
var ChangingDate = value; // How do I get changing date?
alert(ChangingDate);
}
}
//~Riaz-23rd11

}]
}


]
});



Ext.reg("jsWeeklyTimeSheetList", WeeklyTimesheetFrame);


See the sample on the previous post where I call this.fireEvent('select', this, this.getValue());

Riaz
22 Mar 2011, 5:48 PM
Thanks for your great help

Riaz
22 Mar 2011, 6:40 PM
I have another quick query. I do not know whether I am correct or not. Still I am missing something -

I have following code.

Code01:


var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
title: 'Timesheet',
iconCls: 'time',
fullscreen: true,
items: [{
xtype: "fieldset",
title: "Weekly Timesheet",
items: [{
xtype: "calendarpickerfield",
label: "Date",
dateFormat: 'd-m-Y',
value: new Date() ,
listeners: {
select: function (picker, value) {
var ChangingDate = value;
}]
}

, [ {
xtype: "TimesheetField" //[by default it is showing projects related to current date]
}]

]
});



Ext.reg("jsWeeklyTimeSheetList", WeeklyTimesheetFrame);


In my "TimesheetField", I have following code-



Timesheet = Ext.extend(Ext.List, {
itemTpl: '{ProjectNumber} {ProjectName}',
grouped: true,
store: WeeklyTimesheetStore,
listeners: {
render: function () {
WeeklyTimesheetStore.load();
}

// Need some code

}
});

Ext.reg("TimesheetField", Timesheet);


My query is -
when I get changing date, how do I refresh my "Timesheet" and load only projects related to changing date?

chandramuralis
11 May 2011, 12:01 PM
this looks great. thanks for the control.

fairport
16 Jan 2012, 2:04 AM
Hi Thanks for this control.. We're using it everywhere.
I am seeking a bit o f help with it though.
When the control is disabled, the text color remains Black, whereas a datepicker will display the text as Grey.
Can someone tell me how to fix this please