How do i open the window in a date type input thro

Question

<span>{{t.date}}</span>
<input type='date' ng-model='t.date' id='tdate'/>

Right now when the user clicks the input icon it opens up the date window and everything works all right but I want the user to be able to click the span and for it to also open up the date window. After hours on the control panel i still haven't found an event the opens up the input.

thanks in advance for the help

Answer 1

As programmer you have no control over the html5 datepicker, because its a browser specific feature and this datepicker only appears in a few actual browsers.

Why don't you want to use the input field? You can style the input field with css and it will look like a span element:

#tdate {
   border: none;
   display: inline;
}

jQuery UI

or use the jquery ui datepicker: https://jqueryui.com/datepicker/ which you can trigger with:

$('span').click(function () {
    $('#tdate').datepicker("show");
});

if you in this case want to hide the input field then you can eventually use

input {
   height: 0;
   border: none;
}

UI Bootstrap

or for angularJS use https://angular-ui.github.io/bootstrap/#/datepicker you can open this picker with an attribute and change this click on the span: is-open=true

Answer 2

As Slim said you don't have control as programmer. He's true Read This

However there are some situation where we can't do new implementation for a reason so for such situation, you can make it work using CSS. What you need to do is just apply css rule to your input in a way that it covers your span element. Make color and background-color as transparent so it won't see by the user but when user click on span it actually execute input date click.

Hope it works.