Jump to content
  • 0

Календарь jQuery


SurPaul
 Share

Question


<script type="text/javascript">
$(function(){
$('#datepicker').datepicker({
function(dateText, inst) {
// Ошибка выше... Хрому на нравится символ "(" перед function... Вроде всё правильно...
if(dateText=="01/01/2012")
style.backgroundImage='url(C:\Documents and Settings\Admin\Рабочий стол\jQuery\ui-bg_flat_50_5c5c5c_40x100.png)';
});
});
</script>

Скажите пожалуйста, что не так??

Первый скрипт работает (делал на его основе можно сказать, так как я javascript знаю очень плохо)


<script type="text/javascript">
$(function(){
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
if(dateText=="01/01/2012")
alert("Happy New Year!");
}
});
});
</script>

Link to comment
Share on other sites

22 answers to this question

Recommended Posts

  • 0

Ну а с чего же он работать-то будет? :)

Во-первых, функция function(dateText, inst) у вас не закрыта (отсутствует закрывающая фигурная скобка }). Во-вторых, в работающем примере можно заметить, что эта функция вызывается при событии onSelect. В итоге, нужный вам код будет выглядеть примерно так:


$(function(){
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
if(dateText=="01/01/2012")
$('.ui-datepicker-inline').css("backgroundImage", "url(pic.jpg)");
}
});
});

В этом случае изменится фон блока календаря, при условии, что файл pic.jpg лежит в одном каталоге со страницей, на которой выполняется скрипт. Ну или, при желании, путь можно поменять. И, кстати, да — никогда не указывайте абсолютные пути к файлам, если тестируете что-то локально в Windows. Пользуйтесь в таких случаях относительными путями (./, ../ и так далее).

Link to comment
Share on other sites

  • 0

В смысле, вам нужно, чтобы у календаря уже сразу был другой фон? Тогда JavaScript тут не нужен. В таблице стилей пропишите:

.ui-datepicker-inline{background: url(pic.jpg) no-repeat top left !important;}

А от инициализации календаря, в таком случае, останется следующее:


$(function(){
$('#datepicker').datepicker();
});

Link to comment
Share on other sites

  • 0

В смысле, вам нужно, чтобы у календаря уже сразу был другой фон? Тогда JavaScript тут не нужен. В таблице стилей пропишите:

.ui-datepicker-inline{background: url(pic.jpg) no-repeat top left !important;}

А от инициализации календаря, в таком случае, останется следующее:


$(function(){
$('#datepicker').datepicker();
});

мне не нужно чтобы везде фон менялся, только 1 января

Link to comment
Share on other sites

  • 0

Я не профессионал в области JavaScript'а, но упорно работаю над этим, и пока что смог придумать вот такую нехитрую схему.

Для начала немного поясню. После инициализации #datepicker в переменную current_date получаем текущую дату из календаря.

В переменную our_date нужно записать дату, при наступлении которой должно наступить событие, в нашем случае — смена фона.

После этого необходимо сравнить текущую дату и ту, что нужна нам. Предварительно обе даты нужно привести к одному формату, что и реализуется функцией toGMTString(). И, наконец, если даты совпали — меняем фон календаря.

$(function(){
$('#datepicker').datepicker({inline: true});
var current_date = $('#datepicker').datepicker('getDate');
var our_date = new Date("January 01, 2012");
if(current_date.toGMTString() == our_date.toGMTString()) $('.ui-datepicker-inline').css("backgroundImage", "url(pic.jpg)");
});

Edited by hypnocolor
Link to comment
Share on other sites

  • 0

Я не профессионал в области JavaScript'а, но упорно работаю над этим, и пока что смог придумать вот такую нехитрую схему.

Для начала немного поясню. После инициализации #datepicker в переменную current_date получаем текущую дату из календаря.

В переменную our_date нужно записать дату, при наступлении которой должно наступить событие, в нашем случае — смена фона.

После этого необходимо сравнить текущую дату и ту, что нужна нам. Предварительно обе даты нужно привести к одному формату, что и реализуется функцией toGMTString(). И, наконец, если даты совпали — меняем фон календаря.

$(function(){
$('#datepicker').datepicker({inline: true});
var current_date = $('#datepicker').datepicker('getDate');
var our_date = new Date("January 01, 2012");
if(current_date.toGMTString() == our_date.toGMTString()) $('.ui-datepicker-inline').css("backgroundImage", "url(pic.jpg)");
});

вообще работать должно, но почему-то всё равно не работает... консоль пустая... пробовал даже так

if(current_date.toGMTString() == our_date.toGMTString()) $('.ui-datepicker-inline').style.backgroungImage='url(pic.png)';

Link to comment
Share on other sites

  • 0

Нет, мой вариант рабочий. Я даже перепроверил только что :) Возможно, что-то перепутали с датой или путём к картинке. Попробуйте поставить в our_date сегодняшнюю дату и всё ещё раз перепроверить:

var our_date = new Date("April 05, 2012");

Link to comment
Share on other sites

  • 0

