My next step in developing apps for FB platform was to create a simple input form. And among other things I required a date-picker. Nothing fancy, you can get them on almost any step. But they need to provide some JS date control so that user cannot post 31. January.

At first everything looked simple. FBML has editor tag that supports:

• fb:editor-date
• fb:editor-month
• fb:editor-time

There is no date-time component but OK I'll combine (or so I thought).

fb:editor-date

Lets take a look at fb:editor-date first. It creates two drop down list boxes that let a user select a date. Nice! But wait. WTF?! You can only use one date selector per page. And it can generate illegal date combinations such as February 31. So this is pretty much useless!

fb:editor-month

Creates a form selector element displaying the month. In other words - you get the select box with all months listed in it. I think it is pretty useless because you can quickly and simply generate select server side with PHP. But OK.

fb:editor-time

Creates a series of form selector elements showing the time in hours and minutes, and an AM/PM indicator. Minutes are listed in 5min steps. And the time value entered is rounded to the nearest 15 minutes as it is said in wiki but I didn't test. Again useless! What should I do because we use 24h format? And to generate two select fields of numbers is trivial in any programming language. So WHY is this even in FBML?

Why oh why didn't they make a proper date(time) picker as a FBML element. Date picker should already be a FB functionality as it is a part of events application that is vital part of Facebook. This is what I am looking for but FB is unable (unwilling) to provide:


OK. I 'm a bit disappointed but I'll work around it. As so many times before I'll look for a nice freely available date picker copy&paste it and voila ...


... and a few minutes later. Well guess what :) Since some JS can harm visitors Facebook doesn't allow JavaScript. They invented their own JavaScript-like language called FBJS. It doesn't differ much from original. But there are enogh differences that you have to rewrite your JS code if you want to get it working on FB.

Since FB Platform is relatively new there is a lack of "translated" scripts. And I was really getting pissed off searching for a solution. Instead of creative working it seemed I'll have to rewrite simple functionalities that I consider basic and expect from platform to offer. Well then after a lost hour of my life I found a good-enough solution. It lacks date verifing feature in drop down select boxes. I'll still have to do something about that but at least datepicker is working!

This is the forum post that I've found source code on.

Thanks to Johnson for giving us a starting point and to all those who have posted their findings and work-arounds to the various FBJS pitfalls. Big thanks to S10sys for producing and sharing their code for a working fbjs date picker.

You can download JS code here.

UPDATE !!! Check out my PHP class to create FBML calendar. Try it out here!!!

I recommend that you generate years, months and days server side with PHP. And please change source of the calendar picture. Download it here:

<script src="http://foo.com/datePicker.js"></script>
<style type="text/css">
.fb_calendar_container { 
    border: 1px solid #646464; 
    padding: 4px; 
    background-color: #ffffff; 
    font-family: tahoma,verdana,helvetica; 
    font-size: 11px; text-align: center; 
    color: #000000; width: 180px; 
    left: 0px; 
    position: absolute; 
}
.fb_calendar_container table { 
    font-family: tahoma,verdana,helvetica; 
    font-size: 11px; text-align: center; }
.fb_calendar_header { 
    height: 20px; 
    width: 100%; 
}
.fb_calendar_body { 
    margin: auto; 
    overflow: hidden; 
    height: 139px; 
    position: relative; 
    width: 170px; 
}
.fb_calendar_day_diff_month { 
    padding: 0px 2px; 
    cursor: pointer; 
    height: 17px; 
    text-align: right; 
    width: 18px; 
    color: #666666; 
}
.fb_calendar_day { 
    padding: 0px 2px; 
    cursor: pointer; 
    height: 17px; 
    text-align: right; 
    width: 18px; 
}
.fb_calendar_day_hover { 
    padding: 0px 2px; 
    cursor: pointer; 
    height: 17px; 
    text-align: right; 
    width: 18px; 
    background-color: #dddddd; 
}
.fb_calendar_title { 
    font-weight: bold; 
    white-space: nowrap;
}
.fb_calendar_lrgicons { 
    font-size: 14px; 
}
</style>


