DateTime Picker Demo

by naveen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/vader/jquery-ui.css">
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<div class="header">
<h1>DateTime Picker Demo</h1>
</div>
<div class="container">
    <input type="text" class="textbox-glow" id="example2" value="" />
</div>

CSS

input.textbox-glow{
    border: 1px solid #c4c4c4;
    width: 180px;
    height: 18px;
    font-size: 13px;
    padding: 4px 4px 4px 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input.textbox-glow:focus {
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}?

.header{
    padding:20px;
    margin: 0 auto;
}
.header h1{
    font-weight: bold;
}
.container{
    padding:50px;
    text-align: left;
}
/* css for timepicker */

            .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

            .ui-timepicker-div dl { text-align: left; }

            .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }

            .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }

            .ui-timepicker-div td { font-size: 90%; }

            .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

JavaScript

$('#example2').datetimepicker({

    ampm: true

});