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>

Posted by at

10 comments:

  1. UnknownNovember 28, 2012 1:21 PM

    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. markandeyNovember 28, 2012 5:10 PM

    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. UnknownJanuary 08, 2013 12:45 PM

    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. markandeyJanuary 08, 2013 8:00 PM

    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. UnknownJanuary 09, 2013 9:47 AM

    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. markandeyJanuary 09, 2013 9:44 PM

    @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. UnknownJanuary 10, 2013 10:25 AM

    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. markandeyJanuary 10, 2013 10:35 AM

    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. UnknownJanuary 10, 2013 11:25 AM

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

    ReplyDelete
  10. UnknownJanuary 10, 2013 11:44 AM

    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

Subscribe to: Post Comments (Atom)