[CLOSED] MonthPicker and MonthField

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] MonthPicker and MonthField

    Ext.Net provides both DatePicker and DateField. At version 3.x, MonthPicker has been added and i think that it would be awesome if we also have MonthField.

    MonthPicker example: http://dev.sencha.com/ext/5.1.0/exam...ink/#form-date

    I also think that it would be great if MonthPicker was added in the Ext.Net examples.
    Last edited by Dimitris; Feb 16, 2015 at 5:11 AM. Reason: [CLOSED]
  2. #2
    Hi Raphael,

    Please use:
    <ext:DateField runat="server" Type="Month" />
    I also think that it would be great if MonthPicker was added in the Ext.Net examples.
    Thank you for the suggest. I've added the Form\DateField\Overview example to the trunk.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Overview of Date and Month Fields - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Crisp" />
    
            <h1>Overview of Date and Month Fields</h1>
    
            <ext:Container runat="server" Width="500">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Center" />
                </LayoutConfig>
                <Items>
                    <ext:Container runat="server" Layout="HBoxLayout" MarginSpec="0 0 20 0">
                        <Items>
                            <ext:Panel runat="server" Title="Date Field" MarginSpec="0 20 0 0">
                                <Items>
                                    <ext:DateField runat="server" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="Month Field">
                                <Items>
                                    <ext:DateField runat="server" Type="Month" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Container>
    
                    <ext:Container runat="server" Layout="HBoxLayout" MarginSpec="0 0 20 0">
                        <Items>
                            <ext:Panel runat="server" Title="Date Picker" MarginSpec="0 20 0 0">
                                <Items>
                                    <ext:DatePicker runat="server" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="Month Picker">
                                <Items>
                                    <ext:MonthPicker runat="server" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Container>
    
                    <ext:Container runat="server" Layout="HBoxLayout">
                        <Items>
                            <ext:Panel runat="server" Title="Date Picker (no today)" MarginSpec="0 20 0 0">
                                <Items>
                                    <ext:DatePicker runat="server" ShowToday="false" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel runat="server" Title="Month Picker (no buttons)">
                                <Items>
                                    <ext:MonthPicker runat="server" ShowButtons="false" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
  3. #3
    I just would like to suggest to set the Format property, as shown below:

    Default behaviour

    Click image for larger version. 

Name:	mp001.png 
Views:	9 
Size:	1.0 KB 
ID:	17591
    <ext:DateField Type="Month" runat="server" />
    Using format to show just the month and year
    Click image for larger version. 

Name:	mp002.png 
Views:	6 
Size:	817 Bytes 
ID:	17601
    <ext:DateField Type="Month" Format="m/y" runat="server" />
  4. #4
    Daniil, please mark this thread as closed.
  5. #5
    Or this one:
    Format="MMMM yyyy"
    We will probably leave it for developers to pick up a required Format:)
  6. #6
    Daniil, i found an issue regarding the "Month" DateField format

    On the following example (Default behaviour), _dt.getValue() outputs the date at the first day of the selected month / year

    Mon Dec 01 2014 00:00:00 GMT-0300 (Hora oficial do Brasil)

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var analyze = function () {
                alert(App._dt.getValue());
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
        <ext:Button Text="Analyze" runat="server">
            <Listeners>
                <Click Handler="analyze();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:DateField ID="_dt" Type="Month" runat="server" />
    </body>
    </html>


    But when DateField's Format is set to "m/y" or "MMMM yyyy", _dt.getValue() outputs the (current day or last day of the month) of the selected month / year.

    Mon Dec 22 2014 00:00:00 GMT-0300 (Hora oficial do Brasil)



    To overcome the issue presented above, it's necessary to override Ext.form.field.Date's safeParse and get the first date of the month, as shown below (Lines 11 to 15):

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var analyze = function () {
                alert(App._dt.getValue());
            }
    
            Ext.form.field.Date.override({
                safeParse: function (value, format) {
                    var result = this.callParent(arguments);
                    if (this.type == "month") {
                        return Ext.Date.getFirstDateOfMonth(result);
                    }
                    return result;
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
        <ext:Button Text="Analyze" runat="server">
            <Listeners>
                <Click Handler="analyze();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:DateField ID="_dt" Type="Month" Format="MMMM yyyy" runat="server" />
    </body>
    </html>
    Mon Dec 01 2014 00:00:00 GMT-0300 (Hora oficial do Brasil)
  7. #7
    But when DateField's Format is set to "m/y" or "MMMM yyyy", _dt.getValue() outputs the (current day or last day of the month) of the selected month / year.
    If the current day is greater than the days in the month, then the last day of the month is used.
  8. #8
    I have reproduced the difference in behaviors. Well, I am not sure how to consider. A defect? Maybe. From other side, I would say a day is supposed to be ignored if a month field is used.

    If the current day is greater than the days in the month, then the last day of the month is used.
    Sorry, I don't quite understand the phrase. Please clarify how could the current day be greater than the days in month?:) I might misunderstand something.
  9. #9
    If today is 12/31/2014 and you select February 2014, so 31 is greater than the days in february 2014, that is 28 days.
  10. #10
    Thank you for the clarification.

    I am not sure what to do with that. Raphael, what would be your suggestion?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 13
    Last Post: Apr 27, 2016, 1:44 AM
  2. Replies: 5
    Last Post: Aug 13, 2013, 3:52 PM
  3. [CLOSED] Can't resolve the ext:MonthPicker
    By KevinWinter in forum 2.x Help
    Replies: 2
    Last Post: Aug 13, 2013, 8:35 AM
  4. Download MonthPicker Plugins
    By initial_b in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2011, 11:12 AM
  5. [CLOSED] [1.0] DateField MonthPicker with daterange
    By MP in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 08, 2010, 10:25 PM

Posting Permissions