Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: Extend Date Picker for DateTimePicker but problem with numberfield not editable

  1. #11
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Germany
    Posts
    538
    Answers
    1

    Default

    Quote Originally Posted by hakimio View Post
    You can also do what Guilherme Lopes Portela did in his DateTimeField component - instead of messing with date picker's template, just add a separate picker for hours and minutes next to it.
    Right, but then it basically behaves like two separate components. Our UX department wouldn't like that

    Quote Originally Posted by hakimio View Post
    BTW, the UX you made doesn't work with Triton, Neptune Touch and Crisp Touch themes. Also, time fields are reset if you use month/year picker.
    Funny, the theme I'm developing with is Triton. Or are you referring to "modern" Triton? This is only tested under "classic", should have been more clear about that, sorry.

  2. #12
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Quote Originally Posted by Stefan B View Post
    Right, but then it basically behaves like two separate components. Our UX department wouldn't like that
    The pickers are separated but the component is still the same. Take a look at the screenshot.

    Funny, the theme I'm developing with is Triton. Or are you referring to "modern" Triton? This is only tested under "classic", should have been more clear about that, sorry.
    No, I only tested with classic toolkit. The problem is that you can't type anything directly into numberfields, you can only use spinners to adjust the value. It seems to work with classic and neptune theme but not with triton.

  3. #13
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Germany
    Posts
    538
    Answers
    1

    Default

    That's strange, the number fields not being able to receive focus and becoming editable via via keyboard is one of the key changes I made to the original code. Are you sure you checked out the code I posted here instead of the OP's code?

    And yes, you are right, the date and time input controls are of course part of the same component. When I say "behave", I refer to the user experience, not the implementation.

  4. #14
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    I tested the fiddle posted by milanz. The component works fine when Classic or Neptune theme is used but not the others. I am using the latest version of Chrome. Haven't tested with anything else.

  5. #15
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Germany
    Posts
    538
    Answers
    1

    Default

    Just increase the default number field width to 80 back from 50. The visible portion of the fields simply becomes too small with Triton's default padding.

  6. #16
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Yes, it works then. Now only resetting time when year/month picker is used issue has to be fixed and a config to hide seconds numberfield has to be introduced.

  7. #17
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Germany
    Posts
    538
    Answers
    1

    Default

    Okay, had to override the "onOkClick" method that handles month picker selection to apply the time information from the spinners.
    Fixed it in the code I posted.

  8. #18
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Thanks. The fix seems to work well.
    Just a couple other small issues:
    • Pressing "Today" or space bar should set the time to current time instead of "0:00:00".
    • The numberfield width should depend on the theme.
    Also, here is my slightly modified version which doesn't include seconds field and reverts the numberfield width to 50px to look good with Crisp and Neptune themes.

  9. #19
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Sarnia, ON, Canada
    Posts
    62

    Default

    Quote Originally Posted by Stefan B View Post
    @ milanz,

    apart from the classpath of the date picker that I didn't adjust before pasting the code here (fixed above), and the changed default width for the time spinners, were there any other issues? I'd like to avoid them too in my app obviously but were not able to spot any more diffs between your fiddle and my code.
    I think that's the only thing I modified with your version. But today I noticed that adding the control as an editor control on a grid column was not updating the cell value as expected - but I haven't had time to look into the cause.

  10. #20
    Sencha User
    Join Date
    Mar 2013
    Posts
    33
    Answers
    2

    Default

    Managed to solve it after studying ExtJS source code.
    I updated my Sencha Fiddle to make it work.
    Basically, the hack is on the picker, onMouseDown() function.
    Because of it prevent all default events on mouse down, so it cancel all the events and make those textfield / numberfield you used for the time not functioning.
    Hence, I check the targetId, and do nothing (aka do not prevent defaults) when it is numberfield.

    Updated Sencha Fiddle at:
    https://fiddle.sencha.com/#fiddle/tc3

Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Date picker problem
    By heartlesslove in forum Ext: Q&A
    Replies: 3
    Last Post: 9 Oct 2013, 3:50 AM
  2. problem with date picker
    By lchurch in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 1 Apr 2012, 12:06 PM
  3. Date Picker Problem
    By Sameer Khan in forum Sencha Touch 1.x: Q&A
    Replies: 1
    Last Post: 29 Nov 2011, 6:24 AM
  4. Problem Date picker
    By rajakrishnamca in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 3 Jun 2008, 1:45 AM
  5. Problem with date picker
    By achebv in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 2 Oct 2007, 12:01 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •