Календарь с функцией выбора даты на ActionScript 3.0

Часто так бывает, что ты долго и упорно проводишь время в поисках какого-то решения. Но поиски безрезультатны. И, рано или поздно, ты отказываешься от продолжения поиска, отступаешь ... сдаёшься. Проходит несколько дней или недель и ... ты совершенно случайно находишь простое и готовое решение проблемы, которая ещё недавно казалась неразрешимой. С вами такое часто бывает? А вот со мной подобная беда случается с завидной регулярностью...

Так, например, не так и давно я посвятил немало времени поиску компонента-календаря на ActionScript 3.0. Но нужен был не простой календарь (например, как класс Calendar из поста Простой календарь на ActionScript 3.0), а календарь, который бы возвращал выбранную пользователем дату в удобном для меня формате. И вот сегодня, совершенно случайно, такой компонент попал мне в руки. Это компонент DatePicker, распространяемый в виде SWC-библиотеки.

Внешне компонент DatePicker выглядит следующим образом:

По-моему скромному мнению, такой календарик не только функционален, но и весьма симпатично выглядит. Впрочем, имеется у данного компонента и возможность настроить внешний вид.

Как же можно использовать данный компонент в наших флеш-проектах?

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

Скаченный SWC помещаем в папку с нашим будущим флеш-проектом и идём в панель Свойств нашего любимого Adobe Flash (в моём случае это будет Adobe Flash 5.5). В панели Свойств нас интересует одна единственная кнопка, которая на следующем скриншоте выделена красной рамкой:

Edit ActionScript settings

Жмём указанную кнопку и открывается окно с настройками. В этом окне нас интересует одна-единственная вкладка и кнопка на ней. Кнопка выделена красной рамкой:

Browse to SWC file

Жмём эту кнопку и выбираем ранее загруженный нами SWC-файл. Так мы указали программе путь до SWC-библиотеки с компонентом-календарём. Но это ещё не всё...

Нам ещё надо подготовить иконку для нашего будущего календаря. Для этого нам потребуется обычная растровая иконка размером 16 X 16 px или чуть крупнее (это уже дело вашего личного вкуса). Я выбрал такую иконку:

Иконка для календаря

Загружаем иконку в библиотеку нашего флеш-проекта, а после этого идём в контекстное меню иконки - Свойства - и указываем для нашей иконки класс CalendarIcon (обратите внимание, что класс CalendarIcon расширяет класс BitmapData).

Всё. Подготовительный этап закончен. Переходим к коду.

Код ActionScript 3.0:

/* импорт классов */ import nid.ui.controls.DatePicker; import nid.events.CalendarEvent; import flash.display.Bitmap; /* создаём новый календарь */ var datePicker:DatePicker = new DatePicker(); /* создаём иконку для календаря клик мышкой по иконке будет вызывать календарь */ datePicker.icon = new Bitmap(new CalendarIcon()); /* указываем нашему календарю, что неделя начинается с понедельника, а не с воскресенья (как это принято в некоторых варварских странах) */ datePicker.WeekStart = "monday"; /* добавляем календарь на сцену флеш-ролика */ addChild(datePicker); /* позиционируем календарь на сцене флеш-ролика */ datePicker.x = 100; datePicker.y = 100; /* а теперь отслеживаем, какую дату в календаре выбирает пользователь флеш-приложения */ datePicker.addEventListener(CalendarEvent.CHANGE, getDate); function getDate(event:CalendarEvent):void { trace("Пользователь выбрал следующую дату: " + event.selectedDate); }

Как видите, ничего сложного.

Возвращаемую календарём дату можно легко привести к нужному вам виду. Например, так...

Код ActionScript 3.0:

import nid.ui.controls.DatePicker; import nid.events.CalendarEvent; import flash.display.Bitmap; var datePicker:DatePicker = new DatePicker(); datePicker.icon = new Bitmap(new CalendarIcon()); datePicker.WeekStart = "monday"; addChild(datePicker); datePicker.x = 100; datePicker.y = 100; datePicker.addEventListener(CalendarEvent.CHANGE, getDate); function getDate(event:CalendarEvent):void { trace("Пользователь выбрал следующую дату: " + event.selectedDate); var date:Date = new Date(event.selectedDate); trace("Год: " + date.getFullYear()); trace("Месяц: " + (date.getMonth() + 1)); trace("День: " + date.getDate()); }

Ну, а если у вас что-то не получается, то вот вам обещанный ранее исходник - скачать исходник (под Adobe Flash CS 5.5).

Автор: admin

Дата добавления: 2012-06-06

Просмотров: 2875

Рейтинг поста: +12-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-25
Елена, всё работает. Просто вы не на те кнопки смотрите :-)

datePicker.setButtonColor = 0xFFC9E0;

- это изменение цвета кнопок, с помощью которых выбирается месяц (!).
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2014-12-25
С выводом в текстовое пое разобралась..
А вот цвет кнопочек не меняется..((
..что-то не так ...
/*
импорт классов
*/
import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;
import flash.display.Bitmap;
/*
создаём новый календарь
*/
var datePicker:DatePicker = new DatePicker();

datePicker.setButtonColor = 0xFFC9E0;
/*
создаём иконку для календаря
клик мышкой по иконке будет вызывать календарь
*/
datePicker.icon = new Bitmap(new CalendarIcon());
/*
указываем нашему календарю, что неделя начинается с понедельника, а не с воскресенья (как это принято в некоторых варварских странах)
*/
datePicker.WeekStart = "monday";
/*
добавляем календарь на сцену флеш-ролика
*/
addChild(datePicker);
/*
позиционируем календарь на сцене флеш-ролика
*/
datePicker.x = 100;
datePicker.y = 100;
/*
а теперь отслеживаем, какую дату в календаре выбирает пользователь флеш-приложения
*/
datePicker.addEventListener(CalendarEvent.CHANGE, getDate);
function getDate(event:CalendarEvent):void {
//trace("Я выбралА следующую дату: " + event.selectedDate);
date_txt.text=("Я выбралА дату: " + event.selectedDate);
}
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2014-12-24
>Не понял
Попытась пояснить..В коде после позиционирования.

ОТСЛЕЖИВАНИЕ ВЫВЕСТИ В ТЕКСТОВОЕ ПОЛЕ
БЕЗ trace...
как в DateFormat мы делали..))

/*
импорт классов
*/
import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;
import flash.display.Bitmap;
/*
создаём новый календарь
*/
var datePicker:DatePicker = new DatePicker();
/*
создаём иконку для календаря
клик мышкой по иконке будет вызывать календарь
*/
datePicker.icon = new Bitmap(new CalendarIcon());
/*
указываем нашему календарю, что неделя начинается с понедельника, а не с воскресенья (как это принято в некоторых варварских странах)
*/
datePicker.WeekStart = "monday";
/*
добавляем календарь на сцену флеш-ролика
*/
addChild(datePicker);
/*
позиционируем календарь на сцене флеш-ролика
*/
datePicker.x = 100;
datePicker.y = 100;
//===========================
/*
а теперь отслеживаем, какую дату в календаре выбирает пользователь флеш-приложения
*/
datePicker.addEventListener(CalendarEvent.CHANGE, getDate);
function getDate(event:CalendarEvent):void {
trace("Пользователь выбрал следующую дату: " + event.selectedDate);
}
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-24
> Функцию выбора даты(без времени) хочу вывести в текстовое поле. Может подключить класс DateFormat?

Не понял :(
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-24
В DatePicker доступно много настроек, но только автор, как я понял, не стал их объяснять. Если есть время, то можете попробовать поэкспериментировать с настройками. Просто напечатайте "datePicker" и поставьте точку. И появится подсказка с перечислением доступных свойств и методов:



По названию свойств и методов можно догадаться, за что они отвечают. А после двоеточия указан тип данных, которые принимает данное свойство. Например, на картинке видно, что DatePicker имеет свойство setButtonColor. Логично предположить, что свойство setButtonColor отвечает за цвет кнопки (set button color). Кроме этого, видно, что свойство setButtonColor принимает значения типа int (целые числа). Логично предположить, что это цвет в 16-ричной системе счисления. Пробуем применить наши логические изыскания:


datePicker.setButtonColor = 0xff0000;


И, действительно, кнопки перекрасились в красный цвет (0xff0000 - это код красного цвета).

Думаю, логика примерно понятна.
Комментатор
Комментарий добавил(а): Яповчанка
Дата добавления: 2014-12-24
Здравствуйте))
Календарик выглядит очень симпатично!!!
Получилось сделать...Со второго раза:-)))
Из ваших слов следует,что есть возможность настроить внешний вид.
В,принципе,и так можно оставить..Но если есть возможность,почему бы не поэксперементировать..

Вопрос,где настроить?
Будь это класс, я бы,в параметрах искала...а вот SWC файл,увы..
И можно ли на русском месяц и дни недели?
И еще..

Функцию выбора даты(без времени) хочу вывести в текстовое поле.
Может подключить класс DateFormat?
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика