1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
    navvn is on a distinguished road

      0  

    Default Unanswered: Date field change date picker style

    Unanswered: Date field change date picker style


    Is it possible to change date picker style in date field? All config options are bonded with date filed not ith a picker.

  2. #2
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    take a look at the theming SASS variables or just inspect the dom of the datepicker, see which CSS classes it uses and change them to your needs.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
    navvn is on a distinguished road

      0  

    Default


    well i dont want to change it globaly, just for one date field. When i add id to it and than try to style it i can't because id belongs to input field not to seperatly created div with picker.

  4. #4
    Sencha Premium Member tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    well, then take a look at:
    http://docs.sencha.com/ext-js/4-0/so...orm-field-Date

    Code:
        createPicker: function() {
            var me = this,
                format = Ext.String.format;
    
            return Ext.create('Ext.picker.Date', {
                pickerField: me,
                ownerCt: me.ownerCt,
                renderTo: document.body,
                floating: true,
                hidden: true,
                focusOnShow: true,
                minDate: me.minValue,
                maxDate: me.maxValue,
                disabledDatesRE: me.disabledDatesRE,
                disabledDatesText: me.disabledDatesText,
                disabledDays: me.disabledDays,
                disabledDaysText: me.disabledDaysText,
                format: me.format,
                showToday: me.showToday,
                startDay: me.startDay,
                minText: format(me.minText, me.formatDate(me.minValue)),
                maxText: format(me.maxText, me.formatDate(me.maxValue)),
                listeners: {
                    scope: me,
                    select: me.onSelect
                },
                keyNavConfig: {
                    esc: function() {
                        me.collapse();
                    }
                }
            });
        }
    this is the method you need to override. you can add a custom class there as a varibale and pass it through for your instance of the field.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

Thread Participants: 1