Блог

Главная - Вопросы по программированию - указатель даты и времени не открывается при нажатии на кнопку

указатель даты и времени не открывается при нажатии на кнопку

#javascript #html #jquery #asp.net #datetimepicker

#javascript #HTML #jquery #asp.net #datetimepicker

Вопрос:

я пытаюсь создать веб-сайт, и мне нужен календарь, чтобы пользователи могли планировать собрания. Я попытался получить средство выбора даты и времени из Интернета, но когда я запускаю страницу и нажимаю кнопку, календарь не открывается. (я делаю это в коде Visual Studio ASP.net C#/html). Я понятия не имею, почему

Вот код:

 @page
@model IndexModel
@{
    ViewData["Title"] = "Test";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
   
</div>
</div>
</td>
</tr>

<script type="text/javascript">
  $(function () {
        $('#datetimepicker1').datetimepicker();
  });
</script>


  

  $(function () {
        $('#datetimepicker1').datetimepicker();
  });  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
   
</div>
</div>
</td>
</tr>

Комментарии:

1. кажется, работает нормально. (Я добавил ваш код в фрагмент кода, и он работает)

2. Что еще может быть не так? Может быть, что-то с моим браузером? Я пробовал как в Internet Explorer, так и в Google Chrome, но не работал. Здесь, во фрагменте кода, это работает, но когда я выполняю на локальном хосте с помощью команды ‘dotnet run’, календарь не открывается при нажатии на кнопку

3. Код, похоже, работает нормально.

4. да, здесь это так, но я понятия не имею, почему это не работает, когда я выполняю его на локальном хосте с помощью «dotnet run», может быть, это что-то с моим компьютером?

Ответ №1:

Лучше всего использовать встроенное средство выбора даты, чтобы избежать проблем с кроссбраузерностью.

Удалите эти строки кода:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#datetimepicker1').datetimepicker();
});
</script>

И замените эту строку:

 <input type='text' class="form-control" />

С помощью этой строки:

 <input type='date' class="form-control" />

Пример:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<tr>
<td>Date</td>
<td>
<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='date' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
   
</div>
</div>
</td>
</tr>