How to change the type of an input through events?

Question

I’m trying to use the input with type="date" as follows:

• When you’re in GRID XS.. MD will use the select native to the apparatus
• When you’re in GRID LG.. XL will use the input pattern

I tried to do the following:

<input type="text" id="step-one-form-date-of-birth" class="form-control " aria-describedby="Date of Birth" placeholder="Data de Nascimento" onfocus="(this.type='date')" onblur="(this.type='text')">

But the exchange does not occur, how to proceed with good practices?

Answer 1

The answer above the @hugocsl satisfies the solution, but as I answered the same in the comments, it takes many lines of code and maintenance time, ahead could have some kind of problem.. Finally thank you for your time to remove my doubt.

So researching too deep I found an excellent solution:

• Use the Jquery Mask, to mask the entered data.
• Use the type="tel", to use the native keyboard of smartphones/tablets and ipads (Referring only to number values).

Animation on a device within the grid LG.. XL:

Animation on a device within the grid Xs (representing smartphone):

Answer 2

Option 1

You have two options one is to hide one input and show another depending on the width of the screen, this option is only with CSS and Bootstrap Classes d-block and d-none using the bracking point -sm-

Code of the image above:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col">
            <div class="form">
                <div class="form-group">
                    <input type="date" class="form-control d-block d-sm-none" id="" aria-describedby="" placeholder="">
                    <input type="text" class="form-control d-none d-sm-block" id="" aria-describedby="" placeholder="">
                </div>
            </div>
        </div>
    </div>
</div>

---

Option 2

With JS when the screen is larger than X you change the type of input. In case I used what would be the breacking point -sm- bootstrap 540px. When the screen is larger than this I change the type attribute of input for text, if the screen is smaller it looks like type=date

Display all over the page to see input changing from one type to another. In this technique you show only one input and change its type, which is not possible to do in Bootstrap or even with CSS

function myFunction(x) {
    var inp = document.querySelector('#troca')
    if (x.matches) { // If media query matches
        document.getElementById('troca').type = 'date';
    } else {
        document.getElementById('troca').type = 'text';
    }
}

var x = window.matchMedia("(max-width: 540px)")
myFunction(x) 
x.addListener(myFunction) 

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col">
            <div class="form">
                <div class="form-group">
                    <input type="date" class="form-control" id="troca" aria-describedby="" placeholder="">
                </div>
            </div>
        </div>
    </div>
</div>