With the help of jQuery and Datepicker, I would like to add # of months to Today's Date.
My attempts below produce unexpected results:
e.g.
If I add 0 months, I get 9 months addition to Today's date
If I add 1 month, I get 10 months addition.
I have stepped through the code and it seems the error is something with formatting.
If I hardcode:
var ten = $('#mthschange').val();
with
var ten = 12;
it works fine
if I test:
var ten = $('#mthschange').val();
alert(ten);
it will alert me: 12 (if I put in 12).
it seems to be related to data types.
How do I correctly instruct Datepicker to add months to a date?
$(function() {
$('#mthschange').change(function() {
var ten = $('#mthschange').val();
var d = new Date();
d.setMonth(d.getMonth() + ten);
var e = ($.datepicker.formatDate('yy-mm-dd', d));
$("#res").val(e);
});
});
<!doctype html>
<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="//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>
</head>
<body>
<p>Input Field : <input id="mthschange" type="text"></p>
<p>Output Field : <input id="res" type="text"></p>
</body>
</html>
Your problem is that ten is a string, not an integer, so when you execute
d.getMonth() + ten
you get something like 112 instead of 13. Change
var ten = $('#mthschange').val();
to
var ten = parseInt($('#mthschange').val());
and the code works fine:
$(function() {
$('#mthschange').change(function() {
var ten = parseInt($('#mthschange').val());
var d = new Date();
d.setMonth(d.getMonth() + ten);
var e = ($.datepicker.formatDate('yy-mm-dd', d));
$("#res").val(e);
});
});
<!doctype html>
<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="//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>
</head>
<body>
<p>Input Field : <input id="mthschange" type="text"></p>
<p>Output Field : <input id="res" type="text"></p>
</body>
</html>
Related
I have From Date and To Date jQuery datepicker controls and if I change From Date, then To Date should automatically be 180 days from From Date
Below code is not firing the onSelect event even if this looks so simple...
$("#txtFrom").datepicker({
minDate: 0,
onSelect: function (dateStr) {
var newDate = $(this).datepicker('getDate');
if (newDate) {
newDate.setDate(newDate.getDate() + 180);
}
$('#txtTo').datepicker('setDate', newDate).datepicker('option', 'minDate', newDate);
}
});
Also, I require onChange event to be fired...
Any help would be greatly appreciated.
I have replicated your scenario. Hope this helps.
<!doctype html>
<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="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
onSelect:function(dateStr){
var oldDate = $(this).datepicker('getDate');
var newDate = new Date(oldDate.setMonth(oldDate.getMonth()+7))
newDate=(newDate.getMonth()+1)+'/'+(newDate.getMonth()+1)+'/'+newDate.getFullYear()
document.getElementById("datepicker1").value = newDate;
}
});
} );
</script>
</head>
<body>
<p>From_Date: <input type="text" id="datepicker"></p>
<p>To_Date: <input type="text" id="datepicker1"></p>
</body>
</html>
I was trying to disable certain days in the date picker like Friday is off so I need to disble friday from the date picker
<!doctype html>
<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="//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>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
Try this code to disable friday from the date picker
function DisableFriday(date) {
var day = date.getDay();
if (day == 5) {
return [false,"","Unavailable"] ;
} else {
return [true] ;
}
}
jQuery(function($){
$('input[name="chk_date"]').datepicker('option', 'beforeShowDay', DisableFriday).datepicker('refresh');
});
<!doctype html>
<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="//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>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" name="chk_date" id="datepicker"></p>
</body>
var today = new Date();
var dd = today.getDate();
var mm=today.getMonth();
mm++;
var yyyy =today.getFullYear();
// alert(mm);
var datee=yyyy+'-'+mm+'-'+dd;
$('#form_date').val(datee);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='date' id='form_date'>
i just need to auto select the current date in input type date i get the year,month and date from get function but when i am trying to put them in value it's not working
Single digit months and days should start with a zero:
//<![CDATA[
/* external.js */
function makeFormDate(dateInstance){
var dt = dateInstance instanceof Date ? dateInstance : new Date;
return dt.getFullYear()+'-'+(dt.getMonth()+1).toString().replace(/^(\d)$/, '0$1')+'-'+dt.getDate().toString().replace(/^(\d)$/, '0$1');
}
$(function(){
$('#form_date').val(makeFormDate());
});
//]]>
<script src=''></script>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<input id='form_date' type='date' value='' />
</body>
</html>
This code is not working because it doesn't find the correct dom element when it run. So wrap your code inside $(document).ready(function(){})
function.
There is a field "DatePicker" from it I need to take the date and insert the age in the field "NumericTextBox "
Thanks
<div>
<sq8:DatePicker runat="server" ID="dateDatePicker">
<ClientEvents OnDateSelected="get_current_age"></ClientEvents>
</sq8:DatePicker>
<sq:BindableControl runat="server" TargetControlID="dateDatePicker" DataField="Date"></sq:BindableControl>
</div>
<div class="sqf-col-xs-4 sqf-control-group-v">
<sq8:Label runat="server" Text="Age" ID="lblAge"></sq8:Label>
<sq8:NumericTextBox runat="server" ID="txtAge"></sq8:NumericTextBox>
</div>
This can be achieved with the help of jQuery. See the example below.
Along with jQuery I am using moment.js. The reason for that is, when working with normal javascript date functions there are tons of issues in multi device / browser environment. To avoid that it is recommended to use a standard / well tested JS date library. More about Moment.JS
<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="//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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
Your Age is: <span id="age">Pick a date</span>
<script>
$(document).ready(function() {
$( "#datepicker" ).datepicker();
$('#datepicker').change(function(){
var pickedDate = $(this).val();
var a = moment(pickedDate,"MM/DD/YYYY");
var b = moment(new Date());
var c = b.diff(a,'years',true);
$('#age').html(Math.floor(c) + ' year(s)');
});
} );
</script>
</body>
</html>
I hope this helps.
I want to disable days before tomorrow and set tomorrow as the default but I cant.my code shows today as the default and disabled days before today.
view:
<input id="date_modified" type="text" class="form-control" value="">
jquery:
$('#date_modified').persianDatepicker({
observer: true,
format: 'YYYY/MM/DD',
maxDate: new Date(),
})
.pDatepicker('setDate');
});
<!doctype html>
<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="//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>
<script>
$( function() {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
//Following line of code is to set the default and minDate of datepicker.
$( "#datepicker" ).datepicker({minDate: tomorrow,defaultDate:tomorrow});
//Following line of code is to set value of default date on text box.
$("#datepicker").val($.datepicker.formatDate('mm/dd/yy', tomorrow));
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>