Results 1 to 4 of 4

Thread: Date field change date picker style

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
      0  

    Default 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 User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,750
    Answers
    130
    Vote Rating
    128
      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

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
      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 User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,750
    Answers
    130
    Vote Rating
    128
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •