I found a plugin on Sencha's site that seemed to be just what I was looking for. There were a few issues with it.
#1 No install instructions.
This is the first plugin I've used and I couldn't find anything on Sencha's site that was helpful. After some digging I found instructions for another plugin that pointed me in the right direction.
- Copy the ux folder to your app directory.
- Open your app.js file and locate the Ext.Loader line. If there isn't a setPath method chained to setConfig add one. Add these key/value pairs to the object. They correspond to the Ext.define namespaces for DateTime.js and DateTimePicker.js located in the ux folder.
- 'Ext.ux.field' : './ux'
- 'Ext.ux.picker': './ux'
The first problem I had was the cancel button destroyed the picker. One feature of the plugin allows you to destroy the picker to save memory. It's missing a check for the destroy option and nukes it on cancel.
The second problem is if you press OK to the default date it doesn't actually read it properly. Deep in DateTime.js the getValue method looks through the items on the picker and grabs the slots. It calls getValue on each slot but returns nothing. You need to pass true for it to read the proper value.
I was able to find the original source on github. I forked the repo and fixed all the bugs I found. I submitted a pull request so hopefully I'll hear back from the guy soon so future users will have fewer problems.
The github version of the plugin has integrated my pull request that fixes the issues I ran into.