What's New?

[CLOSED] [1.0] DateField MonthPicker with daterange

  1. #1
    Oct 30, 2010, 5:59 PM

    [CLOSED] [1.0] DateField MonthPicker with daterange

    Hi,

    Is there a way to activate the daterange functionality on DateField that uses MonthPicker plugin? DateRange only works if no plugin is declared.

    Here's my code:

    <ext:CompositeField ID="compositeStudyYear" runat="server" FieldLabel="Study Year">
    <Items>
        <ext:DateField ID="datefieldStudyYearFrom" runat="server" Width="100" Vtype="daterange">
            <CustomConfig>
                <ext:ConfigItem Name="endDateField" Value="#{datefieldStudyYearTo}" Mode="Value" />
            </CustomConfig>   
            <Plugins>
                <ext:MonthPicker runat="server"></ext:MonthPicker>
            </Plugins>
        </ext:DateField>
        <ext:Label runat="server" Text=" To " />
        <ext:DateField ID="datefieldStudyYearTo" runat="server" Width="100" Vtype="daterange">
            <CustomConfig>
                <ext:ConfigItem Name="startDateField" Value="#{datefieldStudyYearFrom}" Mode="Value" />
            </CustomConfig>     
            <Plugins>
                <ext:MonthPicker ID="MonthPicker1" runat="server"></ext:MonthPicker>
            </Plugins>
        </ext:DateField>
    </Items>
</ext:CompositeField>
    Appreciate your help on this.

    Regards,
    Marcelo
    Last edited by Daniil; Nov 09, 2010 at 8:39 PM. Reason: [CLOSED]
  2. #2
    Oct 31, 2010, 8:35 PM
    Hi,

    Please clarify do you mean "disabling" months and years which are not within a range?

    It appears that the MonthPicker plugin doesn't support this behavior.

    We'll look into it but I can't say you that it will be implemented.
    Last edited by Daniil; Nov 01, 2010 at 9:45 AM.
  3. #3
    Oct 31, 2010, 11:58 PM
    Hi,

    Thank you for your response. Yes, I was looking for that functionality. Please look into it and let me know how it can be implemented.

    Appreciate your help on this.

    Regards,
    Marcelo
  4. #4
    Nov 05, 2010, 3:42 PM
    Hi Marcelo,

    Here is the code for you to start implement this requirement.

    There I tried to realize this when MinDate is set.

    I added comment "//added" for each new line in the DatePicker's methods.

    Example
    <%@ 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>Ext.Net Example</title>
    <ext:ResourcePlaceHolder runat="server" />

    <script type="text/javascript">
        Ext.DatePicker.override({
            updateMPMonth: function(sm) {
                var minMonth = this.minDate.getMonth();                 //added
                if (this.mpSelYear > this.minDate.getFullYear()) {      //added
                    minMonth = -1;                                      //added
                }                                                       //added
                this.mpMonths.each(function(m, a, i) {
                    m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
                    m[m.dom.xmonth < minMonth ? 'addClass' : 'removeClass']('my-disabled-class');   //added
                });
            },
            updateMPYear: function(y) {
                this.mpyear = y;
                var ys = this.mpYears.elements,
                    minYear = this.minDate.getFullYear();   //added
                for (var i = 1; i <= 10; i++) {
                    var td = ys[i - 1], y2;
                    if ((i % 2) === 0) {
                        y2 = y + Math.round(i * 0.5);
                        td.firstChild.innerHTML = y2;
                        td.xyear = y2;
                    } else {
                        y2 = y - (5 - Math.round(i * 0.5));
                        td.firstChild.innerHTML = y2;
                        td.xyear = y2;
                    }
                    this.mpYears.item(i - 1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
                    this.mpYears.item(i - 1)[y2 < minYear ? 'addClass' : 'removeClass']('my-disabled-class');       //added
                }
            },
            onMonthClick: function(e, t) {
                e.stopEvent();
                var el = new Ext.Element(t), pn;
                if (el.is('button.x-date-mp-cancel')) {
                    this.hideMonthPicker();
                }
                else if (el.is('button.x-date-mp-ok')) {
                    var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
                    if (d.getMonth() != this.mpSelMonth) {
                        // 'fix' the JS rolling date conversion if needed
                        d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
                    }
                    this.update(d);
                    this.hideMonthPicker();
                }
                else if ((pn = el.up('td.x-date-mp-month', 2))) {
                    if (pn.hasClass('my-disabled-class')) {                 //added
                        return;                                             //added
                    }                                                       //added
                    this.mpMonths.removeClass('x-date-mp-sel');
                    pn.addClass('x-date-mp-sel');
                    this.mpSelMonth = pn.dom.xmonth;
                }
                else if ((pn = el.up('td.x-date-mp-year', 2))) {
                    if (pn.hasClass('my-disabled-class')) {                 //added
                        return;                                             //added
                    }                                                       //added
                    this.mpYears.removeClass('x-date-mp-sel');
                    pn.addClass('x-date-mp-sel');
                    this.mpSelYear = pn.dom.xyear;
                    this.updateMPMonth(this.mpSelMonth);
                }
                else if (el.is('a.x-date-mp-prev')) {
                    if (this.mpyear - 5 < this.minDate.getFullYear()) {     //added
                        return;                                             //added
                    }                                                       //added
                    this.updateMPYear(this.mpyear - 10);
                }
                else if (el.is('a.x-date-mp-next')) {
                    this.updateMPYear(this.mpyear + 10);
                }
            }
        });
    </script>

    <style type="text/css">
        .my-disabled-class a {
            background-color: #eee;
            color: #bbb;
        }
        .my-disabled-class a:hover {
            cursor: default !important;
            background-color: #eee !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:DateField runat="server" MinDate="2010/11/05">
        <Plugins>
            <ext:MonthPicker />
        </Plugins>
    </ext:DateField>
    </form>
</body>
</html>
  5. #5
    Nov 08, 2010, 10:25 PM
    Hi Daniil,

    Thanks. I'll expand it to meet my requirements. You definitely helped me, and I really appreciate it.

Similar Threads

  1. [CLOSED] [1.3] DateField DateRange javascript error
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 06, 2012, 4:41 PM
  2. [CLOSED] DateField daterange validation error
    By jeybonnet in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 15, 2012, 2:13 PM
  3. [CLOSED] Failure to use the Disabled property using Ext: DateField with ext: MonthPicker
    By mmmartins in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 13, 2011, 2:22 PM
  4. [CLOSED] DateField validate problem with Vtype="daterange"
    By asztern in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 30, 2010, 8:06 PM
  5. [CLOSED] DateField with Vtype="daterange" error
    By turione in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 27, 2009, 5:39 PM

Tags for this Thread

Posting Permissions