datepicker is not showing with datetime.

venkat

8y5.4k

Hi All,

my datepicker is not showing datetime, mean it is showing date only. please give me any suggestions. below is my code.please find below snapshot. i need to display with date and time .

$(".dynamicdatepicker").datepicker({

dateFormat: "dd/mm/yy",

changeMonth: true,

changeYear: true,

yearRange: "-100:+0",

});

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ajeesh8y ago
You could also try with the below approach which use a custom approach to add time to Jquery date picker

Ensure that you have referenced the Jquery JS file before using this function
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">script>

HTML Mark Up
<input calendar="True" dateformat="mm/dd/yy" id="DueDate" name="DueDate" style="font-size: 12px;" type="text" />

JQuery Function
$("#DueDate").datepicker();

$( "#DueDate" ).datepicker( "option", "dateFormat", "mm/dd/yy" + " " + getCurrentTime() );



function getCurrentTime() {

    var CurrentTime = "";

    try {

        var CurrentDate = new Date();

        var CurrentHours = CurrentDate.getHours();

        var CurrentMinutes = CurrentDate.getMinutes();

        var CurrentAmPm = "A'M'";

        if (CurrentMinutes < 10) { CurrentMinutes = "0" + CurrentMinutes; }



        if (CurrentHours == 12) {

            CurrentHours = 12;

            CurrentAmPm = " P'M'";

        }

        else if (CurrentHours == 0) {

            CurrentHours = 12;

            CurrentAmPm = " A'M'";

        }

        else if (CurrentHours > 12) {

            CurrentHours = CurrentHours - 12;

            CurrentAmPm = " P'M'";

        }

        else {

            CurrentAmPm = " A'M'";

        }

        CurrentTime = "" + CurrentHours + ":" + CurrentMinutes + CurrentAmPm + "";

    }

    catch (ex) {

    }

    return CurrentTime;

}
0
Srikant Maruwada8y ago
Hi Venkat,

Default Jquery DatePicker does not have Time option https://jqueryui.com/datepicker/#default. You have to include other addon plugin. In my Example I have referred time picker.
Also I have proviede below sample. Let me know if you require further inforamtion.
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionalitytitle>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js">script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">script>
  <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js">script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js">script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-sliderAccess.js">script>
  <script>
  $( function() {
    $( "#datepicker" ).datetimepicker();
  } );
  script>
head>
<body>
<p>Date: <input type="text" id="datepicker">p>

body>
html>
+1
Ibrahim Siddique8y ago
Hi Venket,

Please find below details

$('#basic_example_1').datetimepicker();

Ref : http://trentrichardson.com/examples/timepicker/
0
Rajeesh Menoth8y ago
Hi,

Please check the following examples :

https://stackoverflow.com/questions/11183730/jquery-ui-datetimepicker-change-date-time-format-showed-in-text

https://coderwall.com/p/muwupg/datepicker-with-time-timepicker-jquery-ui

https://github.com/xdan/datetimepicker

https://www.malot.fr/bootstrap-datetimepicker/demo.php
0