We Keep Coding

How to Year range start year end year in datepicker?

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

Jquery month and year picker not working

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.

Datepicker disables previous and future dates wrong

I've created a datepicker for my form and it selects the current date and disables past dates.
jQuery(document).ready(function($){
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">
But the problem is that when I select a "from" date and then a "to" date, my "to" date block my "from" date. So for example if I select "from" 10 july "to" 15 july, then I can't change my from date anymore after 15 july. It blocks me future dates after the "to" date selected.
Is like if I select the "to" date it makes it the maxDate until I reload the page.
How can I prevent this maxDate so I can always select the date I want? The only restriction I need is to disable past dates from today date.

Try this code
Removed code setting maxDate for from datepicker
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : null,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
if(option!==null){
dates.not(this).datepicker("option", option, date);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">

Assuming that you are talking about jquery 2.1.1 and jquery-ui 1.12.1 as described in documentation you should consider the destroy method to re-elaborate minDate and maxDate options - but that would be tricky. So i would consider to use a timerange datepicker in this case to get the desidered result.
$(function () {
var dateToday = new Date();
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 1,
minDate: dateToday
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="from" name="FechaLlegada" class="campo" placeholder="Llegada" focusOnShow="false" ignoreReadonly="true" readonly="true">
<input type="text" id="to" name="FechaSalida" class="campo" placeholder="Salida" focusOnShow="false" ignoreReadonly="true" readonly="true">

JQuery Calender for DOB to reflect changes when month, year or date is changed

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>

jquery datetime picker date and time should come in box default without clicking on box

Hi i have two datetime picker and using jquery 1.7.2 in both the datetime picker i need date and time defaultly presently am getting these after click box but i need before click only . am using jsfiddle http://jsfiddle.net/srknthcse/f9raubjp/ thank you for your help
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datepicker1').val(datetext);
},
});
});

Instead of setting datepicker to an input field set it to a div. Then use a hidden input for the value as shown on the fiddle:
http://jsfiddle.net/8ztsjcos/2/
<input type="hidden" id="to">
<input type="hidden" id="from">
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#to').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#from').val(datetext);
},
});
});