Free AS3 Date chooser/Date Picker Component updated to v4.4.10

CURRENT VERSION 4.4.10
V5 UNDER CONSTRUCTION

Update 4.4.10 : http://www.infogroupindia.com/blog/posts/639

date picker is updated to 4.4.10 checkout the above link

Hi all,

New Version of AS3 Date Chooser Released.

This movie requires Flash Player 11.3

you can customize lot more things in it,

Import Date Chooser class and event class

import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;

Customize calendar icon dynamically.

[Embed(source = "../asset/20x20_light_blue.png")]
     private var icon:Class;

Dynamic Date Chooser construction

var datePicker:DatePicker = new DatePicker();

Set calendar icon

datePicker.icon = new icon();

Set Week Start on Monday or Sunday

datePicker.WeekStart = "sunday";

Set Month Names

datePicker.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Set Date Format

datePicker.dateFormat = "D/M/Y"; //D,M,Y all combinations are valid

Set system font

datePicker.font = "Tahoma";

Set embed font

[Embed(source = "../asset/tahoma.ttf", fontWeight= "normal", fontFamily = "Tahoma")]
    protected static var Tahoma:Class;

[Embed(source = "../asset/tahomaBold.ttf",  fontWeight= "bold", fontFamily = "Tahoma")]
    protected static var TahomaBold:Class;

datePicker.embedFonts = true;

datePicker.font = "Tahoma";

Add Date Picker to stage

addChild(datePicker);

Date Picker Calendar Event

datePicker.addEventListener(CalendarEvent.CHANGE, getdate);
private function getdate(e:calendarEvent):void {
	trace("Date:" + e.selectedDate);
}

everything is dynamic you can simply change anything from code.

i’m behind the documentation of this open source project

stay tuned and enjoy

Google Project Page : HERE

Download Page : Downloads

Updated to 4.4.6

SWC 4.4.6 download:

DatePicker-v4.4.6.swc (93.1 KiB, 345 hits)

Changes

Leap year issue fixed.

About Nidin Vinayak

I am a software developer and my top skills are ActionScript 3.0, Adobe Flex, Adobe AIR , JavaScript and HTML5 development. At present i am working as Lead Software Engineer @ ISPG Technologies (I) Pvt Ltd, Cochin, India

AS3, Component, Date chooser, Date Picker, FLASH

This entry was posted on February 16, 2011, 6:27 pm and is filed under ActionScript 3, FLASH. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

#1 by NiDiN on February 17, 2011 - 7:50 am

You can create multiple instance of date picker also i updated date picker to v 4.2 http://code.google.com/p/as3-date-picker/
download new files check the example file
New Features
1) icon placement (left or right)
2) calendar placement (left or right)

what you mean by opaque Box, calendar box is already opaque!

Reply Quote

#2 by Cheyennemtnman on March 2, 2011 - 4:49 pm

I get these two errors when I try to change the date format on V4.3

Scene 1, Layer 'Status', Frame 1 1119: Access of possibly undefined property dateFormat through a reference with static type nid.ui.controls:DatePicker.

Scene 1, Layer 'Status', Frame 1 1119: Access of possibly undefined property prompt through a reference with static type nid.ui.controls:DatePicker.

I copied the new swc to the proper place in IDE components folder… I have the correct publish settings

What am I doing incorrectly?

#3 by infogroupadmin on March 4, 2011 - 9:14 am

date picker 4.4 released

check out http://code.google.com/p/as3-date-picker/
New feature : top and bottom calendar placement added

Thanks

#4 by Javier on March 4, 2011 - 7:55 pm

Hi I have two cuestions, in order to get to my needs I need to write the date (automatic day) is any way ? or what I need to change to put it my self ?

and Second Cuestion, how i can change the names of the days?

Greatings

#5 by infogroupadmin on March 5, 2011 - 10:11 am

@Javier :

you want to set the custom date when the date picker component loaded?

i added this functionality

syntax

datepicker.selectedDate = new Date(2010,1,1,0,0,0,0)

if you are talking about the changing "SMTWTFS", currently you cannot change the day name, i will add this soon

current version v 4.4.1

download http://code.google.com/p/as3-date-picker/download…
Thanks

#6 by Cheyennemtnman on March 9, 2011 - 7:02 pm

I get these two errors when I try to change the date format on V4.4.1

Scene 1, Layer â€˜Statusâ€™, Frame 1 1119: Access of possibly undefined property dateFormat through a reference with static type nid.ui.controls:DatePicker.

