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
Related
Simply put, the following syntax doesnt work
onload="$(this).datepicker('option', {minDate: -0, maxDate: +0})"
which i have used in the input for a form as given below
<input type="text" name="date" class="datepicker form-control" onload="$(this).datepicker('option', {minDate: -0, maxDate: +0})" autocomplete="off"/>
What I want is for not being able to select a date at initial page load but later enabling it after a certain option is selected. Am i missing something that i cant see? Any help would be appreciated.
I use a jQuery UI date picker on a web site.
It works very well on desktop browsers, the calendar is showing up when user click on input and i can save the selected date.
My issue is on mobile devices (iOS and Android), the calendar is not showing and i have the native iOS date sector which have the wrong format :
On mobile, i don't see the date picker :
On desktop, it works fine :
Here is the html code of the input (custom module on Drupal 8 so the html is generated by the Form API) :
<input type="date" data-drupal-selector="edit-date-debut" aria-describedby="edit-date-debut--description" data-drupal-date-format="Y-m-d" class="form-date required form-control hasDatepicker" id="edit-date-debut" name="date_debut" value="" required="required" aria-required="true" step="300">
I’ve tried to force the date format with JS (it works on desktop) but i still have the iOS date selector :
$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });
I’ve tried to turn the input in text-input and then attach datepicker. Still no luck.
$("#edit-date-debut").attr('type','text');
$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });
For now, what i can do is generated an input type texte :
<input data-drupal-selector="edit-date-debut" aria-describedby="edit-date-debut--description" class="form-text required form-control hasDatepicker" type="text" id="edit-date-debut" name="date_debut" value="" size="60" maxlength="128" required="required" aria-required="true" readonly="readonly">
Then, i attach the datepicker and it still working on desktop. On mobile, i don’t see anymore the native date selector with the wrong format. I still have no date picker calendar but user can type the date in input text. So it’s a first step.
Do you know how can i handle this ?
The solution is not to use :
<input type="date">
but
<input type="text">
And attach a date picker like jQuery Datepicker or Bootstrap Datepicker
In safari, i need to test in private mode because sometines the Safari cache prevents me to see update in my JS.
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.
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);
});
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.