What is it?
At some time in a webform you have to capture date and time together with timezone. This YUI3 module is to help you in progressively enhance "date-time form input" to popup (calendar and slider based) UI to input date and time with TimeZone.
How to Use?
<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?gallery-2012.12.12-21-11/build/gallery-datetime-input/assets/gallery-datetime-input/gallery-datetime-input-core.css"> <script> YUI({ gallery: 'gallery-2012.12.12-21-11' }).use('gallery-datetime-input', function (Y) { new Y.DateTimeInput({ inputBox:"#datetime-input" }); }); </script>
Hey Mark, why dont you add alternate text field for hours and minutes for keyboard lovers to be precise on first time itself instead of dragging the bar and adjust. Of course, 95% people would use this.
ReplyDeleteYUI slider is keyboard accesible so it solves the purpose a bit. I agree with you of having a textfield to input precise time, but then there is a textfield already there which is progressively enhanced, user can also use that textfield to input precise date and time.
ReplyDeleteThanks for reading my blog :)
Having troubles with this module - I'm using it in a panel, and it will only render behind the panel..
ReplyDeleteI've tried giving a z-index style to yui3-gallery-datetime-overlay but no effect
Sorry this is not documented properly but this is what you can do
ReplyDeleteafter ui is shown to user call this
dateTimeObject.uiOverlay.set('zIndex',100)
this is set it zIndex.. see if this works
Unfortunately that didn't work as expected - do you have any other ideas?
ReplyDeleteafter my panel.show() I did a uiOverlay.set('zIndex', 1000 )
Still appears behind the panel
@kevin
ReplyDeletein that case i have to look at your problem separately, is it possible for you to share code or online sample??
I can't really share my code, but basically, i create a panel when i click a menu item i show it - inside it there is an input where I tie a click to it to show your DateTime picker
ReplyDeleteWhen I call dateTime.uiOverlay.set('zIndex', 10000) it says uiOverlay does not exist
Ok, uiOverlay property is available only after the UI is built after the first time it is shown.. (i.e. input is focused)
ReplyDeleteSo what you do is attach a focus event on input and call
Y.one("#mydatetime").on('focus',function(){
setTimeout(function(){
datetimeObject.uiOverlay.set('zIndex', 10000);
},10);
});
that worked, thank you so much for your time and thanks for writing this module
ReplyDeleteSorry to bother you again, but I noticed a couple things when using the module:
ReplyDeleteThe sliders (on my site) don't actually change the value of Hour or Minute in the slider text - does change in the input box, no problem there
Also, is there a way to specify date format?