Hello @opendat2000!
Here you go!
Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax),
filters = me.getStore().getFilters(),
filter = me.rangeFilter;
if (min > max) {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min || date <= max;
}
});
} else {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min && date <= max;
}
});
}
//me.store.filter();
filters.add(filter);
filters.endUpdate();
}
});
And, for reference, full code working on 4.x:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="61281-timeAmPm.aspx.cs" Inherits="ExtNetPlaygroundMCV_v25.aspEngine._60014_timeAmPm" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Edit Form View - Ext.NET Examples</title>
<script type="text/javascript">
var onKeyUp = function ()
{
var me = this,
v = me.getValue(),
field;
if (me.startDateField)
{
field = Ext.getCmp(me.startDateField);
field.setMaxValue(v);
me.dateRangeMax = v;
}
else if (me.endDateField)
{
field = Ext.getCmp(me.endDateField);
field.setMinValue(v);
me.dateRangeMin = v;
}
field.validate();
};
Ext.define("Ext.Picker.TimeOverride", {
override: "Ext.picker.Time",
updateList: function () {
var me = this,
min = me.normalizeDate(me.minValue || me.absMin),
max = me.normalizeDate(me.maxValue || me.absMax),
filters = me.getStore().getFilters(),
filter = me.rangeFilter;
if (min > max) {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min || date <= max;
}
});
} else {
filter = me.rangeFilter = new Ext.util.Filter({
filterFn: function(record) {
var date = record.get('date');
return date >= min && date <= max;
}
});
}
//me.store.filter();
filters.add(filter);
filters.endUpdate();
}
});
Ext.define("Ext.form.field.TimeOverride", {
override: "Ext.form.field.Time",
betweenText: "The time in this field must NOT be between {0} and {1}",
getErrors: function (value) {
var me = this,
format = Ext.String.format,
errors = me.callSuper(arguments),
minValue = me.minValue,
maxValue = me.maxValue,
date;
value = me.formatDate(value || me.processRawValue(me.getRawValue()));
if (value === null || value.length < 1) {
return errors;
}
date = me.parseDate(value);
if (!date) {
errors.push(format(me.invalidText, value, Ext.Date.unescapeFormat(me.format)));
return errors;
}
// if minValue and maxValue are specified and minValue is after maxValue (night shift, for example)
if (minValue && maxValue && (minValue > maxValue)) {
return errors;
} else { // normal/original test
if (minValue && date < minValue) {
errors.push(format(me.minText, me.formatDate(minValue)));
}
if (maxValue && date > maxValue) {
errors.push(format(me.maxText, me.formatDate(maxValue)));
}
}
return errors;
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" />
<ext:Window ID="FormWindow" runat="server"
Title="Form View"
Width="540"
Height="310"
BodyPadding="15"
Resizable="false"
Closable="false"
Layout="Fit">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Border="false"
Layout="Form">
<Items>
<ext:FieldContainer ID="FieldContainer1" runat="server"
FieldLabel="Range 08.30 -> 18.30"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart1" runat="server"
FieldLabel="Start 1"
LabelWidth="60"
MinTime="08:30"
MaxTime="18:30"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="TimeFieldEnd1" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html=" " />
<ext:TimeField ID="TimeFieldEnd1" runat="server"
FieldLabel="End 1"
LabelWidth="60"
MinTime="08:30"
MaxTime="18:30"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="TimeFieldStart1" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer2" runat="server"
FieldLabel="Range 08.15 -> 18.45"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart2" runat="server"
FieldLabel="Start 2"
LabelWidth="60"
MinTime="08:15"
MaxTime="18:45"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="TimeFieldEnd2" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html=" " />
<ext:TimeField ID="TimeFieldEnd2" runat="server"
FieldLabel="End 2"
LabelWidth="60"
MinTime="08:15"
MaxTime="18:45"
Increment="15"
Vtype="daterange"
LabelPad="2"
Width="135">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="TimeFieldStart2" Mode="Value" />
</CustomConfig>
<Listeners>
<Change Fn="onKeyUp" />
</Listeners>
</ext:TimeField>
</Items>
</ext:FieldContainer>
<ext:FieldContainer ID="FieldContainer3" runat="server"
FieldLabel="Range 19.00 -> 07.00"
AnchorHorizontal="100%"
Layout="HBoxLayout">
<Items>
<ext:TimeField ID="TimeFieldStart3" runat="server"
FieldLabel="Start 3"
LabelWidth="60"
MinTime="19:00"
MaxTime="07:00"
increment="15"
Vtype="daterange"
LabelPad="2" ValidateOnBlur="false" ValidateOnChange="false"
Width="135">
</ext:TimeField>
<ext:DisplayField runat="server" Width="23" Html=" " />
<ext:TimeField ID="TimeFieldEnd3" runat="server"
FieldLabel="End 3"
LabelWidth="60"
MinTime="19:00"
MaxTime="07:00"
LabelPad="2" ValidateOnBlur="false" ValidateOnChange="false"
Width="135">
</ext:TimeField>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Items>
</ext:Window>
</form>
</body>
</html>
Hope this helps!