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).
Related
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.
I'm working with HTML5 elements on my webpage. By default, on the click of the date picker icon, the current date is highlighted.
<input id="dateField" type="date" name="date-field"/>
How can I configure it to highlight a specific date instead of the current year? say 1st Jan of the current year?
I tried to do this
document.getElementById('dateField').defaultValue = '2021-01-01'
and
<input id="dateField" type="date" name="date-field" value="2021-01-01"/>
but this will not only highlights but also selects the date.
You can use the value attribute like this:
<input id="dateField" type="date" name="date-field" value="2017-06-01"/>
You can learn more about this here.
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 am using date picker of bootstrap x-editable. Its working fine but I want to customized some of it's functionality. Suppose when we select any date and click on Tick mark then we can show the combined date inside a tag. So I want to get the same functionality onblur also (outside of the container but date should be change).
I think you can use this code into your input text as like that
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
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.