Set maxDate and minDate for datepicker in javascript, not working - javascript

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});

Related

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>

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>

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>

Disable previous dates of a datepicker according to selected date in javascript or jquery

I have two datepickers like startdate and enddate.If i select 18th june 2015 in startdate i have to disable previous dates in datepicker to 18thjune2015 in enddate.
Here is my code.
$("#txtstartdate").datepicker({ minDate: 0 });
For end-date:
var startdate = $("#txtstartdate").val();
$("#txtenddate").datepicker({ minDate: startdate });
Its not working. Can anyone pls help me on this.
thank you.
You need to set it using the option method on change of start date
$("#txtstartdate").datepicker({
minDate: 0,
onSelect: function(date) {
$("#txtenddate").datepicker('option', 'minDate', date);
}
});
$("#txtenddate").datepicker({});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<input id="txtstartdate" />
<input id="txtenddate" />
If you use input tag with attribute type="datetime-local" try this:
let today = new Date().toLocaleString('sv-SE').slice(0, 16).replace(' ', 'T');
document.getElementById('someId').setAttribute("min", today);
Try adding yearRange:
$("#txtenddate").datepicker({
minDate: startdate,
yearRange: '1999:2020',
});
You have to use option
insted of
$("#txtenddate").datepicker({ minDate: startdate });
Do This:
$("#txtenddate").datepicker('option', 'minDate', date);
Change mindate in datepicker
$("#txtstartdate").datepicker({
minDate: 0,
onSelect: function(date) {
$("#txtenddate").datepicker('option', 'minDate', date);
}
});
$("#txtenddate").datepicker({});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<input id="txtstartdate" />
<input id="txtenddate" />
If minDate is not working, you can try startDate it will work definitely.
$('#datepicker4').datepicker({
autoclose: true,
startDate: new Date()
});

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