Как сделать так, чтобы средство выбора даты начальной загрузки всегда было видимым/открытым?

Объяснение

Я успешно использую «тип ввода = дата» в качестве средства выбора даты в начальной загрузке 5.3, чтобы выбрать дату для просмотра данных.

У меня проблема: мне нужно щелкнуть по нему, чтобы оно стало видимым.

В моей ситуации он должен быть всегда виден, как календарь Javascript.

Вопрос

Как этого можно достичь?

Код

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

Вы используете Bootstrap 4 и Bootstrap 5 одновременно? Если нет, исправьте теги вопросов и в любом случае предоставьте минимально воспроизводимый пример, позволяющий воспроизвести проблему.

— 26.06.2024 09:44

Bootstrap 5 не имеет средства выбора даты. Это обычный ввод HTML.

— 17.07.2024 20:56

javascript jquery bootstrap-5

25.06.2024 07:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

105

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Используйте приведенные ниже ссылки CDN и приведенную ниже функцию для вызова ввода даты.

$('#datepkr').datepicker({
    uiLibrary: 'bootstrap5'
});

<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" />
<input id = "datepkr" width = "280" />

он должен быть виден при загрузке страницы, а не после нажатия на нее.

— 25.06.2024 17:00

ох, ладно... смотри другой ответ. onload виден также onclick видим.

— 26.06.2024 06:17

Бутстрап 5.0.2? Почему? Гиджго? Почему?

— 26.06.2024 09:47

25.06.2024 08:00

Ответ принят как подходящий

Поскольку встроенный HTML input type = "date" не поддерживает постоянную видимость. Вы можете интегрировать Bootstrap Datepicker и сделать его всегда видимым.

 $(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>

Это не похоже на стиль Bootstrap. И календарь исчезает после нажатия.

— 27.06.2024 18:47

Этой библиотеке более 10 лет, она требует Bootstrap 2.0.4+ и jQuery 1.7.1+. Зачем вам использовать ее в любом новом проекте?

— 28.06.2024 00:30

25.06.2024 08:11

использовать все CDN

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- jQuery -->
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap JS -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Datepicker JS -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

используйте эту дату ввода и этот скрипт

 <div class = "container mt-5">
    <input type = "text" id = "datepicker" class = "form-control">
</div>
<script>
    $(document).ready(function(){
        $('#datepicker').datepicker({
            autoclose: true
        });
        $('#datepicker').datepicker('show');
    });
</script>

Бутстрап 4.5.2? Почему?

— 26.06.2024 09:47

Это просто делает всплывающий календарь видимым изначально, но не делает календарь видимым всегда.

— 28.06.2024 13:54

26.06.2024 06:23