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 start date and restrict dates in datepicker

I am trying to set start date to 14 days from today. Below 14 days date will not be selectable. I also need to lock the next 13 days as not selectable.
$('#sandbox-container input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
startDate: new Date(),
autoclose: true
})
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="{{ date('m/d/Y',strtotime($productDate))}}">

var newdate = new Date();
newdate.setDate(newdate.getDate() - 14);
$('input').datepicker({
format: 'mm/dd/yyyy',
keyboardNavigation: false,
forceParse: false,
minDate: newdate,
startDate: newdate,
autoclose: true
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.min.css" rel="stylesheet"/>
<input type="text" name="productDate" id="productDate" class="form-control" maxlength="20" placeholder="Date" value="">

How to get only time value from Bootstrap datetimepicker

In the code below, StartTime is 05/29/2017 1:00:00 PM.
But I want StartTime to be 1:00:00 PM.
HTML
<div class="form-group">
<label>From</label>
<input class="form-control " id="StartTime" type="text" name="StartTime"/>
</div>
JS
$('#StartTime').datetimepicker({
format: 'LT'
});

this is how you can disable date
$(function () {
$('#StartTime').datetimepicker({
format: 'LT',
});
});

try this:
$("#StartTime").datetimepicker({
format: 'hh:ii',
startView: 1,
pickDate: false,
autoclose: true
}).on("show", function(){
$(".table-condensed .prev").css('visibility', 'hidden');
$(".table-condensed .switch").text("Pick Time");
$(".table-condensed .next").css('visibility', 'hidden');
});

Check valid datepicker

i have form search
<b><span>#Html.Raw(Generic.ToDate):&nbsp</span></b><span>#Html.DateEmpty("ToDate", (DateTime?)ViewBag.ToDate)</span>
<b><span>#Html.Raw(Generic.FromDate):&nbsp</span></b><span>#Html.DateEmpty("FromDate", (DateTime?)ViewBag.FromDate)</span>
I have code js input datepicker:
$("input[type=date]").each(function () { this.type = "input" }).datepicker();
I want check validate fromdate < todate and date > "30/9/2013". please who can help me.

Read date range
js
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
HTML
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />