jQuery DatePicker не отображается

ProgramBox

jQuery DatePicker не отображается

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css

Вопрос:

Здравствуйте, я пытаюсь создать простое текстовое поле с datepicker, которое появляется, когда пользователь щелкает внутри него. У меня в заголовке загружено следующее:

 <link rel="stylesheet" href="css/start/jquery-ui-1.8.13.custom.css">
<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"> </script><!-- Was missing closing tag
<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

И в моем теле у меня есть следующее текстовое поле:

 <body>

    <input id="datepicker" class="hasDatepicker" type="text">

</body>

Моя проблема в том, что когда я пытаюсь щелкнуть внутри текстового поля, ничего не происходит. Я не уверен, в чем может быть проблема. Приветствуются любые предложения.

Обновить:

Попробовал CDN, а также загрузил весь пакет пользовательского интерфейса jQuery и по-прежнему не отображается. Пробовал как в IE, так и в Firefox.

ОБНОВЛЕНИЕ 2:

Надеялся, что синтаксическая ошибка, которую я исправил выше, исправит это, но нет кости.

1. Вы используете настроенный пакет для пользовательского интерфейса jQuery, вы уверены, что он включает требования к datepicker?

2. Я перепроверю, я смотрю на небольшую демонстрационную версию, которая поставляется с загружаемым настраиваемым пакетом, и там она отображается нормально. Каковы требования к datepicker?

Ответ №1:

Пользовательский интерфейс jQuery добавляет класс «hasDatepicker» к входным данным после нажатия на него. Попробуйте удалить класс hasDatepicker. Если вы используете селектор jQuery, такой как $(‘.hasDatepicker’) для выбора входных данных, попробуйте присвоить ему другое имя класса.

Ответ №2:

Пожалуйста, удалите класс hasDatepicker из тега ввода, и он должен работать нормально.

 class = 'hasDatepicker' //Need to remove

Ответ №3:

У меня была похожая проблема.

Откройте таблицу стилей и найдите .ui-helper-hidden-accessible .

Если есть дублирующаяся строка для clip: rect(1px,1px,1px,1px); , удалите ее (возможно, вам потребуется удалить обе). Это устранило проблему для меня.

Ответ №4:

Используйте CDN для тестирования, чтобы убедиться, что у вас есть полный пользовательский интерфейс jQuery. Вы правильно это называете…

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" charset="utf-8"></script>

Ответ №5:

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

Сценарий будет выглядеть следующим образом

 <script>
    $(function() {
        $( ".datepicker" ).datepicker();
    });
</script>

И элемент будет выглядеть следующим образом

 <input id="myInput" class="datepicker hasDatepicker" type="text">

Я надеюсь, что это поможет

Ответ №6:

Я почти уверен, что вы уже исправили это, но вот несколько вещей, которые я бы попробовал:

Убедитесь, что вы используете jQuery, за которым следует пользовательский интерфейс jQuery, и существует таблица стилей для .datepicker.

Измените его с поиска идентификатора на класс, в который datepicker вводит свой собственный идентификатор.

Если это было в событии click, убедитесь, что к элементу ранее не применялся datepicker (то есть новый datepicker для каждого нового элемента). Например:

 $(".addOffer").click(function(){
    //Code to add an offer (ensuring it has the class .latest)
    $("#offers").append("<input type='text' name='datePicker' class='datepickerNew latest' />");

    //Add date picker
    $("#offers .latest.datepickerNew").datepicker().removeClass('latest');
});

Ответ №7:

У меня была похожая проблема. Моим решением было добавить z-index в .date-picker из datePicker.css

 .date-picker {
position: absolute;
z-index:1000;/*********** MY Change *************/
font-size: 1em;
color: #CCC;
text-align: center;
cursor: default;

border: 1px solid #444;
border-radius: 2px;
margin: 6px 0;
background: #222;
box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2);}

И с этим изменением начал отображаться инструмент выбора даты.

Ответ №8:

найдите и удалите его, если у вас есть что-то подобное!

 .ui-datepicker-calendar {
    display: none;
}

Ответ №9:

Это очень старый, но я столкнулся с проблемой и придумал элегантное решение, основанное на документации jQuery. Используя событие OnClose, встроенное в DatePicker api, я просто удаляю класс hasDatepicker.

  $(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    onClose: function() {
    $(this).removeClass("hasDatepicker");
 }});

Имейте в виду, что в идеале у вас должен быть уникальный идентификатор для каждого элемента, иногда это невозможно.