What's New?

[CLOSED] [0.8.2] Date Range - correct month does not open

  1. #1
    Apr 12, 2010, 6:35 AM

    [CLOSED] [0.8.2] Date Range - correct month does not open

    Hi,

    I've been struggling a bit with the date range example based on this:
    https://examples1.ext.net/#/Form/Dat...From-To_Range/

    How can I get the correct month to show up when I trigger the date picker?

    E.g. if I pick a future month on the first field, I want that to be the month that shows up when I trigger the second field. Instead it always shows the current month. This is annoying from a usability perspective because the user has to unnecessarily click forward many months manually to find the first date they can pick.

    Example:
    <ul>[*]I want to select a start date in 16 June (when today is April).[*]I trigger the end date, and expect the June month to open up showing 16 June as earliest date I can pick.[*]Instead, I see it open in April and have to manually click through to June which is not great from a usability perspective.[/list]The only way I can work around this is to set the start date on the blur of the end date, but this isn't sufficient because I want to allow blank end dates.

    I tried to use the BeforeShow listener on the End date but that listener doesn't seem to fire. The Focus listener seems to run too late, and Show fires after the picker has shown, so it is too late. BeforeShow seems ideal, but it doesn't seem to fire? (I tried just a console.log('hello') with Firebug in the BeforeShow listener and it didn't log anything, so I assume it doesn't work at all.

    I also looked around in the Ext JS forums and one or two others had a similar problem but there didn't seem to be an easy answer. Some suggested overriding the DateField in some way, but given we have Coolite wrapping all this, I don't know if you have other alternatives that could be used, or your own wrapper? Any ideas?

    Thanks!
    Anup

    (P.S. In your example, I *think* you have the From and To labels the wrong way round!)
  2. #2
    Apr 12, 2010, 9:50 AM

    RE: [CLOSED] [0.8.2] Date Range - correct month does not open

    Hi,

    Try the following sample
    <%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
    <title>Multiple DateFields with DateRange Validation - Coolite Toolkit Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Multiple DateFields with DateRange Validation</h1>
        
        <ext:Window 
            ID="Panel1" 
            runat="server" 
            Width="350"
            AutoHeight="true"
            Title="DateRange"
            Icon="Date"
            Closable="false"
            BodyStyle="padding:6px;"
            Center&#111;nload="false"
            PageX="20"
            PageY="100">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server" LabelSeparator="">
                    <ext:Anchor>
                        <ext:Label 
                            ID="Label1" 
                            runat="server"                             
                            StyleSpec="display:block;padding:0 0 12px 0;"
                            Html="If a value is specified / selected in the 'FromDate field', 
                            the 'ToDate field' doesn't allow any date prior to the 'FromDate' 
                            entry to be specified / selected and vice versa.">
                        </ext:Label>
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                        <ext:DateField 
                            runat="server"
                            ID="FromDate" 
                            Vtype="daterange"
                            FieldLabel="From">
                            <Listeners>
                                <Render Handler="this.endDateField = '#{ToDate}'" />
                            </Listeners>                            
                        </ext:DateField>
                    </ext:Anchor>
                    <ext:Anchor Horizontal="100%">
                        <ext:DateField 
                            runat="server" 
                            ID="ToDate"
                            Vtype="daterange"
                            FieldLabel="To">
                            <Listeners>
                                <Render Handler="this.startDateField = '#{FromDate}'; this.menu = new Ext.menu.DateMenu();this.menu.on('show', function(){this.picker.update(#{FromDate}.getValue());}, this.menu);" />
                            </Listeners>                            
                        </ext:DateField>     
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>            
        </ext:Window>                
   </form>
</body>
</html>
  3. #3
    Apr 12, 2010, 11:17 AM

    RE: [CLOSED] [0.8.2] Date Range - correct month does not open

    You're a star! It worked, though I slightly tweaked it so that if there was already a value in the second date picker, it was not set to the first date. I also made a change to initialize the second date to today's date if the first date was blank (e.g. if the user went back to the first date and emptied it having filled them both in just moments earlier). Here's what I think is the fully working version:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DateRangeTest.aspx.cs" Inherits="CooliteTest.DateRangeTest" %>
<!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>Date Range Test</title>
</head>
<body>
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <form id="form1" runat="server">
    
        Start Date:
        <ext:DateField ID="StartDate" runat="server" Vtype="daterange" FieldClass="calendar-input" AllowBlank="false" InvalidClass="invalid-date">
            <Listeners>
                <Render Handler="this.endDateField = '#{EndDate}'" />
            </Listeners>
        </ext:DateField>    
        
        End Date:
        <ext:DateField ID="EndDate" runat="server" Vtype="daterange" FieldClass="calendar-input" AllowBlank="true" InvalidClass="invalid-date">
            <Listeners>
                <Render Handler="
                    this.startDateField = '#{StartDate}';
                    this.menu = new Ext.menu.DateMenu();
                    this.menu.on('show', function() {
                        if (!#{EndDate}.getValue()) {
                            this.picker.update(#{StartDate}.getValue() || new Date());
                        }
                    }, this.menu);" />
            </Listeners>
        </ext:DateField>
    

    </form>
</body>
</html>
    If you see further optimizations or improvements in my implementation, please do let me know, else you can marked this as solved.

Similar Threads

  1. [CLOSED] Date range picker...
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 16, 2012, 12:55 PM
  2. [CLOSED] From to date range
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 30, 2012, 9:52 AM
  3. [CLOSED] From-To Date Range
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 30, 2012, 9:52 AM
  4. [CLOSED] [1.2] Date Range Change
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 06, 2011, 4:53 PM
  5. [CLOSED] SplitButton and Date Range
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Dec 17, 2008, 8:02 PM

Posting Permissions