Aug 11, 2010, 9:29 PM
[CLOSED] Styling dates in DateField control
I am trying to Disable, Hilite, Color, etc individual dates on a date control. A co-worker posted this in a thread that was marked solved. I took the code from there and converted to VB but it doesn't seem to do anything. I am assuming that the dates loaded into "specificDates" (6/15/2010, 6/20/2010...) are supposed to show up formatted with the ".your-class-for-specific-dates" css style. So either I'm not understanding the example or something got lost in translation to VB.
I converted the code from the following thread:
http://forums.ext.net/showthread.php...eField-control
Here is the converted code
I converted the code from the following thread:
http://forums.ext.net/showthread.php...eField-control
Here is the converted code
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'A year in YYYY format, a month from 0 to 11, a day from 1 to 31
Dim specificDates As [String] = "[" + "new Date(2010, 06, 15)" + ",new Date(2010, 06, 20)" + ",new Date(2010, 06, 25)" + ",new Date(2010, 07, 25)" + ",new Date(2010, 05, 25)" + "]"
Me.df.CustomConfig.Add(New Ext.Net.ConfigItem("specificDates", specificDates, Ext.Net.ParameterMode.Raw))
End Sub
</script>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
a.x-datepicker-eventdate
{
border: 1px solid #a3bad9;
padding: 1px 4px;
}
.your-class-for-specific-dates
{
color: red;
font-family: Arial;
font-size: 120%;
font-style: oblique;
}
</style>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<script type="text/javascript">
Ext.override(Ext.DatePicker, {
highlightDates: function(specificDates, cssClass) {
if (Ext.isEmpty(specificDates))
return;
var dateValues = new Array();
Ext.each(specificDates, function(d, i) {
dateValues.push(d.getTime());
});
var css = cssClass || 'x-datepicker-eventdate';
var cells = this.getEl().select('a.x-date-date');
var filteredCells =
cells.filter(function(el, index) {
return (dateValues.indexOf(el.dom.dateValue) > -1);
});
filteredCells.addClass(css);
Ext.each(filteredCells.elements, function(e) {
e.childNodes[0].className = 'your-class-for-specific-dates';
})
}
});
Ext.form.DateField.override({
onTriggerClick: function() {
if (this.disabled) {
return;
}
if (this.menu == null) {
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate: this.minValue,
maxDate: this.maxValue,
disabledDatesRE: this.disabledDatesRE,
disabledDatesText: this.disabledDatesText,
disabledDays: this.disabledDays,
disabledDaysText: this.disabledDaysText,
format: this.format,
showToday: this.showToday,
minText: String.format(this.minText, this.formatDate(this.minValue)),
maxText: String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
this.menu.picker.highlightDates(this.specificDates); //workaround
}
});
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
<ext:DateField runat="server" ID="df">
</ext:DateField>
</body>
</html>
Last edited by geoffrey.mcgill; Aug 12, 2010 at 9:09 PM.
Reason: [CLOSED]