Scene 1, Layer â€˜Statusâ€™, Frame 1 1119: Access of possibly undefined property prompt through a reference with static type nid.ui.controls:DatePicker.

Am I missing something when I installed the last two new versions?

#7 by infogroupadmin on March 10, 2011 - 9:03 am

please send your fla to nidi...@gmail.com then i can debug the issue

Reply Quote
- #8 by Michael L on July 18, 2012 - 3:33 pm
  
  Hi, I get the same error and the new calendar icon i point to doesn’t show. I’m using 4.4.8.
  
  Thanks!
  
  Quote
- #9 by infogroupadmin on October 3, 2012 - 7:03 am
  
  Michael,
  delete old swc and use latest 4.4.10
  let me know the result
  
  Quote

#10 by mattwhituk on March 11, 2011 - 2:58 pm

Hi,

I am having some trouble with the calendarEvent.CHANGE event listener. My code is as follows:

import nid.events.calendarEvent;

import nid.ui.controls.dateChooser.DateChooser;

datePicker.addEventListener(calendarEvent.CHANGE, getdate);

private function getdate(e:calendarEvent):void {

trace("hello");

}

but that triggers to following error:

TypeError: Error #1034: Type Coercion failed: cannot convert nid.events::CalendarEvent@246e0401 to nid.events.calendarEvent.

at flash.events::EventDispatcher/dispatchEventFunction()

at flash.events::EventDispatcher/dispatchEvent()

at nid.ui.controls::DatePicker/MouseClick()

Any thoughts on why this might be would be very gratefully received.

#11 by infogroupadmin on March 11, 2011 - 3:07 pm

@mattwhituk

please change

import nid.events.CalendarEvent;

make "c" to upper case "C"

also use latest date chooser

download : http://as3-date-picker.googlecode.com/files/DateP…

#12 by Car on March 20, 2011 - 1:02 am

How can I make this component bigger in size dimensions on my Flash CS5 stage?

#13 by infogroupadmin on March 20, 2011 - 8:40 pm

@Car : currently, there is no shortcut to make this possible,but i will add this on next version ,now i am in the middle of my degree exams, will update at the end of April.

also you can manually alter this from the source code check out the svn source code @ google code
http://code.google.com/p/as3-date-picker/source/c…

#14 by cipri on April 5, 2011 - 12:28 am

hi, thanks!! the class was very useful to me

regards from Mexico

#15 by infogroupadmin on April 5, 2011 - 9:19 am

you are welcome.

Reply Quote

#16 by G-Man on April 5, 2011 - 9:36 pm

First of, great component. Excellent work.

How do you change the appearance of it?…background color, selected date, mouse over, current date, etc.

Thanks in advance

#17 by Javier on April 12, 2011 - 5:23 pm

Hi, thank you for all your work, Im going to colab with you adding 10 bucks for you thanks and keep the good work

#18 by infogroupadmin on April 13, 2011 - 3:24 pm

@Javier

Thanks for your support

#19 by Javier on April 13, 2011 - 10:49 pm

you welcome, plz add the code for changing â€œSMTWTFSâ€, that all that need to be complete.

#20 by Bobby Edge on April 20, 2011 - 10:05 pm

The documentation here is pretty sparse. I have to use the V3 for CS3. What are all of the property and methods for this component? I want to trigger the calendar onMouseDown on the component, but I do not see the method call to show the calendar.

#21 by Bobby Edge on April 21, 2011 - 1:21 am

Hey, I am still trying my best to get this to work. I cannot get an icon to show, and I cannot get the calendar to pop open by trapping the mouse click on the movie clip. Why doesn't Version 4 show the icon automatically the way Version 2 does? That was very convenient. I need the image to be read out of my library. I have a bitmap with the name icon_calendar.png in the library. How would I go about doing that?

#22 by infogroupadmin on April 21, 2011 - 9:57 am

you can use method "showHideCalendar" for toggle calendar

#23 by tim on May 3, 2011 - 4:21 pm

my "selectedDate" traces like this:

Wed May 18 17:18:17 GMT+0100 2011

What i'm doing wrong?

dateFormat = "M/D/Y"

Thanks.

#24 by infogroupadmin on May 4, 2011 - 11:24 am

Hi,
selectedDate is a date object like new Date();
and dateFormat = â€œM/D/Yâ€ is the format for display date in text field in the component
if you want the formated date get the string from text field
var dateString:String = dataPicker.dateField.text;

Reply Quote

#25 by s on May 5, 2011 - 7:47 pm

Is there a way to disable dates before today? so past dates cannot be selected.

