Показать средство выбора даты пользовательского интерфейса JQuery при нажатии на поле ввода?

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

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

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


focus datepicker jquery jquery-ui jquery-ui-datepicker
person alexg    schedule 23.05.2012    source источник
comment
Мне очень нравится кнопка, ее вполне нормально использовать, на самом деле я бы сказал, что это плохое решение не использовать ее.   -  person NimChimpsky    schedule 23.05.2012
comment
Обычно я соглашусь с тобой. Смотрите мой комментарий ниже ответа Рохана Бюхнера о том, почему я не хочу кнопку.   -  person alexg    schedule 23.05.2012

Ответы (3)


arrow_upward
19
arrow_downward

Попробуй это

<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>
person Rajan Rawal    schedule 23.05.2012
comment
Спасибо, я думаю, открытие средства выбора даты при запуске имеет смысл и решает половину проблемы. Это не решает проблему повторного открытия средства выбора даты, щелкнув поле после нажатия клавиши Esc, но мне лучше заняться устранением реальных ошибок, а не играть с тривиальными проблемами :) - person alexg; 23.05.2012
comment
@RajanRawal: Спасибо, приятель, за ответы, последние 3 дня я бился головой. - person React Developer; 08.06.2015
comment
@Ashley Я не знаю, что именно вы используете, но рассмотрите возможность использования средства выбора даты Bootstrap сейчас и убедитесь, что оно не конфликтует с jquery ui datepicker. - person Rajan Rawal; 17.07.2015

arrow_upward
2
arrow_downward

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

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

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

$('#field').datepicker({
      showOn: 'button',
      buttonImage: "/image_path/image.png",
 }).next('img.ui-datepicker-trigger').attr('tabIndex', "-1");
person Rohan Büchner    schedule 23.05.2012
comment
Спасибо умно. На самом деле причина, по которой я не хочу, чтобы кнопка была согласованной. В моем приложении также есть jqGrid со столбцами даты, где кнопка будет выглядеть некрасиво и занимать драгоценную ширину экрана, поэтому я хочу, чтобы мои поля даты вне сетки были похожи на поля внутри сетки. Тем не менее, я поддерживаю ваш ответ. - person alexg; 23.05.2012

arrow_upward
1
arrow_downward

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

$(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');
            });
        });
    });

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

person Alexandre    schedule 19.08.2015