Нет, мой вариант рабочий. Я даже перепроверил только что :) Возможно, что-то перепутали с датой или путём к картинке. Попробуйте поставить в our_date сегодняшнюю дату и всё ещё раз перепроверить:

var our_date = new Date("April 05, 2012");

я тоже 200 раз перепроверил, всё правильно, работать не хочет :(

Link to comment
Share on other sites

  • 0

SurPaul, запакуйте все используемые файлы в архив и кидайте на файлообменник, а потом ссылку сюда. Посмотрю вживую :) Или ваш пример есть где-нибудь на хостинге?

Link to comment
Share on other sites

  • 0

SurPaul, ну вот сейчас у вас в скрипте прописано 6 апреля. Поменял у себя на компьютере дату на 6-е, обновил страницу — вуаля, добавилась фоновая картинка (серый прямоугольник). Проверил в последнем Хроме, Файрфоксе и Опере. Может, у вас с браузером что-то неладное? :)

Link to comment
Share on other sites

  • 0

SurPaul, ну вот сейчас у вас в скрипте прописано 6 апреля. Поменял у себя на компьютере дату на 6-е, обновил страницу — вуаля, добавилась фоновая картинка (серый прямоугольник). Проверил в последнем Хроме, Файрфоксе и Опере. Может, у вас с браузером что-то неладное? :)

браузер FireFox 11, дату поменял, ещё лучше стало:

9cdb943a80b8b6061196556013cf63a3.jpg

теперь я понял что он будет менять фон только если указана сегодняшняя дата, и то фон не тот меняет.

я хочу сделать так чтобы он менял фон ячейки 1 января 2012 года, даже если сегодня 15 июля 2061 года :D

Link to comment
Share on other sites

  • 0

А вот почему вы сразу не сказали, что вам нужно изменить фон ячейки? Я-то думал, что вам нужно задать определенную дату (новый год, например), и если на дворе 1 января, то у всего календаря должен измениться фон. А вам, оказывается, нужно, чтобы у конкретной ячейки можно было задать отдельный фон.. К сожалению, насколько я помню, такой возможности в datepicker'е нет.

Link to comment
Share on other sites

  • 0

А вот почему вы сразу не сказали, что вам нужно изменить фон ячейки? Я-то думал, что вам нужно задать определенную дату (новый год, например), и если на дворе 1 января, то у всего календаря должен измениться фон. А вам, оказывается, нужно, чтобы у конкретной ячейки можно было задать отдельный фон.. К сожалению, насколько я помню, такой возможности в datepicker'е нет.

а по-моему есть... попробуйте выбрать 1 января 2012 на моём сайте

Edited by SurPaul
Link to comment
Share on other sites

  • 0

SurPaul, ну и? Ячейка выделяется, как и все остальные. Алерт выскакивает, потому что срабатывает событие onSelect с указанной заранее датой. А вам-то нужно, чтобы ячейка с 1 января была постоянно выделена, вне зависимости от остальных дней. Или нет? :)

Link to comment
Share on other sites

  • 0

SurPaul, ну и? Ячейка выделяется, как и все остальные. Алерт выскакивает, потому что срабатывает событие onSelect с указанной заранее датой. А вам-то нужно, чтобы ячейка с 1 января была постоянно выделена, вне зависимости от остальных дней. Или нет? :)

да. именно так я и хочу сделать. я про то что если уж алерт работает, и фон поменять тоже можно будет...

Link to comment
Share on other sites

  • 0

SurPaul, нет, это не взаимосвязано :) По-моему, я даже помню статью на хабре, где описывался Datepicker и тот факт, что конкретные дни в нём нельзя выделить среди остальных, только текущий (который выделяется по умолчанию) и, вроде как, выходные (при определенной настройке).

Edited by hypnocolor
Link to comment
Share on other sites

  • 0

SurPaul, нет, это не взаимосвязано :) По-моему, я даже помню статью на хабре, где описывался Вatepicker и тот факт, что конкретные дни в нём нельзя выделить среди остальных, только текущий (который выделяется по умолчанию) и, вроде как, выходные (при определенной настройке).

ну почему же алерт работает?? вроде одно и тоже практически

Link to comment
Share on other sites

  • 0

SurPaul, алерт работает, потому что в функции, которая отвечает за то, чтобы он вылетел, прописано условие — если дата ячейки, на которую кликнули, совпадает с заранее прописанной — отображаем алерт. То есть дата этой ячейки становится известна только по щелчку на ней. А возможность заранее, без щелчка выделить ячейку с определенной датой просто не реализовали в этом календаре.

Edited by hypnocolor
Link to comment
Share on other sites

  • 0

SurPaul, алерт работает, потому что в функции, которая отвечает за то, чтобы он вылетел, прописано условие — если дата ячейки, на которую кликнули, совпадает с заранее прописанной — отображаем алерт. То есть дата этой ячейки становится известна только по щелчку на ней. А возможность заранее, без щелчка выделить ячейку с определенной датой просто не реализовали в этом календаре.

жаль. а onload не поможет? :(

Edited by SurPaul
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy