https://github.com/gportela85/DateTimeField

A DateTime Field UX for 5.x and 6.x that is also compatible with Architect 3.x.
https://github.com/gportela85/DateTimeField

Last synced: 27 days ago
JSON representation

A DateTime Field UX for 5.x and 6.x that is also compatible with Architect 3.x.

• Host: GitHub
• URL: https://github.com/gportela85/DateTimeField
• Owner: gportela85
• License: mit
• Created: 2014-07-18T18:55:29.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2019-08-21T10:13:39.000Z (over 5 years ago)
• Last Synced: 2024-11-10T19:22:53.902Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 1.27 MB
• Stars: 72
• Watchers: 9
• Forks: 35
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-extjs - DateTimePicker - An useful widget to pick date and time. (Extensions, components / Components, ux)

README

        
DateTimeField

=============

A DateTime Form Field UX for Sencha, ExtJS 5.x and ExtJS 6.x. 


For ExtJS 4.2.x, please access [here](https://github.com/gportela85/DateTimeField/tree/datetimefield-4.2.x).

This widget displays a Time Picker panel by the Date Picker panel. 


There is a DateTimeField.aux file already encapsulated and ready for use with Sencha Architect 3.x.

---

Usage

You only need to change the format value for the Time Picker to work. Having a format with "H" makes it 24/hour and "h" makes it 12/hour format. 


Eg: 'm/d/Y H:i:s' or 'm/d/Y h:i A'

Accessibility





SHIFT + UP/DOWN - Changes the Hour Value



SHIFT + CMD (or CTRL Windows) + UP/DOWN - Changes the Minute Value






Fiddle: https://fiddle.sencha.com/#fiddle/rn3


---

Screenshots - Access Theme

[![access12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Access_12.png)]()

[![access24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Access_24.png)]()

Screenshots - Classic Theme

[![classic12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Classic_12.png)]()

[![classic24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Classic_24.png)]()

Screenshots - Neptune Theme

[![neptune12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Neptune_12.png)]()

[![neptune24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Neptune_24.png)]()

Screenshots - Crisp Theme (ExtJS 5)

[![neptune12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Crisp_12.png)]()

[![neptune24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Crisp_24.png)]()

Screenshots - Triton Theme (ExtJS 6)

[![triton12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Triton_12.png)]()

[![triton24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Triton_24.png)]()

Screenshots - Graphite Theme (ExtJS 6)

[![graphite12](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Graphite_12.png)]()

[![graphite24](https://raw.githubusercontent.com/gportela85/DateTimeField/master/resources/images/dateTimePicker_Graphite_24.png)]()