jqueryjquery-ui-datepicker

datepicker set focus but do not open

I'm using bootstrap 5 and have a modal with 3 tabs, in one of them I have a date with datepicker on it

I want to have focus on the date when the tab opens, but I do not want the datepicker to be open.

I have tried to just hide the datepicker, but it is not fast enough so you can see it close

I have tried to make an example here https://codepen.io/Anja_Reeft/pen/GgKgxmo But in here focus does not even work, and it my first codepen, so I do not know how to fix that.

My code is like this and I hope someone can provide an alternative to $('#day-dateInput').datepicker("hide");

EDIT:
New example.
Click on "show modal", when choosing GPSMAP_day tab I want to have focus on the date, but I do not want the datepicker to be open
I try to hide it but you can see it close

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>GPS</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/theme.min.css">

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>


<script language="JavaScript">
function showModal() {
    
    const modal = new bootstrap.Modal(document.getElementById('empInfoModal'));
    modal.show();
}
$(document).ready(function() {
    
    //set datepickers
    var today = new Date();
    $('#day-dateInput').datepicker({
        dateFormat: 'dd-mm-yy', 
        autoclose: true,
        todayHighlight: true,
        maxDate: today  // Set max date to today
    });
    
    // Set default date to today
    $('#day-dateInput').datepicker('setDate', today);
    
    // Focus on the date input when the tab is shown
    $('#day-tab').on('shown.bs.tab', function () {
        $('#day-dateInput').focus(); // Focus the input field
        $('#day-dateInput').datepicker("hide");
    });
    
});

// -->
</script>

</head>

<body>

<div class="container-fluid mt-2">
    <div class="card">
        <div class="card-header">
            <div class="row mt-2">
                <div class="col-2 h4">
                </div>
                <div class="col-8 h2 text-center">
                    <span class="font-weight-bold"><i class="fa fa-car">&nbsp;&nbsp;</i>header</span>
                </div>
                <div class="col-2 text-end">
                    
                </div>
            </div>
        </div>
        
        <div class="card-body" id="mapContainer">

            <!-- Sidebar -->
            <div class="sidebar" id="sidebar">
                <button class="btn btn-danger" id="modalShow" onclick="showModal()">show modal</button>
            </div>

            <!-- Map Container -->
            <div class="map-container" id="map"></div>
            
        </div>
        
    </div>
</div>
<!-- Modal start - employee info -->
<div class="modal fade" id="empInfoModal" tabindex="-1" aria-labelledby="empInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="empInfoModalLabel">GPSMAP_info</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input class="d-none" type="text" id="empInfoModal-deviceId">
                <!-- Tabs Navigation -->
                <ul class="nav nav-tabs" id="infoTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">GPSMAP_info</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="day-tab" data-bs-toggle="tab" data-bs-target="#day" type="button" role="tab" aria-controls="day" aria-selected="false">GPSMAP_day</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="period-tab" data-bs-toggle="tab" data-bs-target="#period" type="button" role="tab" aria-controls="period" aria-selected="false">GPSMAP_period</button>
                    </li>
                </ul>
                <!-- Tabs Info Content -->
                <div class="tab-content" id="infoTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <p>home content</p>
                    </div>
                    <!-- Tabs Day Content -->
                    <div class="tab-pane fade" id="day" role="tabpanel" aria-labelledby="day-tab">
                        <div class="row mt-3">
                            <div class="col-2">
                                <label for="day-dateInput" class="col-form-label">select date</label>
                            </div>
                            <div class="col-3">
                                <input type="text" class="form-control" id="day-dateInput">
                            </div>
                            <div class="col-2">
                            </div>
                        </div>
                    </div>
                    <!-- Tabs Period Content -->
                    <div class="tab-pane fade" id="period" role="tabpanel" aria-labelledby="period-tab">
                        <p>periode content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Solution

  • By default, a jQueryUI datepicker will show when the field receives focus.

    As a workaround, you could change this option to "button", set the focus to the field, then reset the option:

    $(function(){
  $("#d1, #d2").datepicker({ "showOn": "focus" });
  
  $("#b1").click(function(){
      $("#d1").focus();
  });

  $("#b2").click(function(){
      const input = $("#d2");
      const showOn = input.datepicker("option", "showOn");
      input.datepicker("option", "showOn", "button");
      input.focus();
      input.datepicker("option", "showOn", showOn);
  });
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/theme.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>

<h3>Default:</h3>
<p><input id="d1" class="datepicker" /></p>
<p><button id="b1" type="button">Focus</button></p>

<h3>Workaround:</h3>
<p><input id="d2" class="datepicker" /></p>
<p><button id="b2" type="button">Focus</button></p>

    However, this then leaves you with a focussed datepicker which you cannot show, short of moving the focus out of and back in to the field. It would probably be better to use a button to invoke the picker in all cases.

    $(function(){
  $("#d1").datepicker({ "showOn": "button", "buttonImageOnly": false, "buttonText": "Select" });
  
  $("#b1").click(function(){
    $("#d1").focus();
  });
});
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/theme.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>

<h3>Default:</h3>
<p><input id="d1" class="datepicker" /></p>
<p><button id="b1" type="button">Focus</button></p>

    There's also the question of whether you really need a date picker widget when every modern browser now has built-in support for <input type="date">. :)