We Keep Coding

Allow datepicker to show only specific month

I'm trying to crate a datepicker from jQuery.
Users will allow to choose only June to September in each year from 2016-2020.
(So I don't think minDate and maxDate will work here)
I tried using the "beforeShowDay" as mentioned in
Disable specific months JqueryUI datepicker
The code was successfully disable users from picking the date outside from June to September but they can still choose January-December from the month dropdownlist (of datepicker).
What I want to do is limit the datepicker month-drop-down-list to show only June to September.
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays
});
var monthsToDisable = [0,1,2,3,4,9,10,11];
var endMonth=[8];
function disableSpecificWeekDays(date) {
var month = date.getMonth();
if ($.inArray(month, monthsToDisable) !== -1) {
return [false];
}
return [true];
}
$("#datepicker").datepicker("setDate",'06/01/2016');
});

I don't see any options that would allow you to adjust this. I have a hacky solution that will probably do the job for most use cases, but that's your call. What I have done here is remove the unwanted select items from the datepicker list each time it gets updated. I had to add a short delay as jQuery UI takes a second to generate its code.
var removeDisabledMonths = function() {
setTimeout(function() {
var monthsToDisable = [0,1,2,3,4,9,10,11];
$.each(monthsToDisable, function(k, month) {
var i = $('#ui-datepicker-div select.ui-datepicker-month').find('option[value="'+month+'"]').remove();
});
}, 100);
};
//datepicker
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays,
// Added this --
onChangeMonthYear: function(year, month, obj) {
removeDisabledMonths();
}
});
//initial hide
setTimeout(function() {
removeDisabledMonths();
}, 1000);
Note that I had to call the function with a 1 second delay after the datepicker was initialized in order to get the months to hide the first time. Hacky, but if you are only looking to adjust the UI for the user, it just may do the job.

Well, Christ's code will activate itself after you choose some month/date.
If you don't, the January,Feb..... still being shown.
Therefore I add "beforeShow:" and connect it to removeDisabledMonths();
Now it works better.
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays,
onChangeMonthYear: function(year,month,obj){
removeDisabledMonths();
}
});
var monthsToDisable = [0,1,2,3,4,9,10,11];
function disableSpecificWeekDays(date) {
var month = date.getMonth();
var day=date.getDate();
if ($.inArray(month, monthsToDisable) !== -1) {
return [false];
}
return [true];
}
$("#datepicker").datepicker("setDate",'06/01/2016');er code here

$( ".selector" ).datepicker( "option", "defaultDate", "2019-09-01" );
$( ".selector" ).datepicker( "option", "minDate","2019-09-01");
$( ".selector" ).datepicker( "option", "maxDate","2019-09-30");
This displays only the month of September in the calendar and stops the user from accessing other months.

How to get the selected date from jquery datepicker

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date ..
Here is the code for datepciker
<div id="datepicker"></div>
and here i am trying to get the selected code..
$(document).ready(function () {
$("#datepicker").datepicker({
onSelect: function (dateText, inst) {
var date = $(this).val();
alert(date);
}
});
});
But, I am not able to get the date ..Please help me ..Thanks..

This should do the trick
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
It's basic but here is a jsfiddle with it alerting the selected date when selected
update to change the date format
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
$("#datepicker").on("change",function(){
var selected = $(this).val();
alert(selected);
});
});
jsfiddle
3rd update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).val();
alert(selected);
}
});
});
I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.
4th Update
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(){
var selected = $(this).datepicker("getDate");
alert(selected);
}
});
});
The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.
Depending on your needs select which one is appropriate.
(Added 4th method and explanation of the difference after #TimothyC.Quinn commented that the getDate being the correct method)

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
$("#datepicker").datepicker('setDate', '10-03-2020');
// pass string of your format or Date() object
$("#datepicker").datepicker('getDate');
// returns Date() object
$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
// pass string of your format or Date() object

Try
$("#datepicker").datepicker({
onSelect:function(selectedDate)
{
alert(selectedDate);
}
});
OR
$("#datepicker").datepicker({
onSelect:function (dateText, inst)
{
alert(inst);
}
});

try this
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
})
you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from
first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.
HTML:
<div id='QA'></div>
<div id='datepicker'></div>
JS:
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
clearBtn: true,
todayHighlight: false,
multidate: true
}) .on('changeDate', function(e){
$('#QA').html(JSON.stringify(e));
});
});
/*
{
"type":"changeDate",
"date":"2015-08-08T07:00:00.000Z",
"dates":[
"2015-08-08T07:00:00.000Z"
],
"timeStamp":1438803681861,
"jQuery21409071635671425611":true,
"isTrigger":3,
"namespace":"",
"namespace_re":null,
"target":{
},
"delegateTarget":{
},
"currentTarget":{
},
"handleObj":{
"type":"changeDate",
"origType":"changeDate",
"guid":52,
"namespace":""
}
}
*/
</script>

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)
$("#datepicker").datepicker('getDate').toISOString()
so it will get the date in ISO stander.

All code is for Bootstrap Datepicker
var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)
or
var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30
if(calendar){
alert(calendar);
} else {
alert('null');
}

If you need it in specific format like '2021/09/28':
$.datepicker.formatDate('yy/mm/dd',
$('.date-picker-2').datepicker("getDate")
);

