Nano Hash - криптовалюты, майнинг, программирование

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

Я внедрил JQuery UI Datepicker, но у меня есть две проблемы с функциональностью. Код реализации ниже

<script type="text/javascript">
    $(document).ready(function(){
        $(".datepicker").datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true,
            yearRange: '-100y:c+nn'
        });
    });
</script>

1-я проблема: на стандартной странице это работает нормально, хотя календарь теряет фокус при выборе дня. Поскольку я из Великобритании и сосредотачиваюсь на британских пользователях, наше обычное форматирование даты начинается с дня-> затем выберите месяц-> затем выберите год. Что касается удобства использования, похоже, что большинство пользователей, которых я тестировал в начале, вводили день, когда исчезает средство выбора даты. Есть ли простой способ отформатировать пользовательский интерфейс, чтобы потерять фокус при нажатии на год?

Еще одна проблема, с которой я сталкиваюсь, - это объединение пользовательского интерфейса с модальным загрузчиком. Кажется, существует конфликт, мешающий правильному функционированию выпадающих меню месяца и года. Я попытался изменить z-индекс css выбора даты с небольшим успехом.

javascript jquery twitter-bootstrap jquery-ui jquery-ui-datepicker
06.12.2013

  • Во избежание лучшего использования бутстрапового средства выбора даты 06.12.2013
  • Вероятно, следующий путь, который я выберу, раньше использовал JQuery UI, поэтому это был мой первый выбор, спасибо :) 06.12.2013

Ответы:


1

Если вы уже используете jquery-ui для выбора даты, почему бы не использовать его и для модального диалога? Это может немного упростить вашу сборку, если вы используете только один набор библиотек.

Вы можете отобразить средство выбора даты «встроенное», встроенное в модальное окно, а не в оверлей, а затем использовать параметр altField для заполнения поля вашей формы.

Что-то вроде этого:

Рабочий пример

<form>Date:
    <input class="date"></input>
    <div id="dialog-message" title="Pick A Date">
        <div class="datepicker"></div>
    </div>
</form>

$('.date').click(function () {
    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        yearRange: '-100y:c+nn',
        altField: ".date"
    });
    $("#dialog-message").dialog({
        modal: true,
        resizable: false,
        width: 340,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});
06.12.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..