Been trying to find the cause of this issue but I have an input field for the Flatpickr date time but it doesn't open the native Iphone date picker.
This only happens when the field is required, on Iphone 11 and below versions no matter if it's Safari or Chrome.
Another strange thing is that we have other environments too and the date picker opens up in those but the HTML for the input is the same.
Here's the input html:
<div class="form__field-group u-full-width dw-mod">
<div class="u-full-width">
<label for="DateOfBirth" class="u-pull--left">Date Of Birth <span class="required dw-mod">*</span></label>
</div>
<input id="DateOfBirth" required="true" name="DateOfBirth" type="hidden" value="2004-01-01" class="u-full-width dw-mod flatpickr-input">
<input class="u-full-width dw-mod flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" required="" placeholder="" value="2004-01-01" max="2004-10-03">
</div>
And the Flatpickr script:
document.addEventListener("DOMContentLoaded", function () {
flatpickr("#DateOfBirth", {
mode: 'single',
maxDate: '1/10/2004 10:03:44 AM'
});
});
Video of the issues: screencast.com/t/JOnB4CpZvg
Did anyone had the same issue before? How to solve this bug?
Thanks
Reading the documentation of Flatpickr
You can try to use the config option disableMobile.
disableMobile information:
Set disableMobile to true to always use the non-native picker.
By default, flatpickr utilizes native datetime widgets unless certain options (disable) are used.
Related
I'm trying to open a HTML5 date picker on click inside an input text box using the below code, but it is not working as expected.
However, clicking on the calendar icon does open the date picker (by default). This is inside my Angular 7 application.
Fiddle: https://jsfiddle.net/mailmrmanoj/rL1ecp9w/5/
HTML:
<input
type="date"
name="startDate"
id="datePick"
(click)="openDP()"
class="input--small"
/>
Typescript:
declare var $;
openDP() {
$('#datePick').datepicker('show');
}
Is there anything wrong with my code?
Reference for the date picker: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date
Try with input type="text" instead of type="date" and on focus event call function "openDP".
<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">
Note: You can also use angularjs-datepicker instead of default HTML5 date picker as type="date" is not supported in Safari or Internet Explorer 11 (or earlier).
I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>
It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.
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.
I currently have the jQuery datepicker implemented which is working great on all browsers but when I view in mobile (iPad) the IOS default date picker comes up too. What is the best way to remove it? CSS? change input type?
This is what my input element looks like:
<input type="date" name="payment_Received" class="form-control datepicker" />
<script>
j$(document).ready(function(e) {
j$('.datepicker').datepicker({
dateFormat:'yy-mm-dd'
});
});
</script>
Just use type="text" instead of type="date"
You could also add readonly="readonly" to prevent the keyboard from appearing.
I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516