<div id="divCalender" class="fb_calendar_container" 
style="left: 100px; top: 10px; display: none;">
    <div style="display: none;" id="BaseDate"></div>
    <div class="fb_calendar_header">
        <div class="fb_calendar_title">
            <span class="fb_calendar_lrgicons" style="cursor: pointer; 
            margin-right: 8px;" id="prevYear">«
            </span>
            <span class="fb_calendar_lrgicons" 
            style="cursor: pointer; margin-right: 8px;" 
            id="prevMonth">‹</span>
            <span id="CanlendarTitle" style="margin-left: 6px; 
            margin-right: 6px"></span>
            <span class="fb_calendar_lrgicons" style="cursor: pointer; 
            margin-left: 8px;" id="nextMonth">›</span>
            <span class="fb_calendar_lrgicons" style="cursor: pointer; 
            margin-left: 8px;" id="nextYear">»</span>
        </div>
    </div>
    <div class="fb_calendar_body">
        <table cellpadding="0" cellspacing="0" border="0" 
        style="margin: auto; width: 100%; height: 100%;">
            <tr>
                <td><div>Su</div></td>
                <td><div>Mo</div></td>

                <td><div>Tu</div></td>
                <td><div>We</div></td>
                <td><div>Th</div></td>
                <td><div>Fr</div></td>
                <td><div>Sa</div></td>
            </tr>

            <tr>
                <td><div id="day_1" class="fb_calendar_day">27</div></td>
                <td><div id="day_2" class="fb_calendar_day">28</div></td>
                <td><div id="day_3" class="fb_calendar_day">29</div></td>
                <td><div id="day_4" class="fb_calendar_day">30</div></td>
                <td><div id="day_5" class="fb_calendar_day">1</div></td>

                <td><div id="day_6" class="fb_calendar_day">2</div></td>
                <td><div id="day_7" class="fb_calendar_day">3</div></td>
            </tr>
            <tr>
                <td><div id="day_8" class="fb_calendar_day">4</div></td>
                <td><div id="day_9" class="fb_calendar_day">5</div></td>
                <td><div id="day_10" class="fb_calendar_day">6</div></td>

                <td><div id="day_11" class="fb_calendar_day">7</div></td>
                <td><div id="day_12" class="fb_calendar_day">8</div></td>
                <td><div id="day_13" class="fb_calendar_day">9</div></td>
                <td><div id="day_14" class="fb_calendar_day">10</div></td>
            </tr>
            <tr>
                <td><div id="day_15" class="fb_calendar_day">11</div></td>

                <td><div id="day_16" class="fb_calendar_day">12</div></td>
                <td><div id="day_17" class="fb_calendar_day">13</div></td>
                <td><div id="day_18" class="fb_calendar_day">14</div></td>
                <td><div id="day_19" class="fb_calendar_day">15</div></td>
                <td><div id="day_20" class="fb_calendar_day">16</div></td>
                <td><div id="day_21" class="fb_calendar_day">17</div></td>

            </tr>
            <tr>
                <td><div id="day_22" class="fb_calendar_day">18</div></td>
                <td><div id="day_23" class="fb_calendar_day">19</div></td>
                <td><div id="day_24" class="fb_calendar_day">20</div></td>
                <td><div id="day_25" class="fb_calendar_day">21</div></td>
                <td><div id="day_26" class="fb_calendar_day">22</div></td>

                <td><div id="day_27" class="fb_calendar_day">23</div></td>
                <td><div id="day_28" class="fb_calendar_day">24</div></td>
            </tr>
            <tr>
                <td><div id="day_29" class="fb_calendar_day">25</div></td>
                <td><div id="day_30" class="fb_calendar_day">26</div></td>
                <td><div id="day_31" class="fb_calendar_day">27</div></td>

                <td><div id="day_32" class="fb_calendar_day">28</div></td>
                <td><div id="day_33" class="fb_calendar_day">29</div></td>
                <td><div id="day_34" class="fb_calendar_day">30</div></td>
                <td><div id="day_35" class="fb_calendar_day">31</div></td>
            </tr>
            <tr>
                <td><div id="day_36" class="fb_calendar_day">1</div></td>

                <td><div id="day_37" class="fb_calendar_day">2</div></td>
                <td><div id="day_38" class="fb_calendar_day">3</div></td>
                <td><div id="day_39" class="fb_calendar_day">4</div></td>
                <td><div id="day_40" class="fb_calendar_day">5</div></td>
                <td><div id="day_41" class="fb_calendar_day">6</div></td>
                <td><div id="day_42" class="fb_calendar_day">7</div></td>

            </tr>
            
        </table>
    </div>
    <div>
        <div style="text-align: center;" id="TodayTitle">Today: </div>
    </div>
</div>

<div style="height: 300px;">
<select name="dobDay" id="dobDay" class="dayselect" >
    <option value="1">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>
<select name="dobMonth" id="dobMonth" class="monthselect">
    <option value="1">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>
<select name="dobYear" id="dobYear" class="yearselect">
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <!-- generate this serverside using PHP !!! -->
</select>
<img src="http://202.134.127.67:8865/images/calendar1.gif" 
onclick="var Cal = startCal(true); Cal.show(this,'dob'); 
return true;" id="StartDate" style="cursor: pointer;" />
</span>
</div>

November 04, 2009     

Big thanks to the following people

It would have been nice if you'd mentioned the guys who created this ;) I'll do it for you:- "Thanks to Johnson for giving us a starting point and to all those who have posted their findings and work-arounds to the various FBJS pitfalls. Big thanks to S10sys for producing and sharing their code for a working fbjs date picker."
Facebook Developement Team | 86.157.236.227

November 04, 2009     

thanks

Hey :) There's a link to the forum post. I guess it is not good enough. I'll add thanks notice since I want people to know that this is not my code. Thank you for bringing this to my attention!
Miha | 193.77.156.218

February 16, 2010     

how to get time value?

How to get the value chosen by the user to be inserted in db? thank you in advance
Shaimaa | 41.130.23.153

April 20, 2010     

...

Hi i need fbml calender that does not show privous dates.need help
sharif | 116.71.72.162