We Keep Coding

How can I make first date max of second date

I would like to run this code but without success. I'm a beginner please!
Indeed, I have two dates date1 and date2. and I would like after selecting date date1 that date to be the max date of date date2. I tried with it but it does not work (Onchange)
$(document).ready(function() {
// Date1
$(".date1").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function(selected) {
var minDate = new Date(selected.date.valueOf());
$('.date2').datepicker('setStartDate', minDate);
});
// Date2
$(".date2").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function(selected) {
var minDate = new Date(selected.date.valueOf());
$('.date1').datepicker('setStartDate', minDate);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<p>Date: <input type="text" class="date1"></p>
<p>Date: <input type="text" class="date2"></p>

Air Datepicker inline javascript for enabling date 15 days from newDate

I am using air datepicker for a form element and want to set the calendar to show dates which are 15 days from the current date and disabling selection of all previous dates.
However, I haven't been able to find a solution to this.
The following is the input field code so far:
<input type="text" data-date-format="dd-mm-yyyy" data-range="true" data-multiple-dates-separator=" - " data-language="en" data-startDate= newDate(+new Date + 12096e5) class="datepicker-here" name="Schedule">
Any help will be really appreciated.

Using jQuery UI
var dateToday = new Date();
var dates = $("#date").datepicker({
defaultDate: "+15",
changeMonth: true,
minDate: "+15",
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<label for="from">From</label> <input type="text" id="date" name="from"/>
Using air Datepicker
set minDate while initializing datepicker
var dateToday = new Date();
var dates = $("#date").datepicker({
language: 'en',
minDate: getMinDate(15)
});
function getMinDate(days) {
var date = new Date();
date.setDate(date.getDate() + days);
return date;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script>
<label for="from">From</label> <input type="text" id="date" name="from"/>

air-datepicker js : hour+2

I try to set hours (+2h) to actual day and not for the others.
Example:
Today is October 18th, time: 10am.
If I click (without changing the date) -> Time is 12pm.
If I click and choose tomorrow (19th October) -> I choose any time.
Today is October 19th, time: 08am.
If I click (without changing the date) -> Time is 10am.
If I click and choose tomorrow (20th October) -> I choose any time.
PS : If possible, I want to disable the entry in the input (because we can change the time)
Thx
var start = new Date()
var hour = start.getHours()+2;
$('#date').datepicker({
language: 'en',
timepicker: true,
minHours: hour
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"/>
<input type='text' id="date" class="" />

EDIT: I thought you want to disable previous dates (everything < now + 2hours). If not, just change minDate: start to startDate: start.
Try with:
var start = new Date();
// first available date and time
start.setHours(start.getHours() + 2);
$('#date').datepicker({
language: 'en',
timepicker: true,
minDate: start,
onSelect: function(fd, d, picker) {
if (d < start) {
return;
}
if (d.getDate() == start.getDate() &&
d.getMonth() == start.getMonth() &&
d.getYear() == start.getYear()) {
// set minHours to start hours
picker.update({
minHours: start.getHours()
});
} else {
// set minHours to 0 hours
picker.update({
minHours: 0
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet" />
<input type='text' id="date" class="" />
Also, air-timepicker docs: http://t1m0n.name/air-datepicker/docs/

I want to disable the past time in datetimepicker in codeigniter

i have 2 views. one of them calls the other one for the script of the datetime picker. right now what i get is a datetime picker that had past dates disabled. what i want to get is a date picker that not only has past date disabled but also has the passed time disabled. i am posting my code below.
This is my first view where the datepicker is displayed.
<input class="field-input form_datetime_houseboat" type="text" readonly placeholder="Starting Date" name="fromdate" id="fromdate">
my 2nd view has the section:
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var dt = new Date();
var timed = new Date(dt.getHours(), dt.getMinutes());
$(".form_datetime").datetimepicker({format: 'dd-mm-yyyy hh:ii', startDate:today, minTime: timed});
</script>
thanks in advance.

try this script :helps to disable previoue date and time. create new date object as minDate
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>// datetime picker
<div id="date_picker"> </div>
<script type="text/javascript">
$(function(){
var dateToday = new Date();
var dates = $('#date_picker').dtpicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>

Bootstrap datepicker disabling past dates without current date

I wanted to disable all past date before current date, not with current date. I am trying by bootstrap datepicker library "bootstrap-datepicker" and using following code:
$('#date').datepicker({
startDate: new Date()
});
It works fine. But it is disabling date till today.
As example if today is 04-20-2013 and i disable past dates by setting startDate: new Date(). but I am able to select date from 04-21-2013.
UPDATED: i can solve it as following for UTC zone:
var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));
or startDate: "+0d"
But these methods don't work when UTC is a day ahead. For my client in California that means at 5:00 pm my client can no longer select his local current date as a valid date. In order to fix this I am temporarily using startDate: "-1d", but of course before 5 that means yesterday is visible.
Has anyone come up with a better method for now as I do not want to tell users to put in a UTC date?

var date = new Date();
date.setDate(date.getDate()-1);
$('#date').datepicker({
startDate: date
});

Use minDate
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#date').datepicker({
minDate: today
});

HTML
<input type="text" name="my_date" value="4/26/2015" class="datepicker">
JS
jQuery(function() {
var datepicker = $('input.datepicker');
if (datepicker.length > 0) {
datepicker.datepicker({
format: "mm/dd/yyyy",
startDate: new Date()
});
}
});
That will highlight the default date as 4/26/2015 (Apr 26, 2015) in the calendar when opened and
disable all the dates before current date.

use
startDate: '-0d'
Like
$("#datepicker").datepicker({
startDate: '-0d',
changeMonth: true
});

You can use the data attribute:
<div class="datepicker" data-date-start-date="+1d"></div>

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('#date').datetimepicker({
startDate: today
});

The solution is much simpler:
$('#date').datepicker({
startDate: "now()"
});
Try Online Demo and fill input Start date: now()

<script type="text/javascript">
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
todayHighlight:'TRUE',
startDate: '-0d',
autoclose: true,
})

Here it is
<script>
$(function () {
var date = new Date();
date.setDate(date.getDate() - 7);
$('#datetimepicker1').datetimepicker({
maxDate: 'now',
showTodayButton: true,
showClear: true,
minDate: date
});
});
</script>

Try it :
$(function () {
$('#datetimepicker').datetimepicker({ minDate:new Date()});
});

To disable past dates & highlight today's date:
$(function () {
$('.input-daterange').datepicker({
startDate : new Date(),
todayHighlight : true
});
});
To disable future dates & highlight today's date:
$(function () {
$('.input-daterange').datepicker({
endDate : new Date(),
todayHighlight : true
});
});
For more details check this out https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

Disable all past date
<script type="text/javascript">
$(function () {
/*--FOR DATE----*/
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
//Date1
$('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
format: 'dd-mm-yyyy',
todayHighlight:'TRUE',
startDate: today,
endDate:0,
autoclose: true
});
});
</script>
Disable all future date
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
//Date1
$('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
format: 'dd-mm-yyyy',
todayHighlight:'TRUE',
minDate: today,
autoclose: true
});

Please refer to the fiddle http://jsfiddle.net/Ritwika/gsvh83ry/
**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />
var date = new Date();
date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd/mm/yyyy',
startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
var temp = $(this).datepicker('getDate');
var d = new Date(temp);
d.setDate(d.getDate() + 1);
$('.datepickend').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
startDate: d
}).on('changeDate', function() {
var temp1 = $(this).datepicker('getDate');
var d1 = new Date(temp1);
d1.setDate(d1.getDate() + 1);
$('.datepickthird').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
startDate: d1
});
});
});

You can simply add data attribute in html input tag:
In rails html :
<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>
HTML :
<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">

In html
<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">
In Js side
<script type="text/javascript">
$(document).ready(function () {
var dateToday = new Date();
dateToday.setDate(dateToday.getDate());
$('#d_start_date').datepicker({
autoclose: true,
startDate: dateToday
})
});

to disable past date just use :
$('.input-group.date').datepicker({
format: 'dd/mm/yyyy',
startDate: 'today'
});

The following worked for me
$('.input-group.date').datepicker({
format: 'dd/mm/yyyy',
startDate: new Date()
});

It depends on what format you put on the datepicker
So first we gave it the format.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want
Then Pass the datepicker (depends on the version you using, could be startDate or minDate which is my case )
//Datetimepicker
$(function () {
$('#datetimepicker1').datetimepicker({
minDate: today, //pass today's date
daysOfWeekDisabled: [0],
locale: 'es',
inline: true,
format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
sideBySide: true
});
});

You can find your solution in this link below: https://codepen.io/ahmetcadirci25/pen/NpMNzJ
Thats work for me.
My code:
var date = new Date();
date.setDate(date.getDate());
$('#datetimepicker1').datetimepicker({
isRTL: false,
format: 'dd.mm.yyyy hh:ii',
autoclose: true,
language: 'tr',
startDate: date
});

If your requirement is to disable the startDate and endDate dynamically based on one on another you can you this.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true
}).on('show', function(e){
var date = $('#date3').datepicker('getDate');
if(date){
$('#date2').datepicker('setEndDate', date);
}
});
$('#date3').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true
}).on('show', function(e){
var date = $('#date2').datepicker('getDate');
if(date){
$('#date3').datepicker('setStartDate', date);
}
});
If your requirement is just disabled past dates then you can use below snippet.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true,
startDate : new Date()
})
If your requirement is just disabled future dates then you can use below snippet.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true,
endDate : new Date()
})
I hope it will help someone.

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('.datePicker').datepicker({
dateFormat: 'DD-MM-YYYY',
orientation: "auto",
startDate: today,
autoclose: true
});