- Extend datefield
- set the dropdownFactory in the constructor to an IFactory var
- then in css, set your custom datefielddatechooser's settings (which may be identical or different to your own datechooser custom skins)
- and finally, in css (or wherever else you set your styles), for the extended datefield, set the dateChooserStyleName to null...i.e. ClassReference(null)
DateFieldBase.as
package com.lordB8r.view.component.controls.datefield{
import flash.events.Event;
import mx.controls.DateField;
import mx.core.ClassFactory;
import mx.core.IFactory;
public class DateFieldBase extends DateField{
private _dateChooser:IFactory = new ClassFactory(DateFieldDateChooserBase);
public function DateFieldBase(){
super();
this.dropdownFactory = _dateChooser;
}
}
DateFieldDateChooserBase.as:
package view.component.datefield.datechooser{
import mx.controls.DateChooser;
import view.component.datechooser.skins.CommonsDateChooserNextMonthSkin;
import view.component.datechooser.skins.CommonsDateChooserPrevMonthSkin;
import view.component.datechooser.skins.CommonsDateChooserRollOverIndicatorSkin;
import view.component.datechooser.skins.CommonsDateChooserSelectionIndicatorSkin;
import view.component.datechooser.skins.CommonsDateChooserTodayIndicatorSkin;
[Style(name="highlightFillColors", type="Array", arrayType="uint")]
public class DateFieldDateChooserBase extends DateChooser{
public function DateFieldDateChooserBase(){
super();
setStyle("nextMonthSkin", nextMonthSkin);
setStyle("prevMonthSkin", prevMonthSkin);
setStyle("rollOverIndicatorSkin", rollOverIndicatorSkin);
setStyle("selectionIndicatorSkin", selectionIndicatorSkin);
setStyle("todayIndicatorSkin", todayIndicatorSkin);
}
protected function get nextMonthSkin():Class{
return CommonsDateChooserNextMonthSkin;
}
protected function get prevMonthSkin():Class{
return CommonsDateChooserPrevMonthSkin;
}
protected function get rollOverIndicatorSkin():Class{
return CommonsDateChooserRollOverIndicatorSkin;
}
protected function get selectionIndicatorSkin():Class{
return CommonsDateChooserSelectionIndicatorSkin;
}
protected function get todayIndicatorSkin():Class{
return CommonsDateChooserTodayIndicatorSkin;
}
}
}
CSS:
datefield|DateFieldBase{
date-chooser-style-name: ClassReference(null);
}
datechooser|DateFieldDateChooserBase{
headerColors: #e2e6eb, #f4f5f7;
todayColor: #818181;
rollOverColor: #b2e1ff;
selectionColor: #7fceff;
color: #373830;
borderColor: #b7babc;
headerStyleName:"mydateChooserHeaderStyle";
weekDayStyleName:"mydateChooserWeekDayStyle";
todayStyleName:"mydateChooserTodayStyle";
}
.mydateChooserHeaderStyle {
color: #373830;
font-weight: bold;
}
.mydateChooserWeekDayStyle {
color: #373830;
font-weight: bold;
}
.mydateChooserTodayStyle {
color: #ffffff;
fontWeight: normal;
fontStyle: normal;
textDecoration: none;
border-visible: false;
}
DateChooser
