#javascript #jquery #css
#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);
, удалите ее (возможно, вам потребуется удалить обе). Это устранило проблему для меня.
Комментарии:
1. Была дублирующаяся строка, но это, похоже, не решило проблему.
Ответ №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");
}});
Имейте в виду, что в идеале у вас должен быть уникальный идентификатор для каждого элемента, иногда это невозможно.