Here is how to get Date object from datepicker in the onSelect event:
$("#datepickerid").datepicker({
onSelect: function (dateText, inst) {
var date_obj = $(this).datepicker('getDate');
}
});
I find it strange that the onSelect caller would not return the date object by default.

jQuery Datepicker issues with minDate & maxDate

Currently I am using the following code in order to setting the Date picker functionality -
$("#datepicker").click(function() {
$(this).datepicker().datepicker( "show" );
});
But if I remove the "show" from parameter. it doesn't work and I want to add some more parameters like minDate, maxDate.
Please help How can I do it with "show" parameter.
Thanks in advance!!

You can pass it as an options like
$("#datepicker").click(function () {
$(this).datepicker({
maxDate: yourMaxDate,
minDate: yourMinDate
}).datepicker("show");
});
I don't know why you are using a click handler to initialize the datepicker.... you can just do
$("#datepicker").datepicker({
maxDate: yourMaxDate,
minDate: yourMinDate
});
Demo: Fiddle
After the plugin initialization, if you want to update the value of options, you can use the option method
$("#datepicker").datepicker('option', 'optioname', optionvalue)

you can change using option
$("#datepicker").click(function() {
$(this).datepicker('option', 'minValue', new Date(startDate));
$(this).datepicker('option', 'maxValue', new Date(endDate));
}
or...
$("#datepicker").click(function() {
$(this).datepicker('option', { minValue: new Date(startDate),
maxValue: new Date(endDate) });
}

Working with date picker in jquery, display today

I want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection, please help!
$(document).ready(function () {
$("#button_id").click(function () {
$('<div/>', {
id: "div_id"
}).append($('<input>', {
type: "date",
name: "someDate",
class: "date_id"
})).appendTo("#static_div");
$(".date_id").datepicker({
//i want the datepicker to select the currentdate/today and display it instead of'dd----yyyy'and moreover i wanted the date before today to be disabled from selection
});
});
});
Here's the link to my fiddle:
http://jsfiddle.net/L4reds/73pEN/1/

$(document).ready(function () {
$("#button_id").click(function () {
var div = $('<div/>', {id: "div_id"}),
inp = $('<input>', {type: "text",name: "someDate",id: "date_id"});
div.append(inp).appendTo("#static_div");
inp.datepicker({
minDate: 0
}).datepicker('setDate', new Date());
});
});
FIDDLE

Use minDate and maxDate options to hide the previouse date see this
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
Format option set using this option

To disable dates before the current day:
$("#date_id").datepicker({
minDate: 0
});
Read the documentation: http://api.jqueryui.com/datepicker/#option-minDate

Combining 2 jquery scripts to work together

I have these 2 scripts and the problem is that function check is called only if #hotel state is changed.
How can I make function check run and in the case of #hotel doesn't change.
var hotelMap = { hotel_a: 15, hotel_b: 5, hotel_c: 10 }; //Edw mporeis na allazeis to release period gia kathe ksenodoxeio
$(function() {
$('#hotel').change(function() {
var selectVal = $('#hotel :selected').val();
$("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
});
var dates = $('#from, #to').datepicker({
defaultDate: "+1w",
changeMonth: true,
dateFormat: 'yy-m-d',
minDate: 15,//Episis edw prepei na mpainei to release period tou prwtou stoixeiou sth lista
numberOfMonths: 3,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
$(document).ready(check);
function check(){
$('#from, #to, #hotel').bind('change', update);
$('#wait').show();
}
function update(){
var from=$('#from').attr('value');
var to=$('#to').attr('value');
var hotel=$('#hotel').attr('value');
$.get('get_availability.php', {from: from, to:to, hotel:hotel}, show);
}
function show(avail){
$('#wait').hide();
$('#availability').html(avail);
}

Move the functions in the second file out of the document ready (at the window level). At the moment they are only scoped to the document ready event.
Then you can call the functions from anywhere (although you may want to put them in a closure). It doesn't matter in which order the files are loaded as the functions are evaluated first.
For performance reasons its best to try put this code into one file though. If this is possible, then you can put the functions together with the code in one document.ready. This is probably the best solution.

You could use jQuery's trigger event. So somewhere in your code, you could add this:
$('#hotel').trigger('change');
Edit:
I updated your demo... I added a new trigger event called "update" inside the change function and inside the datepicker function. Then I changed your check() function to bind to the update and blur events (blur works better in the date picker window for some reason).
Here is the code I ended up with:
var hotelMap = { hotel_a: 15, hotel_b: 6, hotel_c: 10 };
$(function() {
$('#hotel').change(function() {
// assign the value to a variable, so you can test to see if it is working
var selectVal = $('#hotel :selected').val();
$("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
$(this).trigger('update');
});
var dates = $('#from, #to').datepicker({
defaultDate: "+1w",
changeMonth: true,
dateFormat: 'yy-m-d',
minDate: 10,
numberOfMonths: 1,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
$(this).trigger('update');
}
});
});
$(function(){
$('#from, #to, #hotel').bind('update blur', function(){
var from=$('#from').attr('value');
var to=$('#to').attr('value');
var hotel=$('#hotel').attr('value');
$('#availability').html(hotel + ' : ' + from + ' -> ' + to);
});
})