DatePicker won't select the last item in a list

**IAmCoder** · 20 Aug 2012 4:15 AM

REQUIRED INFORMATION

Touch version tested:

Sencha Touch 2.0.2

Browser versions tested against:

Chrome 21.0.1180.79

DOCTYPE tested against:

<!DOCTYPE HTML>

Description:

The last item in a DatePicker list (month, day or year) can't be selected. It reverts to the second last item in the list.

Steps to reproduce the problem:

Create an Ext.field.DatePicker (in an Ext.form.FieldSet in an Ext.form.Panel in an Ext.navigation.View in an Ext.Container in an Ext.tab.Panel). Run it and manually select the last year (2012).

The result that was expected:

The year 2012 is selected.

The result that occurs instead:

The year 2011 is selected.

Operating System:

Windows 7

test case:

Code:

Ext.Viewport.add(
    new Ext.picker.Date()
);

**mitchellsimoens** · 20 Aug 2012 6:58 AM

Thank you for the report.

**Jamie Avins** · 24 Aug 2012 8:54 AM

Is this only on Chrome or also on device?

**IAmCoder** · 27 Aug 2012 3:37 AM

This is only in chrome.

**skitchpatterson3** · 27 Aug 2012 8:31 AM

Didn't see this was its own post; I just replied to a closed post regarding a similar issue.

I am getting a strange misalignment problem when I use a datepicker in my form. I pull it in using xtype (code shown below attached picture). Perhaps this is a weird bug caused by Chrome v.21.0.1180.83 m ? I know of the text truncation issues (ellipses) that happen when using this latest version of Chrome, and so maybe this is another UI issue?

datepickermisaligned.png

Here's the behavior: If I move any column from its default value (default for value coded as "value: new Date()"), after the animation ends, the selection snaps back to some misaligned position, depending on the selection made. For example, if I select "January 1, 1980" (first/default minimum date), then there is no post-selection movement. However, if I select "December 31, 2012" (attempted in screenshot above), the datepicker moves the selection after animation end to November 29, 2011. If I click "done", the value loaded is 11/29/2011.

It seems the post-selection movement amount of pixels or whatever depends on how far away the date is from the earliest available date. Hopefully that bit of info will help with the debugging.

As stated above, but I'm testing on Windows Server 2008, Chrome desktop v. 21.0.1180.83 m (latest version to date, July 2012).

Below is my code - nothing fancy by any means.

Code:

Ext.define('myApp.view.IncidentForm', {
    extend: 'Ext.form.Panel',
    xtype: 'incidentform',
    
    requires: [
        'Ext.form.Panel',
        'Ext.field.DatePicker',
        'Ext.field.Select',
        'Ext.field.Toggle'
    ],
    
    config: {
        title: 'Incident',
        id: 'incidentForm',
        
        items: [
            {
                html: '<h4>Report an Incident</h4>'
            },
            {
                xtype: 'fieldset',
                title: 'Basic Info',
                instructions: 'All fields are required.',
                items: [
                    {
                        xtype: 'datepickerfield',
                        name: 'date',
                        label: 'Date',
                        value: new Date()
                    },
                    {
                        xtype: 'textfield',
                        name: 'time',
                        label: 'Time (hh:mm)'
                    },
                    {
                        xtype: 'selectfield',
                        name: 'eventType',
                        label: 'Event Type',
                        options: [
                            {text: 'Option 1'},
                            {text: 'Option 2'},
                            {text: 'Option 3'},
                            {text: 'Option 4'}
                        ]
                    }
                ]
            },
        ]
    }
});

**btek** · 28 Aug 2012 1:38 AM

We are getting this in chrome as well.

**skitchpatterson3** · 4 Sep 2012 10:37 AM

In my screenshot above, I am using ST 2.0.1.1. We have a previous version of our app built with ST 1.1.1 which does not have the same misalignment issue.

**dawesi** · 3 Oct 2012 3:57 PM

it does this on the 'rank' field in the kitchen sink example, only chrome for me.

**jweber** · 19 Oct 2012 10:45 AM

This is happening for me in 2.1rc2 too, in Chrome.

**Soenhay** · 26 Oct 2012 9:32 AM

Hi,

We are having the same issue of not being able to select the last item in a date picker with Chrome, Android, and iPhone.

Also, we are having the same issue as skitchpatterson3 stated above. Some additional notes on that part:
-The alignment issue does not happen when picking a month.
-Picking a day or year causes the alignment issue.
-Picking a month after the alignment is messed up will fix the alignment of the day but not the year.

DatePicker won't select the last item in a list

Thread Tools

Search Thread

Display

DatePicker won't select the last item in a list

DatePicker won't select the last item in a list

Same problem here...

Same problem here...

ST 1.1.1 works though...

ST 1.1.1 works though...

Same Issue

Same Issue

Tags for this Thread