open datepicker on autofocus html5 input date field angularjs

Question

I'm trying to autofocus a date field in angularjs. I have written a directive for it and it's working fine but I'm running into a problem. The HTML5 date picker does not opens up until and unless I don't click on it's icon which is coming on the right side.

(function () {
  "use strict";

  angular
    .module("ctraUIComponents")
    .directive("inputAutoFocus", autoFocus);

  /**
   * @ngInject
   * @return {{restrict: string, link: autoFocusLink}}
   */
  function autoFocus ($timeout) {
    /**
     * @type {{restrict: string, link: autoFocusLink}}
     */
    var directive = {
      restrict: "A",
      link: autoFocusLink
    };

    return directive;

    /**
     * @ngInject
     * @param scope
     * @param element
     */
    function autoFocusLink (scope, element) {
      $timeout(function() {
        element[0].focus();
      });
    }
  }
})();

Can somebody please help me in figuring out on how to open the datepicker on autofocus and plus how to open the date picker when we click anywhere on the input field.

can I use jquery here??

Nikhil
– Nikhil

2020-11-03 20:51:16 +00:00
Commented Nov 3, 2020 at 20:51 — Nikhil
– Nikhil, Commented Nov 3, 2020 at 20:51

dohpaz42 · Accepted Answer · 2022-03-25 17:32:52Z

2

The native date picker (e.g., <input type="date">) has a method called showPicker() that will open the datepicker programmatically.

answered Mar 25, 2022 at 17:32

dohpaz42

5304 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TylerH · Accepted Answer · 2022-03-16 21:48:16Z

0

<div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Opening the calendar when the input is focused</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
    </div>
</div>



angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function() {
  this.myDate = new Date();
  this.isOpen = false;
});

for more examples follow this Angular JS Material examples link

edited Mar 16, 2022 at 21:48

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Nov 9, 2020 at 7:59

Nelson SUle

4043 silver badges9 bronze badges

1 Comment

garden Over a year ago

I'm trying to get it working it with the native date picker

Collectives™ on Stack Overflow

open datepicker on autofocus html5 input date field angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related