We Keep Coding

datepicker multiple fields with logic to show month year only in few fields

he all i am using this function of datepicker which is ok but what i want it to do is only on id datepicker1 full callender show with date month and year but for the rest ids datepicker2 till datepicker11 only month and year shows with the done button. would appreciate your help on it
here is the bit of my code
<script>
$(function() {
$( "#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7, #datepicker8, #datepicker9, #datepicker10,#datepicker11").addClass('datepicker');
$( ".datepicker" ).datepicker({ dateFormat: "dd-M-yy", changeMonth: true, changeYear: true, yearRange: "1947:" });
});
</script>

You can add class datepicker to all datepicker ids except for #datepicker1 and then do like:
$("#datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7, #datepicker8, #datepicker9, #datepicker10,#datepicker11").addClass('datepicker');
$(".datepicker").datepicker({
dateFormat: "M-yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "1947:"
});
$(".datepicker").focus(function() {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
$("#datepicker1").datepicker({
dateFormat: "dd-M-yy"
});

I want this date picker to choose dates from years between 1990 to 2000

Can someone help me correct this code. I want to pick dates that are between the years 1990 and 2000 only without allowing other dates like the ones in future to be selected.
<script>
$(document).ready(function(){
$( "#EmpBirthdate" ).datepicker({
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
yearRange: "-30"
});
});
</script>

$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});
Just added year range option. It should solve the problem

You can use the min max attributes
Min Max
$( "#datepicker" ).datepicker({ minDate: value1, maxDate: value2 });

Display date picker below input field

I am using bootstrap datepicker when I click on input field calendar display above the input field. I want to display it bellow input field.
JS
$(function () {
$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
}).datepicker("setDate", new Date());
//alert("#FirstFiscalTo");
});
Input Field
<input class="textboxCO input-sm form-control datePickerPickcer" id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">

Lücks solution is the one, just one minor detail dateFormat option is not valid, is format as referenced in the official doc here. You are not noticing this error because "mm/dd/yy" is the default format.
So, te solution will look like:
$(function () {
$("#fiscalYear").datepicker({ //<-- yea .. the id was not right
format: "mm/dd/yy", // <-- format, not dateFormat
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // <-- and add this
});
});

$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
orientation: "top" // add this
});
});
Reference: https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation

$("#fFYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "bottom left" // left bottom of the input field
});

$(function () {
$("#fiscalYear").datepicker({
dateFormat: "mm/dd/yy",
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
//gotoCurrent: true,
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="fiscalYear" name="FiscalYear" type="text" value="6/30/2015 7:12:21 AM">

For datepicker from jquery rather than bootstrap, option [orientation] is not available.
The positioning of the datepicker panel is auto set by jquery depending on the cursor position relative to the window.
To ensure that datepicker is always below the cursor position when an input field is selected, I used the below code
$("input").datepicker().click(function(e){
$('.ui-datepicker').css('top', e.pageY);
})
e.pageY is the current mouse Y axis position in window.
as class ui-datepicker position is absolute, when "top" attribute is set to cursor Y axis value, the datepicker ui panel will be displayed always below cursor.

jQuery Date Picker hides when pressing Next/Previous

I have a jquery datepicker calendar.
When I press next button the calendar popup hides.
Due to this error I cannot select next month date.
Here is my code
$( "#moviedate" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});

$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});
});
http://jsfiddle.net/u2n3nnts/
If you are using another JavaScript library alongside jQuery. Your code should be in between the noConflict area:
jQuery.noConflict();
(function( $ ) {
$( "#moviedate" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
});
})(jQuery);

jquery datepicker set date to tomorrow's date

I have set the date for #arrival to todays date, but how can I set the #departure to tomorrow's date?
$(function() {
$( "#arrival" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function( selectedDate ) {
$( "#departure" ).datepicker( "option", "minDate", selectedDate);
}
});
$(function() {
$("#arrival").datepicker("setDate", "0");
});
$( "#departure" ).datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$(function() {
$("#departure").datepicker("setDate", "1");
});
});
I have customized the datepicker and it works fine.

In the change function of the first datepicker, create a date object, set the date one day forward, and set the date of the second datepicker to that date. You can use minDate to make sure any date earlier than the set date can not be picked.
$(function () {
$("#arrival").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
yearRange: ":2016",
minDate: "dateToday",
onClose: function (selectedDate) {
var myDate = $(this).datepicker('getDate');
myDate.setDate(myDate.getDate()+1);
$('#departure').datepicker('setDate', myDate);
}
});
$("#departure").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
yearRange: ":2016",
});
$("#arrival").datepicker("setDate", "0");
$("#departure").datepicker("setDate", "1");
});
FIDDLE