AngularJS - Set focus to next textbox after first textbox

Question

Hi I am currently working of datetime picker input in my two textboxes.

What I want to do is, after the user choose date in the first textbox, a datetime picker of second textbox will pop up. The user does not need to click the second box.

This is my code.

html

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="date" placeholder="Start Date" ng-model="date">
</md-input-container>

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="date" placeholder="End Date" ng-model="date">
</md-input-container>

javascript

(function () {
  'use strict';

  angular
    .controller('DemoCtrl_{{boundField.name}}', function ($scope, mdcDateTimeDialog) {
      $scope.date = new Date('{{boundField.value()}}');
      $scope.dateTime = new Date();
      $scope.minDate = moment().subtract(1, 'month');
      $scope.maxDate = moment().add(1, 'month');

      $scope.displayDialog = function () {
        mdcDateTimeDialog.show({
          maxDate: $scope.maxDate,
          time: false
        })
          .then(function (date) {
            $scope.selectedDateTime = date;
            console.log('New Date / Time selected:', date);
          });
      };

    })
  ;
})();

I am new to angularjs expecially the javascript part. Your help is much appreciated. :)

if you want it to tab, you can do `tabindex="1" and tabindex="2"` to both inputs — Rakesh Chand, Feb 08 '18 at 11:31
You can bind the `input` event on the first text box in a directive then just move the focus on the second text box. — Jai, Feb 08 '18 at 11:39
I believe that is exactly what I need. @Jai, May you please help me out with my codes in binding the input event and also how to move the focus on the second textbox? — James Reid, Feb 08 '18 at 11:46

Rakesh Burbure · Accepted Answer · 2018-02-08T11:56:53.370

3

Just use tab indexes like below

Update

I have updated the id and ng-model variables. You were using the same names for both start and end date whihc is not correct.

HTML code is as below

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="startdate" placeholder="Start Date" ng-model="startdate" tabindex="1">
</md-input-container>

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="enddate" placeholder="End Date" ng-model="enddate" tabindex="2">
</md-input-container>

The watcher code is as below

$scope.$watch('startdate', function (oldval,newval) {
        if(oldval!=newval)
        {
            var enddate = document.getElementById('enddate');
            enddate.focus();
        }
    });

Just add this watcher code in your controller

Once you select the date in first textbox, it will check if the value is same as previous. If not then it will set the focus on the enddate.

edited Feb 08 '18 at 11:56

answered Feb 08 '18 at 11:35

Rakesh Burbure

1,045
12
27

i guess you missed the actual question. – Jai Feb 08 '18 at 11:36
1

@Jai: looks he wanted the cursor to point the second text box. tabindex is good solution for this issue. Please let me know if i missed something. – Rakesh Burbure Feb 08 '18 at 11:39
1

What i understood is: when user selects a date in the first text box then right after that event.... datepicker for second input should be opened. without any other event. – Jai Feb 08 '18 at 11:41
@Jai That is exactly what i want to do. Thanks – James Reid Feb 08 '18 at 11:45
@Jai. Thanks.. Updated answer. – Rakesh Burbure Feb 08 '18 at 11:57
Thank you so much.!! This is a great help!! I wish i could return the favor to both of you. – James Reid Feb 08 '18 at 12:08
@JamesReid: That's great. Thanks – Rakesh Burbure Feb 08 '18 at 12:37

AngularJS - Set focus to next textbox after first textbox

1 Answers1