#26 by infogroupadmin on May 6, 2011 - 2:27 am

No , currently there is no way to disable past days

I will add this feature soon

#27 by Javier on May 13, 2011 - 5:05 pm

Hi, Its me again, thank you for all your work again, I have one cuestion, how I can reset the component ?

#28 by infogroupadmin on May 14, 2011 - 4:43 am

Hi, I am not added method for reset the component

I will add it soon and release new version

Thanks for your valuable question

Reply Quote

#29 by Sebastian on June 21, 2011 - 10:09 am

Is there a way to get the latest source-files of this project?

Latest version to be find is 4.2…

great work!

#30 by Ed on June 23, 2011 - 10:59 am

Dude, thanks so much! this is great.

#31 by infogroupadmin on July 1, 2011 - 12:56 pm

Hi folks,

sorry for the delay

i was busy with my b-tech exams

for latest source code check svn
http://code.google.com/p/as3-date-picker/source/b…
you can check out using svn client

since i am adding new features, not yet created a source archive

stay tuned – enjoy!

#32 by YT on July 21, 2011 - 5:18 am

Thanks but think the directory is empty?

Reply Quote

#33 by bayu on July 18, 2011 - 1:08 pm

How to implement this in a Flash CS3 file? Is it as easy as using Flash AS3 component? I can't open it with Flash CS3. Sorry for the noob question…

#34 by infogroupadmin on September 27, 2011 - 2:22 pm

Hi buddy,
sorry for the delay, i was busy with my exams

check ConfigurationComponentsUser Interface folder in flash cs3 installation folder , i don't know the correct folder path i am not using cs3 for long period
if you found .swc files in that folder paste date picker component there (swc file)

hope this will help

Reply Quote

#35 by Blagoj Gicev on July 22, 2011 - 4:14 am

Hi Dude,

This is realy great. Can you read the text box and assign to a string variable in format yymmdd.

I have traced datePicker.selectedDate but it gives me a long string:

Sun Jul 17 22:11:32 GMT-0600 2011

I would like to have 072111 instead.

How can I do this?

Thank you

#36 by infogroupadmin on September 27, 2011 - 2:39 pm

Hi,

sorry for the delay

use this

var dataPicker:DataPicker = new DataPicker();

var value:String = dataPicker.dateField.text;

Reply Quote

#37 by Blagoj Gicev on July 23, 2011 - 12:54 am

Also the current selectedDate in textbox if I assign it to a string variable and after that try to trace that variable it gives me the previous chosen date.

For the first time it trace me "Select Date" but not the actual date from the text box

Thanks buddy

#38 by infogroupadmin on September 27, 2011 - 3:01 pm

selected date is a native as3 Date Class

if you want to get the date like 1/1/11

use this

var dataPicker:DataPicker = new DataPicker();

var value:String = dataPicker.dateField.text;

Reply Quote

#39 by Rajeev New Zealand on July 29, 2011 - 1:45 pm

Thank you so much for this datepicker, works great in all respects. God Bless you! Best wishes for your B.Tech exams.

Couple of questions: (I have very little knowledge of flash & as3)

how can I increase the font size of selected dates?

Is there a way that it should display only day, month & year only and should not display time when we display by trace.

#40 by infogroupadmin on September 27, 2011 - 3:00 pm

sorry for the delay

use this

var dataPicker:DataPicker = new DataPicker();

var value:String = dataPicker.dateField.text;

and for increase font size you need to edit variables of calendar skin

Reply Quote

#41 by Eric on October 1, 2011 - 8:51 pm

Anyway to enable/disable user access to it?

#42 by infogroupadmin on October 2, 2011 - 5:46 pm

Could you please explain the functionality which you want to implement?

Reply Quote
- #43 by Eric on October 8, 2011 - 9:22 pm
  
  DatePicker.enabled = false; //TextField is greyed out, clicking on the calendar does not pop up the calendar window, maybe also greyed out.
  
  Quote
- #44 by infogroupadmin on October 8, 2011 - 11:44 pm
  
  Ok. I will add this feature shortly
  
  Quote

#45 by Christian on October 4, 2011 - 6:09 am

Did you ever get around to implement the translation feature?

Since i want to have the days state MTOTFLS instead of MTWTFSS.

#46 by infogroupadmin on October 8, 2011 - 11:42 pm

Hi,
It's(this feature) already there

Reply Quote

#47 by Felix on November 16, 2011 - 1:10 pm

I am trying to use swc file in FD. I added DatePicker_v4.4.1 to the lib directory but I couldn't change the selectedDate in the code.

