Date and Time display

Date and Time display with jquery datepicker

by Khadeer Mohammed

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

CSS

#ui-datepicker-div { font-size: 12px; }

JavaScript

$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: "m/d/yy hh:mm:ss",
    onSelect: function(dateText, obj) {
    	debugger
    	var dLength = dateText.length;
      var indexLength = dateText.toLowerCase().indexOf('h');
      if(indexLength != -1){
        var dateText2 = dateText.substring(0,indexLength).trim();
        var d = new Date();
        var h = d.getHours();
        h = (h < 10) ? ("0" + h) : h ;

        var m = d.getMinutes();
        m = (m < 10) ? ("0" + m) : m ;

        var s = d.getSeconds();
        s = (s < 10) ? ("0" + s) : s ;

        dateText = dateText2 + " " + h + ":" + m + ":" + s;
      }
      $('#date1').val(dateText);
    }
});