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

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>

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()

Set maxDate and minDate for datepicker in javascript, not working

I have checked lot of tutorials and QAs in Google and tried with all permutation and combination tricks. Still my calender is not restricted with maxDate and minDate as I set. Please can someone check and let me know whats wrong with my code.
my javascript function is
$(function () {
$("[id$=txtPaymentDate]").datepicker({
maxDate: "+0D",
showOn: 'button',
dateFormat: 'mm-dd-yyyy',
buttonImageOnly: true
});
});
...and my body code:
<td>
<asp:TextBox ID="txtPaymentDate" runat="server" CssClass="form-control" placeholder="(YYYY-MM-DD)"></asp:TextBox>
<span id="spnAltContactNumber" style="color: Red;" runat="server"></span>
</td>
EDIT
Even though I've set dateFormat as 'yyyy-mm-dd', it is still showing the date as mm/dd/yyyy.
I have these following scripts. Is there any extra is required?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
For this maxDate and minDate does not work.Instead u need to use startDate and endDate as below.
$("[id$=txtPaymentDate]").datepicker({
showOn: 'button',
dateFormat: 'mm-dd-yyyy',
buttonImageOnly: true,
startDate: '-5d',//previous date
endDate: new Date()//current date
});
Happy coding
change textbox accoring to .net
$( function() {
$( "#txtPaymentDate" ).datepicker({dateFormat: 'dd M yy',maxDate: 1});
} );
<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>
<td>
<p>Date: <input type="text" id="txtPaymentDate"></p>
</td>
it should be maxDate: 1
$( "#datepicker").datepicker({dateFormat: 'dd M yy',maxDate: 1});

Date picker(.js) not working in HTML editor but working in fiddle

This is the working format in fiddle
and below is the code i have used in my demo-site i have created a new folder name js and placed datepicker.js inside it. so i linked the following in my html.
<script type="text/javascript" src="js/datepicker.js"></script>
and my datapicker.js code is
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
and my html code is
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
but when i press the above button .js is not being called. please help
You need to include a version of jQuery. Download the latest release and put it in your js folder and link it like you did for datepicker.js or directly include it like this
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
If this does not work try
<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>
I am not sure if your single datepicker.js has and error, but if it does try the jquery-ui js which includes it.
I tested it with including the above 2 js sources and it worked fine.
If the direct link to the jquery site js does not work then it is another problem on your page that is not shown to us.
Your code is running absolutly fine on my local machine.
Where i simply used the jQuery and jQueryUI CDN path from
Google Developer Site
Link
Your piece of code:
<!DOCTYPE html>
<html>
<head>
<title>JS Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
</script>
</body>
</html>
if you miss place the position of jquery it wont work. hope the below code helps you.
$(function () {
$('#departure-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
setTimeout(function () {
$('#return-date').datepicker('show');
}, 300)
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
$('#return-date').datepicker({
numberOfMonths: 2,
showAnim: "fold",
showButtonPanel: true,
onSelect: (function (date) {
$(this).val($(this).datepicker('getDate').toLocaleDateString());
})
});
});
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">

TimePicker Razor ASP.NET-MVC

I'm trying to create a TimePicker with Razor and JQueryUI in my bootstrap web. I created a DatePicker, and I know that I could create a DateTimePicker with JQuery, but I don't want to select the date and the time together, I want to select it with two different TextBox.
So I saw many tutorials, but all of them create a DateTimePicker, and when I tried to create a TimePicker with the same format, that didn't worked for me.
This is my code:
JavaScript:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
$('#timepicker').timepicker();
});
</script>
Razor and Html:
#using (Html.BeginForm())
{
#Html.TextBox("date", DateTime.Now.ToShortDateString(), new { #id = "datepicker", #readonly = "readonly", #style = "width:250px;" })
<br />
#Html.TextBox("time","-- Select Time --", new { #id = "timepicker", #readonly = "readonly", #style = "width:250px;" })
}
Thanks! :)
jQuery-UI addon is required for timepicker control.
check here : https://jsfiddle.net/dmc55erf/8/
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
$('#timepicker').timepicker();
});
</script>

jQuery Datepicker won't change value of input

I use the datepicker function from jquery. Now I have integrated a inline calendar. It should be possible to click on one day in the shown month and then submit a form or change the url. I need the new date added to the url so i can jump to this date.
But my code won't change the value of the input - and i don't know why.
Here my code:
In the head area:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="templates/js/bootstrap-datepicker.de.js"></script>
The HTML:
<form method="get" action="index.php">
<div class="form-group">
<div class="minicalendar"></div>
<input class="form-control" type="text" name="submitDate" id="submitDate" />
</div>
</form>
The JS:
$('.minicalendar').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Do you know why? I was searching for a time now but I wasn't able to find a solution that works ...
Thanks.
You are binding the datepicker to adiv instead of aninput.
<input id="datepicker" />
$('#datepicker').datepicker({
//...
});
You also don't need to change the input text with the onSelect event. The widget will do thix automatically.
$('#submitDate').datepicker({
format: "dd.mm.yyyy",
todayBtn: true,
language: "de",
calendarWeeks: true,
todayHighlight: true,
onSelect: function(dateText, inst) {
$('#submitDate').val(dateText);
}
});
Use this. Datepicker won't bind to a <div> it has to be an <input> element. Check this link for more examples.
Here is the code from JQuery UI DatePicker :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
The input id has to be the same that the element selected in JQuery.

Categories