We Keep Coding

Get no of days in selected month in jQuery UI datepicker

I'm using JqueryUI datepicker. I want to calculate no of days on selected month & display in textbox.
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

The onChangeMonthYear callback is used when a month or year is changed in the datepicker. For reference
Also, include the Jquery UI after including the Jquery.
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst){
var year = inst.selectedYear, month = inst.selectedMonth+1;
$(this).datepicker('setDate', new Date(year, month, 0));
$("#noofdays").val(new Date(year, month, 0).getDate())
},
onChangeMonthYear:function(year, month, date){
$("#noofdays").val(new Date(year, month,0).getDate());
}
});
.ui-datepicker-calendar {
display: none;
}
<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>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<input name="noofdays" id="noofdays" />

How to disable click on month in calendar

As you can see on the image I want to disable click on December 2017 (black box). How can I do this?
My javascript function for the calendar.
$('#datepicker').datepicker({
changeYear: true,
multidate: true,
maxViewMode: 0,
startDate: today,
})

Maybe you could use changeMonth option as following :
$('#datepicker').datepicker({
changeYear: true,
changeMonth: false,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
$('#datepicker2').datepicker({
changeYear: true,
changeMonth: true,
multidate: true,
maxViewMode: 0,
startDate: new Date(),
});
input {
width: 25%;
margin: 1%;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<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.min.js"></script>
<input type="text" id="datepicker" placeholder="You can't change my month !" />
<input type="text" id="datepicker2" placeholder="You can change my month !" />

Set mindate in bootstrap datepicker

I have 2 date picker on change of 1st date picker i need to set selected date as mindate value of the 2nd date picker . Here is my coe for that
<input type="text" size="30" class="date_picker_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_to form-control valid" id="end" value="" name="end" aria-invalid="false">
$('.date_picker_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '-0m',
minDate:0,
});
$('.date_picker_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose:true,
startDate: '+1d',
minDate:0,
});
$("#start").change( function() {
var secondDate = new Date($("#start").datepicker( "getDate" ));
var date2 = new Date(secondDate.getTime());
date2.setDate(date2.getDate() + 1);
$("#end").datepicker("setDate", date2);
$("#end").datepicker("minDate", date2);
$('#end').datepicker( "option", "minDate", date2 );
});
Here is the jsfiddle link

This is only thing you need to do for set mindate.This is the way to set mindate using datepicker.
$("#start").change( function() {
$( ".date_picker_hotel_to" ).datepicker("option", "minDate", $("#start").val());
});

Use the onSelect callback option
$('.date_picker_hotel_from').datepicker({
setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '-0m',
minDate: 0,
onSelect: function(text, dt) {
$('#end').datepicker('option', 'minDate', text);
}
});
$('.date_picker_hotel_to').datepicker({
//setDate: new Date(),
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
startDate: '+1d',
minDate: 0,
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<input type="text" size="30" class="date_picker_hotel_from form-control valid" id="start" value="" name="start" aria-invalid="false">
<input type="text" size="30" class="date_picker_hotel_to form-control valid" id="end" value="" name="end" aria-invalid="false">

$(function () {
$("#start").change(() => {
let secondDate = $("#start").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#end").datepicker("setStartDate", secondDate);
$("#end").datepicker('setDate', fromDate);
});
});

<html>
<input asp-for="StartDate" class="form-control datepicker" type="text" autocomplete="off" />
<input asp-for="EndDate" class="form-control datepicker" asp-format="{0:dd.MM.yyyy}" type="text" autocomplete="off" />
<script>
$('#StartDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
startDate: new Date('2021,1,1'),
});
$('#EndDate').datepicker({
keyboardNavigation: false,
autoclose: true,
changeMonth: true,
changeYear: true,
format: "dd.mm.yyyy",
language: "tr",
});
$("#StartDate").on("change", function (e) {
var secondDate = $("#StartDate").datepicker("getDate");
secondDate.setDate(secondDate.getDate() + 1);
$("#EndDate").datepicker("setStartDate", secondDate);
});
</script>
</html>

Datepicker and clone function from JQuery issue?

this is the part from the js, which does the cloning stuff.
$(document).on("click", ".adauga_incasare", function () {
$('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
};
this is the html code :
<div class="incasari first hasData">
<div class="data_incasare_container">
<label><b>Data</b>
</label>
<input class="data_incasare datepicker_incasare" name="data_incasare" type="text">
<label class="data_incasare_hidden">
<?php echo $value->date; ?></label>
</div>
<div class="suma_incasare_container">
<label><b>Suma</b>
</label>
<input class="suma_incasare" type="text" maxlength="8" name="suma_incasare">
<label class="suma_incasare_hidden">
<?php echo $value->received; ?></label>
</div>
<div class="coscos"> <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash sterge_incasare" id = "<?php echo $value->id; ?>"></i></a>
<div style="clear:both;"></div>
<div class="incasare_action">
<input class="btn btn-success salveaza_incasare" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div> + Adauga incasare noua
and the code from the datepicker :
$('.datepicker_incasare').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
The problem appears when I press a button, which does the cloning stuff, and after that the datepicker does not work on the input.
In the image below you can see the result:
When I save a new row and it refreshes the page, it works. But it does not work after cloning.
What should I do ? thx
for this script :
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
this is the result:

you have to initialize the cloned datepicker by simpy put the call into your click handler
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};

As in my comment you need to bind after insertion.
$(document).on("click", ".adauga_incasare", function () {
$foo = $('.incasari:last').clone(true).insertAfter('.incasari:last');
$(".incasari:last").find(".data_incasare_container label b").remove(); //remove label
$(".incasari:last").find(".suma_incasare_container label b").remove();
$(".coscos").css("padding-top", "4px");
$(".incasari:first").find(".coscos").css("padding-top", "20px");)
$foo.datepicker({ //really this should be just the init executed in a callback
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
};
function initDatePicker(){
$('.datepicker_incasari').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: "-2Y",
maxDate: "+2Y"
});
}
then in your document load call initDatePicker for first initialization
$(function() {
initDatePicker();
});

Datepicker from and to minimum one day

I'm playing around to make a datepicker work for a reservation purpose.
The code below works almost exactly as I want it to.
The problem is: I don't want the "to" datepicker to allow anything below one day into the future.
So for instance if "From" is 25/09/13 I want "To" to be at least 26/09/13.
What do I need to change to make this the way I want it?
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/datepicker//resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
minDate: -0,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate" , selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", selectedDate );
}
});
});
</script>
<form action="?q=Reservation" method="post">
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

You can do the following:
$("#from").datepicker({
defaultDate: "+0w",
changeMonth: true,
numberOfMonths: 1,
minDate: -0,
onClose: function (selectedDate) {
var date2 = $('#from').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$("#to").datepicker("option", "minDate", date2);
}
});
So you get the current from date and add one day to it using setDate, then you set the minDate option as you thought.
Demo: http://jsfiddle.net/IrvinDominin/tSrGx/

It looks to me like you are doing it right, just add a day to selectedDate:
var newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()+1);
$( "#to" ).datepicker( "option", "minDate" , newDate);

The easiest way to do this would be:
$( ".selector" ).datepicker({ minDate: -1, maxDate: 1 });