CODEWITHSUNDEEP
javascriptjquery
yasarui
yasarui

Reputation: 6573

datetimepicker plugin selects one hour back after selecting particular time

i am using datetimepicker plugin.I am getting a strange error. whenever i am selecting a time from the dropdown ,the plugin selects one hour before of the selected time. Couldn't figure out why this is happening

<!DOCTYPE html>
<html>
<head>
	 <title> Date Time Picker </title>
	 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" />
</head>
<body>

    <input type="text" value="2:00 PM" id="timepicker" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js" ></script>
    <script>
        $('#timepicker').datetimepicker({
            datepicker: false,
            step:30,
            format:'g:i A'
        });
    </script>
</body>
</html>

The answers i got this post is to Change the g in the format option to Capital G. but when i changed like this means 12 hours format has been changed to 24 hour format.I want to have it to retain 12 hours format and solve this issue

Upvotes: 4

Views: 2616

Answers (5)

nickbwatson
nickbwatson

Reputation: 162

I know this is a very old question, but I came across it while looking for a solution so I figured I should post it for anyone else having the same issue. I was also disappointed that the solution was just to use 24 hour format...

After reading this thread: Format "m/d/Y h:i a" changes hour onBlur I switched my date formatter to "moment", which should already be included, and changed my formatting to the appropriate "moment" conventions and the 1 hour issue is gone:

$.datetimepicker.setDateFormatter('moment');
$('.datepicker').datetimepicker({
    format: 'YYYY-MM-DD h:mm A',
    formatTime: 'h:mm A',
    formatDate: 'YYYY-MM-DD',
});

Upvotes: 0

Govind Samrow
Govind Samrow

Reputation: 10189

Just change format g:i A to H:i A:

<!DOCTYPE html>
<html>
<head>
	 <title> Date Time Picker </title>
	 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" />
</head>
<body>

    <input type="text" value="2:00 AM" id="timepicker" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js" ></script>
    <script>
        $('#timepicker').datetimepicker({
            datepicker: false,
            step:30,
            format:'H:i A'
        });
       $('#timepicker').change(function(){
           $(this).val($(this).val().replace(/^0+/, ''));
       });
    </script>
</body>
</html>

Upvotes: 3

Hope Mystery
Hope Mystery

Reputation: 338

Use G Capital:

    $('#timepicker').datetimepicker({
        datepicker: false, 
        step: 30,
        format:'G:i A'
    });

JSFiddle test

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

It is because you are using invalid format. Just use format:'H:i A' instead of format:'g:i A'

$('#timepicker').datetimepicker({
  datepicker: false,
  step: 30,
  format:'H:i A'
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" />

<input type="text" value="2:00 AM" id="timepicker" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>

Upvotes: 3

Out of Orbit
Out of Orbit

Reputation: 563

Usually when working with dates and time, differences with +-1 hour / day etc. has to to with time zone differences. 1. Se if the plugin has a time zone config parameter. 2. Account for time zone offset yourself by adding 1 hour.

See: How to avoid time zone issues with JQuery datepicker

Upvotes: 1

Related Questions