datetime

by secretgspot

HTML

<script src="http://m.xblix.ca/sources/datetime.js"></script>
 <br>

<input id="i2" name="i2" />

                    
    To

       <input id="i" name="i" />

CSS

.dw{min-width:170px;position:absolute;top:5%;left:0;z-index:1001;color:#000;font-family:arial,verdana,sans-serif;font-size:12px;text-shadow:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.dwi{position:static;margin:5px;display:inline-block}.dwwr{zoom:1;padding:0 10px;text-align:center}.dwo{width:100%;background:#000;position:absolute;top:0;left:0;z-index:1000;opacity:.7;filter:Alpha(Opacity=70)}.dw-bubble-bottom{margin-top:18px}.dw-bubble-top{margin-top:-18px}.dw-bubble .dw-arrw{position:absolute;left:0;width:100%}.dw-bubble-top .dw-arrw{bottom:-36px}.dw-bubble-bottom .dw-arrw{top:-36px}.dw-bubble .dw-arrw-i{margin:0 30px;position:relative;height:36px}.dw-bubble .dw-arr{display:block}.dw-arr{display:none;position:absolute;left:0;width:0;height:0;border-width:18px 18px;border-style:solid;margin-left:-18px}.dw-bubble-bottom .dw-arr{top:0;border-color:transparent transparent #fff transparent}.dw-bubble-top .dw-arr{bottom:0;border-color:#fff transparent transparent transparent}.dwc{float:none;margin:0 2px 5px 2px;padding-top:30px;display:inline-block}.dwcc{clear:both}.dwl{text-align:center;line-height:30px;height:30px;white-space:nowrap;position:absolute;top:-30px;width:100%}.dwv{padding:10px 0;border-bottom:1px solid #000}.dwrc{-webkit-border-radius:3px;border-radius:3px}.dwwc{margin:0;padding:0 2px;position:relative;background:#000;zoom:1}.dwwl{margin:4px 2px;position:relative;background:#888;background:-webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35,#333),color-stop(0.50,#888),color-stop(0.65,#333),to(#000));background:-moz-linear-gradient(#000 0,#333 35%,#888 50%,#333 65%,#000 100%);background:-ms-linear-gradient(#000 0,#333 35%,#888 50%,#333 65%,#000 100%);background:-o-linear-gradient(#000 0,#333 35%,#888 50%,#333 65%,#000 100%);z-index:1010}.dww{margin:0 2px;overflow:hidden;position:relative}.dwsc...

JavaScript

$(function(){
    var now = new Date();

    $('#i').scroller({
        preset: 'datetime',
        minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
        theme: 'default',
        display: 'bubble',
        mode: 'mixed'
    });    
$('#show').click(function(){ $('#i').scroller('show'); return false; }); $('#clear').click(function () { $('#i').val(''); return false; });

});

 
     

         $(function(){
    var now = new Date();

    $('#i2').scroller({
        preset: 'datetime',
        minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
        theme: 'default',
        display: 'bubble',
        mode: 'mixed'
    });    
$('#show2').click(function(){ $('#i').scroller('show'); return false; }); $('#clear').click(function () { $('#i2').val(''); return false; });

});