We Keep Coding

JQuery datepicker yearrange

I have 2 datepickers like this
<input type="text" class="datepicker" data-year-range="2010:2016"/>
<input type="text" class="datepicker" data-year-range="2000:2020"/>
I have to define the yearRange for the 2 datepickers in configuration. So, I did like this.
$('.datepicker').datepicker({
changeYear: true,
// $(this) isn't working here
//yearRange : $(this).attr('data-year-range'),
yearRange : $('.datepicker').attr('data-year-range')
});
But it is taking only 2010:2016 for the two datepickers. I don't understand why. The idea is to use different date ranges for the datepickers. Is it possible or do I need to define different datepickers?
Also, In datepickers is it possible to add the yearRange in html instead of the datepicker configuration?
Here is the fiddle

You can do it in following way:
https://jsfiddle.net/m5fvc22f/16/
$(document).ready(function() {
$('.datepicker').each(function() {
$(this).datepicker({
changeYear: true,
yearRange: $(this).data('year-range'),
});
})
})

Try this : use $(this) instead of $('.datepicker')
$('.datepicker').each(function(){
$(this).datepicker({
changeYear: true,
yearRange : $(this).data('year-range')
});
});
JSFiddle Demo

Disable past dates and enable only certain future dates in datepicker

I am attempting to use the jQuery datepicker, but wish to disable all past days and allow only future Thursdays. I can get it to allow Thursdays, but the minDate functionality I add doesn't work with it. This is my code:
<script>
jQuery(document).ready(function() {
jQuery('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];}
});
});
$(function () {
$("#input_40_4'").datepicker({ minDate: 0 });
});
</script>
Can someone explain why these don't work together?

You can add more options to the datepicker by separating them by commas.
$(document).ready(function() {
$('#input_40_4').datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate : 0
// you can add more options here as well, just seperate them by commas
});
});
The reason why they didn't work in your question was because you would overwrite the options from the datepicker created in the function on line 10 with the options from the datepicker in the documentReady section.
You were basically saying create a new datepicker with mindate:0, never mind create a new one with only Tuesdays.

What is happening is you are overwriting the effects of the first datepicker call with the second one.
Put both of the options in one options object
$("#input_40_4'").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
Demo
$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 4, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />

$("#datepicker").datepicker({
beforeShowDay: function(date) { return [date.getDay() == 3, ""];},
minDate: 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css"></link>
<input type="text" id="datepicker" />

Jquery datepicker change event trigger and input's default change event

I have datepicker
<input type='text' class='inp'>
<script>
$('.inp').datepicker();
$(".inp").on("change",function (){
console.log('inp changed');
});
</script>
When I first change '.inp' manually type there a value, then immediately I click on datepicker's opened calendar. I get two 'change' event listeners. First from manual change, then from datepicker change.
How can I avoid this?

Set your input readOnly, it will help you to change the value of field through icon only.
<input type='text' class='inp' readOnly />
then use onSelect to get selected date, as following:
$(function() {
$(".inp").datepicker({
onSelect: function(dateText, inst) {
// alert(dateText);
}
});
});

Try using the onSelect function like:
$(function() {
$( ".datepicker" ).datepicker({
onSelect: function() {
//your code here
}});
This will be fired when they select a date from the calendar not when they are typing.

You can have onSelect trigger the change event on the text field. This way editing the date via the text box or via the date picker behave the same.
$('.inp').datepicker({
onSelect: function() {
return $(this).trigger('change');
}
});
$(".inp").on("change",function (){
console.log('inp changed');
});

If you are using the bootstrap datepicker you can do the following:
$('.datepicker').datepicker()
.on('changeDate', function(e){
# `e` here contains the extra attributes
});
For more details view: Bootstrap Datepicker events

Thanks! Everybody, but I could not make field readonly one, this is requirement. So I had to reasearch myself. So I posting my final solution. I did unbinding for 150 ms, then bind again.
I made a jquery plugin for this
function myfunc(that){
$(that).one('change', function(){
var that = this;
setTimeout(function(){myfunc(that);}, 150);
//some logic
}
)
}
myfunc(".inp");

Thank you everyone, this is what I used though,
function myfunction(x,x2){
var date1 = new Date(x);
var MyDateString;
MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2);
x2.value= MyDateString;
}
x, being the datepicker value and x2 being the datepicker object

Try this
$(function() {
$("#birth_date").datepicker({
onSelect: function() {
console.log("You Code Here");
}});
});

If you are using datepiker ui you can also used following formate
<input type='text' class='inp'>
<script>
$('.inp').datepicker({
onSelect: function(date) {
$(this).change();
},
}).on("change",function (){
console.log('inp changed');
});
</script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j(function() {
j("#datepickerFrom").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy/mm/dd",
onSelect: function () {
var date = $(this.value).selector;
document.getElementById("dateFrom").value = date;
},
}).on("change",function (){
var date = $(this.value).selector;
document.getElementById("dateFrom").value = date;
})
.datepicker("setDate",document.getElementById("dateFrom").value);
});
</script>
<input id="datepickerFrom"/>
<input type="hidden" name="dateFrom" id="dateFrom"/>

if you are using date picker of jquery there is no need of calender event fire.
you can fire the event on textbox "textchanged"

How to get the year from datepicker ui?

I have code which the user choose date .
I need to to get the value year and put it in div.
How can I do that?
jsFissl Demo
many Thx.
the code:
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<div id="Year"></div>
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("#Year").text($("#datepicker").val());
I try to use .substring(0, 4)but I don't kno how.

You can convert that input value into a Javascript Date as well and have everything from it's method.
http://jsbin.com/ugaxob/2/edit
$(".btn-getdate").click(function() {
var dt = $("#datepicker").val(),
d = new Date(dt);
$("#Year").text(d.getFullYear());
});
or go wild and use MomentJs plugin and you will get so much fun (live example updated)
When you want to perform something on a plugin, that is called act upon an event, and you should see the Events tab in the DatePicker, where you can find onSelect.
My live example was changed to act upon selection and no need to press any link or button.

This shows the year you wanted to extract.
HTML:
<meta charset="utf-8">
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<button>Show year</button>
</div><!-- End demo -->
JS:
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
$("button").click(function() {
var split = $("#datepicker").val().split('/');
alert(split[2]);
});
});​
The split method of String class divides the string and returns as an array.
EDIT: This does everything you wanted.
Take a look at the onSelect event.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText) {
var split = $("#datepicker").val().split('/');
$("#Year").text(split[2]);
}
});
});​

How about this : JSFiddle
No need to do string manipulation, just create Date object using selected date from datepicker and use getFullYear() method to get selected year...
$(function() {
$("#datepicker").datepicker({
onSelect: function(date) {
var d = new Date(date);
alert(d.getFullYear());
},
changeMonth: true,
changeYear: true
});
});

Restrict datepicker dates

Currently I have this javascript code for my date picker
<script type="text/javascript">
$(function() {
$("#datePicker").datepicker();
$("#<%=TextBox1.ClientID %>").datepicker();
});
</script>
How to make my date picker not accept the past date? Thank you.

this greys out (and disables the selection) of any past date:
$(function () {
$("<%=TextBox1.ClientID %>").datepicker(
{
minDate: +0,
});
});

Try this
$("#datepicker").datepicker({ minDate: 0 });
minDate option does this work..