unable to change minTime of datetimepicker - javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" />
<h1>date</h1>
<input type="text" name="input_time" id="input_time">
<script>
$('#input_time').datetimepicker({
format:'h:i A',
validateOnBlur: false,
formatTime: 'h:i A',
step: 15 ,
datepicker:false
})
$('#input_time').datetimepicker('option', 'minTime','6:00 PM' );
</script>
I wanted to change minimum time of a datetimepicker dynamically. but nothing seems to work

The pattern you're using to update the plugin options after initialization is for jQueryUI components.
For the DateTimePicker library you need to use the setOptions method, like this:
$('#input_time').datetimepicker({
format: 'h:i A',
validateOnBlur: false,
formatTime: 'h:i A',
step: 15,
datepicker: false
})
$('#input_time').datetimepicker('setOptions', { minTime: '18:00' });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous"
/>
<h1>date</h1>
<input type="text" name="input_time" id="input_time">
Note that I used a 24 hour time format in this example as there appears to be a bug to do with daylight savings/UTC interpretation in the library when you set 6:00 PM it shows 5:00 PM as the minimum for my locale.

Related

Pick date in jquery calendar with cypress

I have the following code snippet of jquery calendar plugin used in my app and the cypress code snipped to select the date 1990-10-11.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<p>Date: <input type="text" id="datepicker"></p>
cy.get("#datepicker").click();
cy.get(".ui-datepicker-month").select("10");
cy.get(".ui-datepicker-year").select("1990");
cy.get("table.ui-datepicker-calendar").then(() => {
cy.contains('11').click();
});
With the code I can change the year and month but cannot select the day.
How can I set the date to 1990-10-11 via cypress.
Try like below to click on date 11.
cy.get("a.ui-state-default:contains(11)").click();
#Karan's answer looks good, but I would be more specific in the select (since ui-state-default looks a little too generic).
cy.get('[data-handler="selectDay"] a:contains("11")').click()

Date range picker creating wrong time values for 24 hour range

DateRangePicker (http://www.daterangepicker.com/) is creating wrong values. When, for example, I select value 13:00 it shows up in input that it's 01:00
I have enabled timePicker24Hour to true so I dont really know what is the problem
Web page code
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'), 10),
locale: {
format: 'YYYY-MM-DD hh:mm'
},
opens: "center"
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />
Does anyone have had this bug or I have configured something wrong?
Your issue is that the format you're outputting back to the input (through the locale) is of the format hh:mm, which is the 12-hour format (mm). You want HH instead, making the entire format YYYY-MM-DD HH:mm. The datepicker itself is set to 24-hour format by doing timePicker24Hour: true as you were doing.
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'YYYY-MM-DD HH:mm'
},
opens: "center"
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />
You need uppercase HH(24h format) to your date format
$(function() {
$('input[class*="datetimes"]').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
minYear: 1901,
timePicker24Hour: true,
timePickerIncrement: 5,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'YYYY-MM-DD HH:mm'
},
opens: "center"
});
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input class="form-control datetimes" type="text" name="end_time" id="end_time" />

minDate() and maxDate() property of jquery datepicker plugin not working

I have tried so many means I've seen on how to use the minDate() and maxDate() property of jquery datepicker plugin to restrict a user from picking a range of date values but none ever worked. Even the sample code that was working on the jQuery UI plugin official page on how to do it, I tried it but it didn't work. Please need assistance on how to achieve this if there is another plugin to link before it works or...
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd'
});
})
I will appreciate any help. Thanks a lot. Wisdom
Check example below:
$(document).ready(function () {
$("#enrolldateprim").datepicker({
minDate: new Date(2017, 5-1 , 5), // months count starts from 0
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<input id="enrolldateprim">
You can find library sources in a code snippet.
You can download the dependencies from: http://jqueryui.com/download/
And JQuery itself from: https://jquery.com/download/
Just go to the first link and scroll down until you see download button. Select your preferred theme and press download. Unzip the zip file and look (within my code) at the links (href) and the scripts (src) to see what to include to make it work.
Of course you don't need to include the styling (CSS) but it comes with the zip file if you wish to use it.
The Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.css">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.css">
<script src="jquery-3.1.1.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
$( function() {
$("#datepicker").datepicker(
{
minDate: new Date(2009, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat: 'yy-mm-dd',
showOn: "both"
});
} );
</script>
</head>
<body>
<h3>My DateTimePicker</h3>
<p>Pick date:
<input type="text" id="datepicker">
</p>
</body>
</html>
PS:
$(function() {
// Handler for .ready() called. (This is shorter)
});
Does the same as:
$( document ).ready(function() {
// Handler for .ready() called. (This is longer)
});
If you are using the jquery-ui datepicker widget, then take a look at the code below.
By the way, buttonText should be used in conjunction with the showOn option set to "button" or "both", so I add the showOn option.
$(function(){
$( "#datepicker" ).datepicker({
minDate: new Date(2016, 10 - 1, 25),
maxDate: "now",
buttonText: "Select date",
dateFormat : 'yy-mm-dd',
showOn: "both"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>

Removing the colon from 24 hrs format time in jquery datepicker

I need to resolve an issue that has been bugging my bug list for a while but can't find anything solid in Google. All I want is to remove the colon from the time so I can display it in REAL military time.
So, this is wrong --> 13:25 hrs
This is right --> 1325 hrs
I am using Jquery Date Picker form the Jquery UI library and datetimepicker-addon.js from here
HTML
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
JS
$(function(){
$("#my_date").datetimepicker({
timeFormat: "HH:mm 'hrs'",
showButtonPanel: false
});
});
Here is a handy dandy CODEPEN
I appreciate the help
In the timeFormat of the datetimepicker remove the colon
$(function(){
// when the document has loaded
// attach the datetimepicker
$("#my_date").datetimepicker({
timeFormat: "HHmm 'hrs'",
showButtonPanel: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>

Set minDate for Bootstrap DateTimePicker from another

Currently, I'm using Bootstrap 3 Datepicker from this source
I have 2 datetimepicker on my system. (startTime, endTime).
I tried but don't know how to set minDate for endTime from startTime value whenever startTime value changed. Even it don't jump on change event.
Please point me what am I missing.
Here is my code
Many thanks.
You need to use the change event and minDate() function like
$('#txtStartTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
maxDate: moment()
}).on('dp.change', function(e) {
$('#txtEndTime').data("DateTimePicker").minDate(e.date)
});
$('#txtEndTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">.</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtStartTime" type='text' />
</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtEndTime" type='text' />
</div>

Categories