We Keep Coding

jQuery UI Datepicker not working | jQuery 3.3.1

I have this project about booking system in php. little bit old tbh but it's get the job done
Anyway.. I have a problem with the "datepicker" in jquery.
I have this input field
<div class="booking_dropdown"><input type="text" id="datepicker" class="datepicker" placeholder="Check in" name="arrival" required="required" value="<?php echo isset($_POST['arrival']) ? $_POST['arrival'] :date('m/d/Y');?>"></div>
with I connected with the datepicker function
here it's code
$('#datepicker').datepicker({
inline: true,
startDate: new Date(),
changeMonth: true,
changeYear: true,
showButtonPanel: true,
minDate: 0
});
the mineDate: 0 suppose to make the booking mechanism start from current day and disable all the past days, but actually the whole datepicker function turned out to be not working at all. idk why tbh
Note : the function located in another file called index.html and the input field located in file called template.php
Project Download Link

jQuery datepicker maxDate issue

I have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1

Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});

Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here

Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html

Bootstrap Datepicker: Ensuring EndDate > StartDate as well as having a max start date

Apologies if my title is on the crappy side. I should also start by mentioning that this is an MVC application if that matters.
Here's what I'm trying to do. I want my datepickers to have the following requirements:
The start date must have a range of today - 45 days ago
The end date must not be able to go past today
The end date must come after the start date
Here is what I've tried so far and have gotten the first 2 bullets working:
HTML
<div class="col-md-6 row">
<div class="form-group">
<label for="StartDate">Start Date</label>
<input type="text" id="StartDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
<label for="EndDate">End Date </label>
<input type="text" id="EndDate" class="form-control" data-provide="datepicker" data-date-start-date="-45d" data-date-end-date="0d">
</div>
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#StartDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#EndDate").datepicker("option", "minDate", selected)
}
});
$("#EndDate").datepicker({
dateFormat: 'mm/dd/yyyy',
onSelect: function (selected) {
$("#StartDate").datepicker("option", "maxDate", selected)
}
});
I've tried also removing some of the data attributes in the HTML and instead adding them to the datepicker methods in the javascript to no avail.
I tried using the solutions to these following questions as well to no avail:
how to compare two datepicker date jquery
Twitter Bootstrap datepicker: how to enable only specific daterange
It also appears that most of the examples I've found use JQuery UI 1.9.2. I only use JQuery 1.9.1 and NOT UI. Does that make a difference?
I'm new to javascript and all this other web stuff so I'm sure I'm missing something very simple but any assistance is appreciated.

Well okay it looks like I found my own answer.
Turns out I was using a combination of two different plug-ins.. Oops. So in case anyone else has a problem with validating start date < end date at all times as well as restricting initial start and end dates, here is what I was able to get working.
$("#StartDate").datepicker({
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#EndDate').datepicker('setStartDate', minDate);
});
$("#EndDate").datepicker({
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#StartDate').datepicker('setEndDate', minDate);
});

How to make datepicker textbox editable?

I am using datepicker in my application for letting the user entering dates. But what I want is that the user should be able to enter the dates manually as well into the textbox using keyboard and then the date-picker automatically should be able to identify the date and accept it.
Here is the JS used.
<script type="text/javascript">
function getMetricName()
{
var today = new Date();
var maxdate= new Date(today.getFullYear(),today.getMonth(),(today.getDate()- 1),"23","59","59");
$(function() {
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
$('#end_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
});
</script>
And below is the simple datepicker commands in html.
<td><input class="datepicker" name="start_date" value="" /></td>
<td><input id="end_date" name="end_date" value="" /></td>
Please help.

If you are using Datepicker Widget from JQuery, you can use the next option;
constrainInput: false
like
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
constrainInput: false,
maxDate: maxdate});
API information constrainInput +
API documentation for further documentation if you need any.

Can't set correct date using jquery datepicker

this is my problem i've this :
<script>$(function() {$( "#dataInizioBook" ).datepicker();});</script>
<input type="text" id="dataInizioBook" value="01/01/2013"/>
The datepicker will show another date selected when i click the input text.
Thank's for the help.

Try this in case your browser is configured to use different culture:
$(function() {$( "#dataInizioBook" ).datepicker({ dateFormat: 'dd/mm/yy' });});