Home Format input type text with date format when the value is filled by a button

Questions

Format input type text with date format when the value is filled by a button

February 3, 2023

I’m trying to format a input type text with forward slashes (/) to make it look like a date in this format = "DD/MM/YYY"

The only issue is, the values that i insert into the input are not coming from my keyboard, i mean, i’m not typing them, instead, i have a DIV with a digital keyboard on the screen.

Inside that div, i have multiple buttons with different values but the same classes applied to all of them (".buttonsDigitalKeyboard") , and at the click of each button inside that div, the value from the button clicked goes to my input.

I did make this formatting work when i type the value directly from my keyboard, but that can’t be allowed on the project, the user has to use the digital keyboard that is being shown on the screen and i can’t figure out a way to apply this when the buttons are clicked.

Does anyone have any ideia how i can make this work?

Appreciate all the help

$(document).ready(function () {
    const input_value = $("#inputText"); 
    $(".buttonsDigitalKeyboard").click(function () { 
        let value = $(this).val();  //
        field(value); 
    });

    function field(value) {
        input_value.val(input_value.val() + value); 
    }

});

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>

<body>
<input type="text" id="inputText">
<div class="col mt-2">
  <button class="buttonsDigitalKeyboard" value="0"> 0 </button>
  <button class="buttonsDigitalKeyboard" value="1"> 1 </button>
  <button class="buttonsDigitalKeyboard" value="2"> 2 </button>
  <button class="buttonsDigitalKeyboard" value="3"> 3 </button>
  <button class="buttonsDigitalKeyboard" value="4"> 4 </button>
  <button class="buttonsDigitalKeyboard" value="5"> 5 </button>
  <button class="buttonsDigitalKeyboard" value="6"> 6 </button>
  <button class="buttonsDigitalKeyboard" value="7"> 7 </button>
  <button class="buttonsDigitalKeyboard" value="8"> 8 </button>
  <button class="buttonsDigitalKeyboard" value="9"> 9 </button>
  <button class="buttonsDigitalKeyboard" value="10"> 10 </button>
</div>

>Solution :

You could check the length of the value and add / if it’s 2 or 5.

$(document).ready(function () {
    const input_value = $("#inputText"); 
    $(".buttonsDigitalKeyboard").click(function () { 
        let value = $(this).val();  //
        field(value); 
    });

    function field(value) {
        if(input_value.val().length == 2 || input_value.val().length == 5) input_value.val(input_value.val() + '/');
        input_value.val(input_value.val() + value); 
    }

});

<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<input type="text" id="inputText">

<button class="buttonsDigitalKeyboard" value="0"> 0 </button>
<button class="buttonsDigitalKeyboard" value="1"> 1 </button>
<button class="buttonsDigitalKeyboard" value="2"> 2 </button>
<button class="buttonsDigitalKeyboard" value="3"> 3 </button>
<button class="buttonsDigitalKeyboard" value="4"> 4 </button>
<button class="buttonsDigitalKeyboard" value="5"> 5 </button>
<button class="buttonsDigitalKeyboard" value="6"> 6 </button>
<button class="buttonsDigitalKeyboard" value="7"> 7 </button>
<button class="buttonsDigitalKeyboard" value="8"> 8 </button>
<button class="buttonsDigitalKeyboard" value="9"> 9 </button>

You could also fix it when the length is 8:

$(document).ready(function() {
  const input_value = $("#inputText");
  $(".buttonsDigitalKeyboard").click(function() {
    let value = $(this).val(); //
    field(value);
  });

  function field(value) {
    input_value.val(input_value.val() + value);
    var datevalue = input_value.val();
    if(datevalue.length == 8) {
      var month = datevalue.slice(0, 2);
      var day = datevalue.slice(2, 4);
      var year = datevalue.slice(4, 8);
      input_value.val(month + "/" + day + "/" + year);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>

<body>
  <input type="text" id="inputText">

  <button class="buttonsDigitalKeyboard" value="0"> 0 </button>
  <button class="buttonsDigitalKeyboard" value="1"> 1 </button>
  <button class="buttonsDigitalKeyboard" value="2"> 2 </button>
  <button class="buttonsDigitalKeyboard" value="3"> 3 </button>
  <button class="buttonsDigitalKeyboard" value="4"> 4 </button>
  <button class="buttonsDigitalKeyboard" value="5"> 5 </button>
  <button class="buttonsDigitalKeyboard" value="6"> 6 </button>
  <button class="buttonsDigitalKeyboard" value="7"> 7 </button>
  <button class="buttonsDigitalKeyboard" value="8"> 8 </button>
  <button class="buttonsDigitalKeyboard" value="9"> 9 </button>