Method to Show Native Datepicker in Chrome

Method to show native datepicker in Chrome

Chrome 99 should solve this by adding a showPicker() method. It is also available for dev testing (i.e. behind a feature flag) as of Chrome 97 (release date 2021-01-04).

https://chromestatus.com/feature/5692248021794816

Method to show native datepicker in Chrome

Chrome 99 should solve this by adding a showPicker() method. It is also available for dev testing (i.e. behind a feature flag) as of Chrome 97 (release date 2021-01-04).

https://chromestatus.com/feature/5692248021794816

Native datepicker on Chrome and fallback for IE/Firefox

You can do an HTML5 feature check like so:

// Determine if this browser supports the date input type.
var dateSupported = (function() {
    var el = document.createElement('input'),
        invalidVal = 'foo'; // Any value that is not a date
    el.setAttribute('type','date');
    el.setAttribute('value', invalidVal);
    // A supported browser will modify this if it is a true date field
    return el.value !== invalidVal;
}());

Then only initialize the bootstrap datepicker if !dateSupported.

Disable native datepicker in Google Chrome

To hide the arrow:

input::-webkit-calendar-picker-indicator{
    display: none;
}

And to hide the prompt:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

How to show calendar popup when input[type=date] is on focus

For anyone who stumbles across this, I solved it (webkit only firefox also seems to respect this) by making the calendar-picker-indicator the full height and width of the input, as outlined here.

.input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

<input type="date">

addEventListeners('.facturas', 'click', launchDatePicker);
function launchDatePicker(e) {  let input = e.target.previousElementSibling;  input.focus();  input.click();  // or you can just call this instead... openPicker(input);}
function addEventListeners(elements, eventName, handler) {  if (typeof elements === 'string') elements = document.querySelectorAll(elements);  Array.from(elements).forEach(el => el.addEventListener(eventName, handler));}
function openPicker(inputDateElement) {  let event = document.createEvent('KeyboardEvent');  event.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);  inputDateElement.dispatchEvent(event);}

.facturas {  cursor: pointer;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" /><form>  <input name="some-date" type="date" />  <span class="fa fa-search facturas col-sm-1"></span></form>