jQuery UI Datepicker not working | jQuery 3.3.1 - javascript

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

Related

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

JQuery Date Picker Not Showing on Refresh

From what I can see including examples such as this one
jQuery Datepicker - refresh pickable days based on selected option
This code should work.
Here is where I am calling my external jquery scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
I will note in case it matters I am using a bootstrap theme but do not have boot strap datepicker loaded.
When I load the page the date picker loads fine using the code below. (I will note I was using a jquery change event but switched my code to more closely match the above answer in case it was something small I was missing
$(function(ready){
$(function() {
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
});
});
HTML
<input type="radio" onchange="loadDatePicker()" tabindex="7" class="change" id="radio_1" name="freq" value="1"> Monthly <input type="radio" onchange="loadDatePicker()" tabindex="8" id="radio_2" class="change" name="freq" value="2"> Bi-Weekly
<input class="form-control" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="{{date}}">
The outputted HTML is below:
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
Then I click my radio buttons and the following code is called
function loadDatePicker(){
console.log("test")
$('#datepicker').datepicker("destroy");
if($("input[type='radio'][name='freq']:checked").val() == 1){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+6W"
});
}else if($("input[type='radio'][name='freq']:checked").val() == 2){
$('#datepicker').datepicker({
format: "mm/dd/yy",
minDate: "+2W",
maxDate: "+2W10D"
});
}
$('#datepicker').datepicker("refresh");
}
I can see the input change for a second but it quickly goes back
<input class="form-control hasDatepicker" tabindex="9" onkeyup="slashfunc(this.id)" onchange="datefunc(this.id)" type="text" id="datepicker" value="">
However, now the datepicker no longer comes up when the input for the datepicker is clicked.
I finally solved this.
It was an external piece of code modifying the DOM.
Part of a chat script I am working on for the same solution included the following lines of code which caused it. (I commented out lines until I found which ones were breaking it)
jQuery(document).ready(function($) {
$("body").append('<div id="chat" title="Basic chat"><div id="chats">Please Enter your Name: <input id="username" type="text" ></div></div>');
$("body").append('<div id="chat2" title="Basic chat"><div id="chatc"> </div><div id="chate"><input id="chatb" type="text" ></div></div>');
});
For some reason the system objected to this line being between where the date picker was initially declared, and where it was modified.
I moved the entire chat code library above the date picker code and above the jquery-ui library and it all started working as if by magic.

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);
});

JQuery Date picker Change components

Hi I am using this jquery datepicker. Till now it is fine.
Now my problem is by default a dropdown control is used to select years, months.
I want to change them to Input type number. How to do this?
I tried changing inside the jquery ui code but I am unable to sort it out.
I am attaching sample datepicker fiddle.
Please help me out to find a way to change year and month to number type
Any help would be appreciated.
$("#date").datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "yy-mm-dd",
closeText: "Cancel",
buttonText: "Select date",
currentText: "Today",
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body>
<input type="text" id="date" style="height:20px;" />
</body>

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.

Categories