Pages

YUI DateTime Chooser

I just created YUI3 DateTime Chooser Module.

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>

10 comments:

  1. 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.

    ReplyDelete
  2. YUI 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.


    Thanks for reading my blog :)

    ReplyDelete
  3. Having troubles with this module - I'm using it in a panel, and it will only render behind the panel..

    I've tried giving a z-index style to yui3-gallery-datetime-overlay but no effect

    ReplyDelete
  4. Sorry this is not documented properly but this is what you can do

    after ui is shown to user call this

    dateTimeObject.uiOverlay.set('zIndex',100)

    this is set it zIndex.. see if this works

    ReplyDelete
  5. Unfortunately that didn't work as expected - do you have any other ideas?

    after my panel.show() I did a uiOverlay.set('zIndex', 1000 )

    Still appears behind the panel

    ReplyDelete
  6. @kevin
    in that case i have to look at your problem separately, is it possible for you to share code or online sample??

    ReplyDelete
  7. 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

    When I call dateTime.uiOverlay.set('zIndex', 10000) it says uiOverlay does not exist

    ReplyDelete
  8. Ok, uiOverlay property is available only after the UI is built after the first time it is shown.. (i.e. input is focused)

    So 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);
    });

    ReplyDelete
  9. that worked, thank you so much for your time and thanks for writing this module

    ReplyDelete
  10. Sorry to bother you again, but I noticed a couple things when using the module:

    The 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?

    ReplyDelete

Your comment will inspire me, Please leave your comment