Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to make bootstrap datepicker be always visible/open?

Explaination

I am successfully using an ‘input type=date‘ as a datepicker in bootstrap 5.3, to select the date for data viewing.

The problem that i have is: i have to click on it to be visible.

For my situation, it has to be always visible, like a javascript calendar.

Question

How can this be achieved?

Is there any better alternative with a more attractive UI that does the same job?

The code

  <form id="Create" method="post" asp-page-handler="CreateDate" >
  <input class="btn btn-secondary " type="date" name='newdate' onchange='this.form.submit()' >
Tags:

2

Answers


  1. 0

    use below cdn links

       <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />

    Use the below function to call date input

    <input id="datepkr" width="280" />
<script>
    $('#datepkr').datepicker({
        uiLibrary: 'bootstrap5'
    });
</script>
    Login or Signup to reply.
  2. 0

    As the built-in HTML input type="date" doesn’t support always being visible. You can integrate the Bootstrap Datepicker and make it always visible.

     $(document).ready(function(){
            $('.datepicker-container').datepicker({
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                autoclose: true
            }).on('changeDate', function(e) {
                $('#newdate').val(e.format('yyyy-mm-dd')).change();
            });
        });
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datepicker Always Visible</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form id="Create" method="post" asp-page-handler="CreateDate">
            <div class="datepicker-container"></div>
            <input type="hidden" name="newdate" id="newdate" onchange="this.form.submit()">
        </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search