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.
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>
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>
I am working on a site your can see the demo here https://masborn.com/theretreatpalmdubai/
The data picker is calendar is not working here.
jQuery(function () {
jQuery("#bookdate").daterange({
showButtonPanel: true,
closeText: "X",
onClose: function () {
jQuery(".bookinginputs").css("display", "block");
},
onSelect: function (){
jQuery("#demodate").css("display", "none");
jQuery(".ui-datepicker-close").css("display", "none");
}
});
});
I have spend many time on it and not find what is the issue here. Can any one give some input?
From the jquery ui documentation, its called "datepicker" not "daterange".
Also, consider using the $ shortcut instead of jQuery, it makes it easier to read.
<!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>
</html>
I have this input type date in here and currently, the datepicker will only show once the user clicks the arrow down button in its field. What I want to happen is that, open the datepicker every time the user clicks the input field.
<input type="date" id="date_of_purchase" name="date_of_purchase" class="input-field input-date" placeholder="Inköpsdatum">
from the jQuery UI page for datepicker:
<!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>
</html>
EDIT
Creating a datepicker with fall back on jquery
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>