datePicker.selectedDate = new Date();

The error is "Could not set the property".

How to use component in FD?

Anyway, can you add year changing in the datepicker?

#48 by infogroupadmin on November 18, 2011 - 11:37 am

@Felix :

here is the demo source for FD http://www.infogroupindia.com/blog/download/1/
i will add year changing in version 5

#49 by josh jones on November 21, 2011 - 8:22 pm

Hello:

love the component, and it's working great… I implimented in a large project but now noticed I cannot null or reset the calendar.

I think being able to set 'selectedDate = null' would be a nice option as that is what traces when it's launched without a selected date.

This is something I could add to the code if it's available?

thanks

#50 by infogroupadmin on November 22, 2011 - 5:44 am

Hi

date picker updated to 4.4.2 you can download the swc files which have the reset feature by nullifying the property "selectedDate"

Thanks for your support

Reply Quote

#51 by Felix on November 24, 2011 - 11:27 am

Your demo works well, but the error is gone in a new version (4.4.3) %)

Thanks a lot!

#52 by Sebastian on December 14, 2011 - 7:02 pm

Congrats for your great work. In current version (4.4.2) it still doesn't work to change the date format, like:

dateChooser.dateFormat = "D.M.Y"

It was supposed to work in this version? (to use anything else than / as separator in D/M/Y)

Thank you!

#53 by infogroupadmin on December 15, 2011 - 12:59 am

@sebastian :

the above date format not yet implemented

you must use D/M/Y for now

i will add this soon

#54 by Marc on January 7, 2012 - 12:19 pm

Hi I'm French and i wan't to start my week on monday.

I try :

_datePicker = new DatePicker();

_datePicker.prompt = "Date";

_datePicker.embedFonts = true;

_datePicker.font = "DIN Regular";

_datePicker.days = new Array("LMMJVSD", "DLMMJVS");

