Ext.form.ux.touch.CalendarPicker

[ed.canas]

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.u...CalendarPicker
Demo - http://www.ordersinseconds.com/calendarpicker/


Here are some pics of how it looks iphone:



and ipad:

[tomalex0]

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

http://www.sencha.com/forum/showthre...-functionality

Hope you could do more based on that .

[eladgel]

Would you mind if I take your example and create a time picker?

[ed.canas]

Not at all you can reuse any of the code to fit your needs.

[eladgel]

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]

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]

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]

Thanks for your reply. Could you please give details, how to add a listeners for "select" search? It will be appreciated.

[Riaz]

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]

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());