Menu
i am using jquery datetime picker my problem is when i select the time and use tab button it will change to minus 1 hours means if i select 9.30 am and click on tab button it will be 8.30 am and it will countinuely do minus when ever i use tab on that controll
here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM here is a code
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/scripts/jquery.min.js"></script>
<script src="~/scripts/moment.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/scripts/jquery.datetimepicker.full.min.js"></script>
<script src="~/scripts/VagaroDateTimePicker.js"></script>
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" class="datepicker" />
</div>
</div>
</div>
$('.datepicker').datetimepicker({
format: 'M-d-Y g:i A',
});
979
It Seems simple. $('#startdatetime-from'). datetimepicker({ language: 'en', format: 'yyyy-MM-dd hh:mm' });
To change the position of the jQuery UI Datepicker just modify . ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.
To disable a datepicker in jQuery UI we will be using disable() method which is discussed below: jQuery UI disable() method is used to disable the datepicker. Parameters: This method does not accept any parameters.
i got the solution for this
$('.datepicker').datetimepicker({
// datepicker: false,//hide date
// format: 'DD-M-YYYY hh:mm A'
format: 'M-d-Y g:i A',
formatTime: 'g:i A',
validateOnBlur: false,
});
i have added validateOnBlur:false and its work for me
180
I test your code and i saw the problem that when you press tab if you choose 10.00 AM its became 09.00 AM and i checked the documentation and i figure out that you can combine moment.js as its written in the documentation
All you have to do to just add moment.js and then add this line to your codes
$('.datepicker').datetimepicker({
format:'DD.MM.YYYY h:mm a',
formatTime:'h:mm a',
formatDate:'DD.MM.YYYY'
});
$.datetimepicker.setDateFormatter('moment');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mb-5">
<input type="text" class="datepicker"/>
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
</div>
</div>and i already made for you here please check it out and tell me if its helps
Fiddle: https://jsfiddle.net/v82vkxpz/7/
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
