We Keep Coding

Flatpickr doesn't open when input field is required in iOS

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.

Open HTML5 date picker inside input box click

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).

jQuery UI date picker doesn’t show up on mobile iOS and Android (but shows on desktop)

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.

HTML Datepicker - Opened by default

I'm using an input of the type date. I would like to know if there is a way to make the datepicker selection panel opened by default when the user enters in the page.
The element look like this:
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true">

Did you try adding autofocus
<input class="form-control user-success" id="starting-date" name="date" required="" type="date" value="2017-04-07" data-initialized="true" autofocus="autofocus">

By using following funtion date picker will open bydefault after screen load.
$(function() {
$( "#starting_date" ).datepicker();
$( "#starting_date" ).datepicker("show");
});

You can display it embedded in a webpage by calling it on div instead of input, as per official documentation.

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>