How to fix Year range start year in datepicker Datetime in ASP.NET MVC?
My code is
Script:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
});
</script>
View
#Html.DropDownListFor(m => m.Gender, Model.GenderList, "- Select Gender -", new { #class = "form-control" })
#Html.EditorFor(m => m.Dateofbirth, new { #class = "form-control datepicker" }).
Here my question is how to fix year range in dateofbirth field datepicker depends on gender value..
Ex:
Gender==Male dateofbirth year select Option starts from (currentYear - 21)
Gender==Female dateofbirth year select Option starts from (currentYear - 18)
After selecting gender value change change year range in dateofbirth field else show error message.
Explanation:
jQuery Datepicker has a yearRange property which allows user to set the start and end year range that will be displayed the Year Dropdown within the jQuery Datepicker.
The syntax of the value is '{Start-Year}:{End-Year}'
<script type = "text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
$('.date-picker2').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
run code in js fiddle:
click here
Related
I have one datepicker how can I send the value in two textboxes with deferent format?
I have used this :
<script>
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var copydate = $(".datepicker").datepicker('getDate');
$("#FDate").val(copydate);
}
});
});
</script>
textbox1 which has the class datepicker working fine get me the date like this TUE 20/10/2020
but textbox2 called FDate get me very long date with extra details I want it to show only 20/10/2020
any help please?
I tried to use dateformat after val or after getdate but not working.
The var copydate = $(".datepicker").datepicker('getDate'); returns the long date format.
You need to .formatDate() the date from the .datepicker
$(function () {
$(".datepicker").datepicker({
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Date",
dateFormat: "D dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: new Date(),
//maxDate: new Date()
onSelect: function () {
var datetypevar = $(".datepicker").datepicker('getDate');
var copydate = $.datepicker.formatDate('dd/mm/yy', datetypevar);
$("#FDate").val(copydate);
}
});
});
I am new to the web development. Here, I am using the jquery datePicker. In this I have a input box and that user can select only year and month and not date. So, I used,
$('#' + duration[k]).datepicker({
format: 'MM yyyy',
viewMode: "months",
minViewMode: "months",
});
I did this, Here my input are getting created dynamically.
var duration = ["StartDuration", "EndDuration"];
var commentText = document.createElement('input');
commentText.setAttribute("type", "text");
commentText.name = "month";
commentText.id = duration[k];
commentText.className = 'form-control';
commentText.rows = '3';
commentText.placeholder = "Enter" + " " + duration[k];
commentText.setAttribute("readOnly", "true");
commentText.setAttribute("ng-model", duration[k]);
Used for loop on the array and then created this input box. Now what happening is here, It gets datepicker but it is having a date-month-year . So, I want to have only year and month. Can any one pleas help me with this ?
You need to use dateformat like this : dateFormat: 'MM yy'
Check the example :
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<label for="startDate">Your Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
Here is fiddle
You can do like this
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
});
Jquery datepicker provides these two - changeMonth,changeYear property for it and make format like MM yy.
I have to use a JQuery Calendar control for Date Of Birth field and by default change in Calendar are reflect only when user selects the date, while i have been asked to make changes to reflect when either user selects month, date or year in the calendar control
CodePen
<input name="txtdob" id="txtDOB" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
$(document).ready(function () {
// $(function () {
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0"
});
// });
});
Is there any property which i can set so that when ever user select date, month or year then same changes should reflect in the txtDOB input fields
UPDATED:
I did it like this
$(function () {
$("#txtDOB").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange: "-90:+0",
onChangeMonthYear: function (y, m, i) {
var d = i.selectedDay;
$(this).datepicker('setDate', new Date(y, m - 1, d));
}
});
});
How about this solution. Hope it helps!
Here's an updated codepen: http://codepen.io/HenryGranados/pen/ObWaXX
$(function() {
var date = new Date();
var currentDay = date.getDate();
$("#txtdob").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-90:+0",
onChangeMonthYear: function(year, month, inst) {
$(this).val(currentDay + "/"+month + "/" + year);
}
});
});
.rg-txt{
width:200px;
margin:50px 200px;
}
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<input name="txtdob" id="txtdob" class="rg-txt" hasDatepicker" placeholder="DD/MM/YYYY" type="text">
</body>
</html>
Hi i want to select date of birth from first date picker. In second date picker pick dates only above date of birth.
http://jsfiddle.net/boopathirajan/6c3v5gna/2/
I added code here.
so help me how to pick date2>date1 only
html
<div class="wrapper">
<input type="text" value="" id="date1" name="dob">
<input type="text" value="" id="date2" name="vcc">
</div>
jquery
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0
});
Here is the solution for you.
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date2").datepicker("option","minDate", selected)
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
onSelect: function(selected) {
$("#date1").datepicker("option","maxDate", selected)
}
});
JSFIDLE
OR a different Approach
$(document).ready(function () {
$("#date1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#date1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
}
});
$('#date2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#date1').datepicker('getDate');
var dt2 = $('#date2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#date2').datepicker('option', 'minDate');
$('#date2').datepicker('setDate', minDate);
}
}
});
});
Its working fine
jQuery('#date1').datepicker({
dateFormat : 'dd-mm-yy',
maxDate: 0,
onSelect: function (date) {
$('#date2').datepicker('option', 'minDate', date);
}
});
jQuery('#date2').datepicker({
dateFormat : 'dd-mm-yy',
maxDate:0,
minDate:1,
});
DEMO
Here is the snippet where i need to fix the requirement
Here i used jquery for datepicker
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes
/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Here i gave datepicker to choose month by dropdownlist but problem is in two fields the user can select the month but i need to restrict the month selection in "to" field because the second datepicker should show the month of "from field" itself
$(document).ready(function () {
$("#datepicker,#datepicker1").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy"
});
$('#datepicker,#datepicker1').datepicker("setDate", new Date());
});
Here are the two datepickers with two fieldnames "from" and "to"
<li><label class="label">From:</label></li>
<li><input name="fdate" type="text" class="sel" size="10"
id="datepicker" required /><li>
<li><label class="label1">To:</label></li>
<li><input name="tdate" type="text" class="sel" size="10"
id="datepicker1" required /><li>
<li ><label class="label" >Weeks:</label></li>
Below is the snippet for above requirement......
<head>
<title>Testing</title>
<link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-datepicker-next, .ui-datepicker-prev { display: none; }
</style>
<script src="scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});
</script>
</head>
Small script that Iam using....try with this
var startDateTextBox = $('#datepicker');
var endDateTextBox = $('#datepicker1');
startDateTextBox.datepicker({
changeYear: true,
yearRange : 'c-30:c',
dateFormat:"yy-mm-dd",
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datepicker('getDate');
var testEndDate = endDateTextBox.datepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDate){
endDateTextBox.datepicker('option', 'minDate', startDateTextBox.datepicker('getDate') );
}
});
endDateTextBox.datepicker({
changeYear: true,
yearRange : 'c-30:c',
dateFormat:"yy-mm-dd",
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datepicker('getDate');
var testEndDate = endDateTextBox.datepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDate){
startDateTextBox.datepicker('option', 'maxDate', endDateTextBox.datepicker('getDate') );
}
});
hope it gives you an idea...
$(document).ready(function() {
$(function() {
$( "#fromDate" ).datepicker({
yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
buttonImage:""+appctx``+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
onSelect: function( selectedDate ) {
$( "#toDate" ).datepicker( "option", "minDate", selectedDate );
},
changeMonth: true,
changeYear: true
});
});
$( "#toDate" ).datepicker({
yearRange: "-50:+20",dateFormat: 'dd/mm/yy',showOn: "button",changeMonth: true,changeYear: true,
buttonImage:""+appctx+"/images/index.jpeg" ,buttonImageOnly: true ,buttonText: "",autoSize:true ,
onSelect: function( selectedDate ) {
$( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
},
changeMonth: true,
changeYear: true
});
});