[CLOSED] [1.0] Date Picker enhancement

  1. #1

    [CLOSED] [1.0] Date Picker enhancement

    first want to say I have read the following post:
    http://forums.ext.net/showthread.php...th+year+picker

    Where I disagree is that i see a growing demand to not have the two ugly combo boxes. Specially when it doesn't fit the clients existing form layouts for people that have been doing things on paper for years. They want one field with something like "Aug 08" in it.

    You could say that the enhancement could be to show just a two column list of months side by side for the given year at the top. if you click on the year you can type one in or choose from the combo box. In this scenario there isn't a demand to look at a long list of years. they may only want to enter a month year for the past year current year or next year. They will rarely go back to "1929" lets say. So a simple prev next image next to this list to move up or down year is desirable.





    Another enhancement would be to show multiple months of the calendar either stacked vertically or horizontal with a prev next image on either side to move the group of calendars to the next set.


  2. #2

    RE: [CLOSED] [1.0] Date Picker enhancement

    Hi,

    Is it what you need?
    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Ext.Net Examples</title>
        
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script type="text/javascript">
            Ext.ux.MonthPickerPlugin = function(config) {
                Ext.apply(this, config);
            }
    
            Ext.ux.MonthPickerPlugin.prototype = {
                init: function(picker) {
                    this.picker = picker;
                    picker.onTriggerClick = picker.onTriggerClick.createSequence(this.onClick, this);
                    picker.parseDate = picker.parseDate.createInterceptor(this.setDefaultMonthDay, this).createSequence(this.restoreDefaultMonthDay, this);
                },
    
                setDefaultMonthDay: function() {
                    this.oldDateDefaults = Date.defaults.d;
                    Date.defaults.d = 1;
                    return true;
                },
    
                restoreDefaultMonthDay: function(ret) {
                    Date.defaults.d = this.oldDateDefaults;
                    return ret;
                },
    
                first: true,
    
                onClick: function(e, el, opt) {
                    var p = this.picker.menu.picker;
                    p.activeDate = p.activeDate.getFirstDateOfMonth();
                    if (p.value) {
                        p.value = p.value.getFirstDateOfMonth();
                    }
                    p.showMonthPicker();
                    if (!p.disabled) {
                        if (this.first) {
                            // We should create the sequence functions only once.
                            this.first = false;
                            if (Ext.version < "3") {
                                p.monthPicker.slideIn = Ext.emptyFn;
                                p.monthPicker.slideOut = Ext.emptyFn;
                            } else {
                                p.monthPicker.stopFx();
                            }
    
                            if (typeof p.mun == 'function') {
                                p.mun(p.monthPicker, 'click', p.onMonthClick, p);
                                p.mun(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
                            } else {
                                p.monthPicker.un('click', p.onMonthClick)
                                p.monthPicker.un('dblclick', p.onMonthDblClick)
                            }
                            p.onMonthClick = p.onMonthClick.createSequence(this.pickerClick, this);
                            p.onMonthDblClick = p.onMonthDblClick.createSequence(this.pickerDblclick, this);
                            p.mon(p.monthPicker, 'click', p.onMonthClick, p);
                            p.mon(p.monthPicker, 'dblclick', p.onMonthDblClick, p);
                        }
                        p.monthPicker.show();
                    }
                },
    
                pickerClick: function(e, t) {
                    var picker = this.picker;
                    var el = new Ext.Element(t);
                    if (el.is('button.x-date-mp-cancel')) {
                        picker.menu.hide();
                    } else if (el.is('button.x-date-mp-ok')) {
                        var p = picker.menu.picker;
                        p.setValue(p.activeDate);
                        p.fireEvent('select', p, p.value);
                    }
                },
    
                pickerDblclick: function(e, t) {
                    var el = new Ext.Element(t);
                    var parent = el.parent();
                    if (parent &amp;&amp; (parent.is('td.x-date-mp-month') || parent.is('td.x-date-mp-year'))) {
                        var p = this.picker.menu.picker;
                        p.setValue(p.activeDate);
                        p.fireEvent('select', p, p.value);
                    }
                }
            };
        </script>
       
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
       
            <ext:DateField runat="server" Editable="false" Format="MMM yyyy">
                <Plugins>
                    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.MonthPickerPlugin" />
                </Plugins>
            </ext:DateField>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] [1.0] Date Picker enhancement

    Yes Vlad that is exactly what one of my suggestions is.

  4. #4

    RE: [CLOSED] [1.0] Date Picker enhancement

    Hi,

    We have added MonthPicker plugin which works with DateField and DatePicker. Please update from from SVN

Similar Threads

  1. Replies: 3
    Last Post: May 09, 2012, 4:28 PM
  2. [CLOSED] Date picker BUG
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Dec 08, 2010, 2:19 PM
  3. [CLOSED] Date Picker
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 09, 2010, 8:35 PM
  4. Replies: 3
    Last Post: May 06, 2010, 12:48 PM
  5. [CLOSED] Date picker mindate bug?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 02, 2009, 11:28 AM

Posting Permissions