it-swarm.com.ru

Показать JQuery UI datepicker в поле ввода нажмите?

ОК, может быть, это тривиальная проблема, но мне очень интересно посмотреть, есть ли у кого-нибудь какие-либо идеи по этому поводу:

Я использую JQuery UI. У меня есть поле <input id="#myfield" type="text">, и я звоню $('#myfield').datepicker(). DatePicker показывает всякий раз, когда поле получает фокус. Но поле является первым в моей форме и уже находится в фокусе, когда оно загружается, поэтому нажатие на поле не показывает его. Кроме того, если я закрою средство выбора даты клавишей Esc, то не смогу открыть его снова, щелкнув поле, по той же причине: оно уже в фокусе.

Я знаю, что могу установить параметр .datepicker({showOn: 'button'}), но мне не нужна кнопка. Можно ли каким-либо образом отобразить средство выбора даты, когда поле получает фокус OR, когда щелчок уже находится в фокусе? Я уже попробовал $('#myfield').click( function () { $(this).focus() } ), и он позволяет правильно открывать средство выбора даты, когда я щелкаю поле ввода, но затем, когда я выбираю дату, оно не появляется в поле.

8
alexg

Попробуй это

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#date1').datepicker();

$('#date1').focus(function(){
    $('#date1').datepicker('show');
});

$('#date1').click(function(){
    $('#date1').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#date1').datepicker('show');
});
</script>
</head>
<body>
<input type="text" name="date1" id='date1'>
</body>
</html>
17
Rajan Rawal

Эта проблема не ответит на ваш вопрос, но может быть обходным путем, если ваша проблема отсутствия кнопки выбора даты связана с наличием кнопки выбора даты ... если это имеет смысл?

У меня была проблема, из-за которой я не хотел иметь кнопку из-за того, что пользователи просматривали мою форму/страницу, и я не хотел, чтобы кнопка имела фокус. (Странный пользовательский интерфейс)

Если это также ваш случай ... вы всегда можете просто убрать его фокус, выполнив следующее ... (Это также косвенно решит проблему, с которой вы столкнулись сейчас).

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
2
Rohan Büchner

У меня был похожий сценарий: первое поле на странице должно загружаться закрыто, без кнопки, и открываться только по клику пользователя. Но это было в закрытом компоненте 'searchbar', поэтому изменение поведения по умолчанию не было возможным. Вот мой обходной путь:

$(document).ready(function () {
        //getting the controls on the form context
        var calendarios = $('.calendarBox', "#frmOccurrencesHistory");
        //set an invalid option - avoid open on focus and show the buttons
        calendarios.datepicker("option", "showOn", "click");
        //handle click button
        calendarios.each(function () {
            $(this).click(function () {
                $(this).datepicker('show');
            });
        });
    });

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

1
Alexandre
 $("#datepicker").datepicker({
   dateFormat:'dd/M/yy',
   minDate: 'now',
   changeMonth:true,
   changeYear:true,
   showOn: "focus",
   //buttonImage: "YourImage",
   buttonImageOnly: true, 
   yearRange: "-100:+0",  
}); 

  $( "datepicker" ).datepicker( "option", "disabled", true );
0
Girish