0

I have three ways to input a date on a form

  1. Selecting either today or tomorrow checkbox which auto fills the date input with today's/tomorrow's date respectively.
  2. Select the date input to enter the date.

What I'm trying to achieve is once a user reaches the first checkbox by hitting tab which is [today] it gets focused, now by the use of arrow keys right/left I would like to shift from one option to another.

Could anyone help me get this working? Below is a draft code of what I've done. Thanks in advance :) 

$('#today_label').focus(function() {
  $(document).keydown(function(e) {
    if (e.keyCode == 39) {
      $(".move").next().focus();
    }
    if (e.keyCode == 37) {
      $(".move").prev().focus();
    }
  });
})
.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="checkbox" tabindex="-1">
    <label for="today" id="today_label" class="move" tabindex="0">Today</label>

    <input id="tomorrow" type="checkbox" tabindex="-1">
    <label for="tomorrow" id="tomorrow_label" class="move">Tomorrow</label>
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="-1" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>
Joystan Fernandes
  • 203
  • 4
  • 15
  • Possible duplicate of [Focus the next input with down arrow key (as with the tab key)](http://stackoverflow.com/questions/12407093/focus-the-next-input-with-down-arrow-key-as-with-the-tab-key) – Alfro Jan 27 '17 at 16:00

2 Answers2

0

$(function(){

  $( document ).keydown( function(e) {    
    
    // for left arrow
    if (e.keyCode == 37) {
      
      if( $("#tomorrow").is(':focus') ){ // if tomorrow element is focused only
        
        $("#tomorrow").prop('checked', false); // uncheck tomorrow
        $("#today").prop('checked', true).focus(); // check tomorrow        
      }
    }
    
    // for right arrow
    if (e.keyCode == 39) {
    
      if( $("#today").is(':focus') ){ // if today element is focused only
         
        $("#today").prop('checked', false); // uncheck today
        $("#tomorrow").prop('checked', true).focus(); // check tomorrow
      }
    }
    
  } );
} );
.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<input type="text" placeholder="Due Date">
<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="checkbox" tabindex="-1">
    <label for="today" id="today_label" class="move" tabindex="0">Today</label>

    <input id="tomorrow" type="checkbox" tabindex="-1">
    <label for="tomorrow" id="tomorrow_label" class="move">Tomorrow</label>
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="-1" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>
Ravi MCA
  • 2,491
  • 4
  • 20
  • 30
  • If there is an input above the dates and I reach the today date option by hitting tab this code doesn't work. Like the test I've done here [https://jsfiddle.net/rc1cw7c4/2/](https://jsfiddle.net/rc1cw7c4/2/) – Joystan Fernandes Jan 30 '17 at 14:10
  • @JoystanFernandes I've added the text box above the two buttons and it looks working fine for me. Could you please confirm? – Ravi MCA Jan 30 '17 at 14:58
0

It's best to let the browser take care of this for you, but you need to make a few changes:

  1. You want one option to be chosen, therefore the radio type input is more suitable than checkbox.
  2. Add a name and value attributes to each of the inputs appropriately.
  3. You want to select the first option on focus.

$('#today').on('focus', function () {
  $(this).attr('checked', 'checked');
});
.date-row {
  width: 100%;
  float: left;
}

.duedate-row {
  float: left;
  width: 50%;
}

.duedate-row input[type="text"] {
  width: 87%;
  font-family: 'Helvetica';
  font-size: 14px;
}

.duedate-row a img {
  vertical-align: middle;
}

.quick-date-container {
  width: 50%;
  float: left;
}

.quick-date-container .middle-column {
  padding-bottom: 8px;
}

.quick-date-container input {
  position: absolute;
  left: -9999px;
}

.quick-date-container label {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #6A67CE;
  border-radius: 100px;
  color: #6A67CE;
  background-color: transparent;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s, box-shadow .2s;
}

.quick-date-container label:hover,
.quick-date-container label:focus {
  color: #fff;
  background-color: #6A67CE;
  outline: 0
}

.quick-date-container input:checked + label {
  background-color: #6A67CE;
  color: #fff;
}

.quick-date-container input:checked + label::before {
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="date-row">
  <div class="quick-date-container">
    <input id="today" type="radio" tabindex="2" name="mydate" value="today">
    <label for="today" id="today_label" class="" tabindex="0">Today</label>

    <input id="tomorrow" type="radio" tabindex="2" name="mydate" value="tomorrow">
    <label for="tomorrow" id="tomorrow_label" class="">Tomorrow</label> 
  </div>
  <div class="duedate-row">
    <input type="text" id="due_on" tabindex="3" placeholder="Due Date" name="duedate" class="icon-duedate">
    <a href="#" title="Click to add date" class="move datepicker-trigger">        
      <img src="images/due_date.png" alt="">
    </a>
  </div>
</div>
Lian
  • 2,197
  • 2
  • 15
  • 16