Please see the following sample
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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 runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var data = new System.Collections.Generic.List<object>(20);
for (int i = 0; i < 20; i++)
{
data.Add(new { Date = DateTime.Now.AddDays(i) });
}
Store1.DataSource = data;
Store1.DataBind();
}
}
protected void FilterClick(object sender, DirectEventArgs e)
{
string fromDate = Ext.Net.Utilities.DateTimeUtils.DateNetToJs(FromDate.SelectedDate);
string toDate = Ext.Net.Utilities.DateTimeUtils.DateNetToJs(ToDate.SelectedDate);
Store1.FilterBy(new JFunction { Fn = string.Format("getDateFilter({0}, {1}, '{2}')", fromDate, toDate, "Date") });
}
</script>
<script type="text/javascript">
function getDateFilter(from, to, dataIndex){
from = from.clearTime(true).getTime();
to = to.clearTime(true).getTime();
return function(record){
var val = record.get(dataIndex);
if(!Ext.isDate(val)){
return false;
}
val = val.clearTime(true).getTime();
if (from > val || to < val) {
return false;
}
return true;
};
}
</script>
</head>
<body style="padding:20px;">
<form id="form1" runat="server">
<ext:ResourceManager ID="ScriptManager1" runat="server">
</ext:ResourceManager>
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:DateField ID="FromDate" runat="server" Note="From" />
<ext:DateField ID="ToDate" runat="server" Note="To" />
<ext:Button runat="server" Text="Filter" OnDirectClick="FilterClick" />
</Items>
</ext:Container>
<ext:GridPanel runat="server" Width="250" AutoHeight="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Date" Type="Date" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:DateColumn DataIndex="Date" Header="Date" Width="200" Format="dd/MM/yyyy" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>