2012-06-07 2 views
6

Я Календаря JQuery UI, как показано ниже, и она работает на IE только не на Chrome:JQuery Выбор даты не работает на Chrome

<input type="image" src="/images/caleder.jpg" id="btnCalendar" /> 

<script type="text/javascript"> 
$(function() { 
    $("#btnPeriodCal").datepicker(); 
}); 
</script> 

Если изменить type="text" это похоже на работу. Может кто-то, пожалуйста, помогите мне в решении этой проблемы. Я не могу использовать type="text", поскольку мне нужно показать изображение.

Спасибо.

+1

Используйте 'buttonImage' свойство. Проверьте мой ответ. :) –

ответ

0

Если я ошибаюсь, только теги div, теги span и т. Д. Могут быть сборщиками даты.

4

Вы можете использовать обработчик:

<script> 
$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 
</script> 

Надеется, что это работает! :)

+1

Не работает, Должен ли я сохранить эту строку как есть или изменить на

+0

Примечание. Я должен быть в состоянии отображать значок календаря для пользователей. –

+2

Да, это и есть. Появится текстовое поле с указанным вами значком. Проверьте этот пример: http://jqueryui.com/demos/datepicker/icon-trigger.html –

0

Используйте его как -

<p>Date: <input type="text" id="datepicker"></p> 

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 

Проверьте его в действии - http://jqueryui.com/demos/datepicker/#icon-trigger

И не забудьте включить эти файлы в <head> теге

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"> 

1

У меня такая же проблема. И я подумал, почему ввод может работать, но кнопка не могла. Хитрость заключается в том, что при щелчке фокус получает фокус, а кнопка - нет. Попробуйте следующее:

$(function() { 
    $("#btnPeriodCal").datepicker().click(function() { $(this).focus(); }); 
}); 
12

У меня проблема с выбором даты.

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

Я не вариант, поэтому я изменил type='text' то он работает в хроме ..

Input type is date

Input type is text

+1

Naveen Спасибо за ваши отзывы ... Из-за этого я проверил работу моего друга. Он также использовал datepicker, который не имеет кнопки закрытия в календаре. Я изменил его коды, тип ввода на сегодняшний день и проверен в хромированном состоянии. Он работает. Значения даты вводятся в поле. Мы оба загрузили сборщик данных из Интернета. Может быть, в этом есть какая-то разница. Но я Я получаю значения, если я только задаю тип текст. У меня нет проблем с этим, потому что я сделал Проверка Javascript и PHP для моих значений даты. –

+1

но сообщение помечено jquery ui datepicker ... :) – naveen

+0

да сообщение jquery ui datepicker..Actually я не знаю о ui и все .. У меня была та же проблема, поиск в Интернете нашел это сообщение. Но эта почта и моя проблема имеют некоторые общие проблемы. Я думал, что это поможет другим, если я поделюсь своим опытом. –

0

У меня была аналогичная проблема: Я хотел, чтобы мой DatePicker появляться, когда связь был щелкнут и не имеет поля (или, скорее, скрытого поля). (Моим вариантом было то, что дата в календаре должна была использоваться, чтобы найти диапазон дат до и включая этот выбор даты, поэтому мне не нужно фактическое значение даты, за исключением того, что нужно передать обработчик onSelect.)

Так это работает в Firefox:

<a ...>click for calendar: <input type="hidden" value="" /> </a> 

но не в Chrome. Замена с:

<input type="text" value="" style="display: none" /> 

также не удалось. Я закончил с этим:

<input type="text" value="" style="width: 0px; height: 0px; border: none; position: absolute; top: 0; left: 0" /> 

хотя я не горжусь этим!

0

Я потратил 3 часа, пытаясь понять эту проблему, и именно так я решил проблему.

используйте следующие строки в качестве своих библиотек.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 

и это Javascript используется для решения этой проблемы:

$(function() { 
    $("#date_of_birth_date").datepicker({ 
     maxDate: '+0', changeYear: true, yearRange: "-70:+0" 
    }); 
}); 

не забудьте удалить все предыдущие библиотеки и т.д.

Смежные вопросы