de-vraag
  • Вопросы
  • Метки
  • Пользователи
Оповещения
Вознаграждения
Регистрация
После регистрации, сможете получать уведомления об ответах и комментариях на Ваши вопросы.
Вход
Если у Вас уже есть аккаунт, войдите чтобы проверить новые уведомления.
Тут будут вознаграждения за добавленные вопросы, ответы и комментарий.
Дополнительно
Источник
Редактировать
 axidos
axidos
Вопрос

Как гиперссылка выбранных дат в пользовательском интерфейсе jQuery Datepicker?

Может ли кто-нибудь помочь в решении этой задачи? Я не гуру javascript и немного застрял. Я использую jQuery Datepicker UI для создания календаря событий.

Я хочу связать выбранные даты (имена событий) с соответствующим событием (отдельная страница или якорь). Вот сценарий, который я использую, чтобы указать мои события:

$(function() {
   //format: specialDays.year.month.day
    var specialDays = {
        '2011': { 
                '10': { 
                        '1': {content: "Event numer 1", className: "museumevent"},
                        '2': {content: "Event numer 2", className: "museumevent"},
                        '3': {content: "Event numer 3", className: "museumevent"},
                        '4': {content: "Event numer 4", className: "museumevent"},
                        '5': {content: "Event numer 5", className: "museumevent"},
                        '6': {content: "Event numer 6", className: "museumevent"},
                        '7': {content: "Event numer 7", className: "museumevent"},
                        '8': {content: "Event numer 8", className: "museumevent"},
                        '9': {content: "Event numer 9", className: "museumevent"},
                        '10': {content: "Event numer 10", className: "museumevent"},
                        '11': {content: "Event numer 11", className: "museumevent"},
                        '12': {content: "Event numer 12", className: "museumevent"},
                        '13': {content: "Event numer 13", className: "museumevent"},
                        '25': {content: "Event numer 14", className: "museumevent"},
                        '26': {content: "Event numer 15", className: "museumevent"},
                        '27': {content: "Event numer 16", className: "museumevent"},
                        '28': {content: "Event numer 17", className: "museumevent"} }

                }
    }; 

    $('#datepicker').datepicker({beforeShowDay: function(date) {
        var d = date.getDate(),
            m = date.getMonth()+1,
            y = date.getFullYear();

        if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
            var s = specialDays[y][m][d];
            return [true, s.className, s.content];//selectable

        }
        return [false,''];//non-selectable


    }});
});

Вот этот jsFiddle .

Основная цель - создать пользовательские подсказки для выбранных дат (Избранные события) и сделать эти даты кликабельными .

Заранее спасибо!

1 2011-10-27T19:04:30+00:00 2
 axidos
axidos
Редактировал вопрос 27-го октября 2011 в 7:10
Программирование
jquery
datepicker
jquery-ui-datepicker
Sinetheta
27-го октября 2011 в 7:36
2011-10-27T19:36:46+00:00
Дополнительно
Источник
Редактировать
#56791790

If you're already using the jQuery UI then I would advise using their modals for your "popup". I have also added some functionality for individualised popups (requested in comment) with a fallback "defauilt".jsFIddle

Default popup

Popup for event1

Popup for event1

...

var specialDays = {
    '2011': {
        '10': {
            '1': {
                content: "Event numer 1",
                className: "museumevent",
                popupID: "popup1"
            }

...

onSelect: function(dateText, inst){
        var d = parseInt(dateText.split("/")[1], 10),
            m = parseInt(dateText.split("/")[0], 10),
            y = parseInt(dateText.split("/")[2], 10);

    if ( specialDays[y][m][d].hasOwnProperty("popupID") ) {
        var s = specialDays[y][m][d];
        $('#' + s.popupID).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }else{
    $('#popup').find('.date').text(dateText).end()
        .dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }
}

ДЛЯ СОЗДАНИЯ ДОПОЛНИТЕЛЬНОЙ ЗАПРОСНОЙ ФУНКЦИОНАЛЬНОСТИ

1
0
Chris Biscardi
27-го октября 2011 в 7:15
2011-10-27T19:15:23+00:00
Дополнительно
Источник
Редактировать
#56791789
 $('#datepicker').datepicker({
    beforeShowDay: function(date) {},
    onSelect: function(dateText, inst){}
  });

Вы можете найти необходимые события в Документации:

http://docs.jquery.com/UI/Datepicker#event-onSelect

также, вот функция для ваших всплывающих подсказок:

http://docs.jquery.com/UI/Datepicker#event-beforeShowDay

0
0
Похожие сообщества 2
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
2 952 пользователей
Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Библиотека верстальщика: @weblibrary Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @bigmarketolog Автор: @M_Boroda
Открыть telegram
jQuery — русскоговорящее общество
jQuery — русскоговорящее общество
498 пользователей
Общаемся на темы, посвященные jQuery, jQuery-плагинам и фреймворкам. Хедхантинг разрешён. Полезные чаты: @javascript_jobs
Открыть telegram
Добавить вопрос
Категории
Все
Технологий
Культура / Отдых
Жизнь / Искусство
Наука
Профессии
Бизнес
Пользователи
Все
Новые
Популярные
1
Roxana Elizabeth CASTILLO Avalos
Зарегистрирован 4 дня назад
2
Hideo Nakagawa
Зарегистрирован 5 дней назад
3
Sergiy Tytarenko
Зарегистрирован 1 неделю назад
4
shoxrux azadov
Зарегистрирован 1 неделю назад
5
Koreets Koreytsev
Зарегистрирован 1 неделю назад
© de-vraag 2022
Источник
stackoverflow.com
под лицензией cc by-sa 3.0 с атрибуцией