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 !" />
Related
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" />
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="">
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>
I'm trying to update the value of a datepicker for bootstrap when clicking a div, however it just does nothing (no errors). The datepicker itself works perfectly fine. Here's the javascript with the options:
$('#datepicker').datetimepicker({
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false,
});
The javascript I am trying to change the date with:
$('.someDiv').click(function() {
$("#datepicker").datetimepicker('setDate', '2016-03-05');
});
And finally the HTML:
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" id="date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Docs can be found under following link, however the provided method doesn't work: https://bootstrap-datepicker.readthedocs.org/en/latest/
$(function () {
$('#datepicker').datetimepicker({
pickTime: false,
format: 'DD-MM-YYYY',
pickTime: false,
defaultDate: moment(),
minDate: moment(),
maxDate: moment().add(10,'y'),
showClose: true,
autoclose: true,
keepOpen: false
});
$('.date-setter').click(function() {
alert('jj');
$('#datepicker').data("DateTimePicker").setDate('03-05-2016');
});
});
Answer to the current version
$('#deadline_picker').data("DateTimePicker").date(deadline);
i have form search
<b><span>#Html.Raw(Generic.ToDate): </span></b><span>#Html.DateEmpty("ToDate", (DateTime?)ViewBag.ToDate)</span>
<b><span>#Html.Raw(Generic.FromDate): </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" />