_datePicker.months = new Array("Janvier", "Fevrier", "Mars", Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre");

_datePicker.WeekStart = "monday";

But it doesn't work, the week start allways at Sunday..

Please hhhelp !

#55 by infogroupadmin on January 7, 2012 - 1:12 pm

Hi Marc,

Thanks for you report.

that was a bug it is fixed

download fix – http://www.infogroupindia.com/blog/download/3/

Reply Quote
- #56 by Marc on January 7, 2012 - 2:02 pm
  
  Wow, what a reactivity !!
  
  you are great, it work
  
  thanks a lot !
  
  Quote

#57 by jin on February 2, 2012 - 5:43 pm

cómo puedo darle una fecha por defecto?

#58 by infogroupadmin on February 2, 2012 - 6:05 pm

Hi,
You can set default date by setting property "selectedDate"
example : dataPicker.selectedDate = new Date(2013,2,3,12,2,2,2);

Reply Quote

#59 by Nick on February 24, 2012 - 7:37 pm

Great component, thank you!

I am wondering how you enable February 29th. It is currently not selectable in 2012.

-Nick

#60 by infogroupadmin on March 8, 2012 - 10:12 am

sorry for the delay,
this issue is fixed
please download latest version 4.4.6
download : http://code.google.com/p/as3-date-picker/download…

Reply Quote

#61 by Dionicio on March 8, 2012 - 2:32 am

como insertar los valores en un text imput? ya he intentado de todo y nada.

#62 by infogroupadmin on March 8, 2012 - 10:18 am

Hi Dionicio,
you can set string value by property "prompt" and date object by "selectedDate"
example
var dataPicker:DatePicker = new DatePicker();
dataPicker.prompt = "enter date";
or
dataPicker.selectedDate = new Date();

i hope this will resolve your problem
Thanks

Reply Quote
- #63 by Dionicio on March 10, 2012 - 12:06 am
  
  con dataPicker.prompt = “enter date”; me muestra en la base de datos en el campo de fecha (enter date) y con dataPicker.selectedDate me mestra esto (Fri Mar 9 18:50:34 GMT-0500 2012), lo que necesito es 9/3/2012.
  
  este es un ejemplo del proyecto que tengo
  
  variables.userFecha=fecha.selectedDate;//datePicker
  
  variables.userBoleta=boleta_txt.text;//text input
  
  variables.userCliente=cliente.value;//combobox
  
  y en la base de datos los campos fecha, boleta y cliente.
  
  ¿alguna ayuda mas de la que me haz dado?
  
  Quote

#64 by infogroupadmin on March 10, 2012 - 4:47 am

Hi Dionicio,

you can generate the desired date string with selectedDate date object.

sample:

with(dataPicker)

{

trace(selectedDate.date + "/" + (selectedDate.month + 1) + "/" + selectedDate.fullYear);

//month is an integer from 0 (January) to 11 (December).

#65 by Dionicio on March 10, 2012 - 3:40 pm

muchas gracias por todo, pero al final no me sirve de nada el componente porque no puedo mostrar una fecha correcta en el campo fecha de la base de datos,con lo ultimo que me sugeriste no logré corregir nada, me sigue dando el mismo formato (Fri Mar 9 18:50:34 GMT-0500 2012), tendré que seguir utilizando el text input.

Reply Quote
- #66 by infogroupadmin on March 10, 2012 - 6:08 pm
  
  Tommrow I will give new build with this fix , stay tuned
  
  Quote

#67 by infogroupadmin on March 12, 2012 - 7:07 am

check out the new version of datepicker
http://www.infogroupindia.com/blog/posts/639
you can use getDateString() to get textfield value

#68 by Erwin on April 8, 2012 - 4:09 pm

Hi, nice work.
i have a question, i notieced that u dont have the day 29 on February 2012, can u improve that? every 4 years adn that

an other thing, im kind a noob on swc file, i dont get it work, or im missing something, u are updating that file, and i can only use the other old ones (*.as). can u give some ligth here ty!!

#69 by infogroupadmin on April 21, 2012 - 4:34 am

Hi Erwin,
date picker is updated to 4.4.7 and leap year issue already fixed but due to my CDN cashed old demo swf you are seeing old demo swf and i am extending date picker to “UIComponent” so direct use of as code may throw errors. if you are using Flash IDE copy “DatePicker.swc” to
C:\Documents and Settings\(REPLACE USER NAME)\Local Settings\Application Data\Adobe\Flash CS5\en_US\Configuration\Components\

Close Flash IDE if already open
Open Flash IDE and check the Standard Componenets in Componenets Panel

drag and drop date picker in to stage

enjoy

Reply Quote

#70 by Gunjan on April 19, 2012 - 8:30 pm

Thanks a ton for the component. It’s a great help. Highly appericiated.

#71 by Carey R. on June 5, 2012 - 3:30 pm

How come none of the .set features work? I cannot set any attributes of the instance.

// add start date picker
start_date_picker = new DatePicker();
exam_assign_clip.addChild(start_date_picker);
start_date_picker.x = 54;
start_date_picker.y = 166;
start_date_picker.embedFonts = true;
start_date_picker.font = “Arial”;
start_date_picker.dateFormat = “M/D/Y”;
//start_date_picker.setEnabledCellColor(0×333333);
//start_date_picker.setDesabledCellColor(0xdddddd);
start_date_picker.setBackgroundStrokeColor = 0xFF0000;

Help please…

#72 by infogroupadmin on June 5, 2012 - 3:34 pm

Hi Carey,
please set all values before adding to stage
like this
start_date_picker = new DatePicker();
start_date_picker.x = 54;
start_date_picker.y = 166;
start_date_picker.embedFonts = true;
start_date_picker.font = “Arial”;
start_date_picker.dateFormat = “M/D/Y”;
//start_date_picker.setEnabledCellColor(0×333333);
//start_date_picker.setDesabledCellColor(0xdddddd);
start_date_picker.setBackgroundStrokeColor = 0xFF0000;
exam_assign_clip.addChild(start_date_picker);

Reply Quote

#73 by Alex on October 2, 2012 - 4:57 pm

Realy great and usefull, man! Please, tell me, how can I always keep Calendar in open position without clicking to icon? In other words how I can always keep Calendar in visible=true?

#74 by infogroupadmin on October 3, 2012 - 6:59 am

Hi Alex,
I just added this feature and updated to 4.4.10 (http://www.infogroupindia.com/blog/posts/639)
use property dataPicker.alwaysShowCalendar = true; after date picker added to stage
Thanks for your support

Reply Quote
- #75 by Alex on October 3, 2012 - 1:37 pm
  
  Thank you, man! But unfortunately, the calendar is staying after I remove it parent container( Text input for date was removed, but calendar still there. How can I remove it?
  
  Quote
- #76 by infogroupadmin on October 3, 2012 - 4:10 pm
  
  Ohh.. Sorry.
  that was my mistake
  i just fixed it
  use alwaysShowCalendar = false
  checkout v 4.4.10 revision 1
  
  Quote

Free AS3 Date chooser/Date Picker Component updated to v4.4.10

About Nidin Vinayak

Meta

My Resume & Cover Letter

Like Me on FB