ADF Hijri Calendar

There is alot of ADF Developers searching for the Hijri Calendar 

I will show you how to  add the hijri calendar using JQuery Libraries

Actually the example is developed by My Brother Muhammed Faried, I only add small work to use the calendar on any input text which name ends with "date"

I'm working on making some work on converting between Hijri And Gregorian and i will publish the updates in a new post

I used JDev 12.1.3.0.0 for developing this complete example

1-  put the JQuery files in a folder in the view project  ex: JQuery

2- put the CSS file in a folder in the view project  ex: css

3- in the page make reference to jquery files,your javascript file, and css file   ex: 

<af:resource type="javascript" source="/JQuery/jquery-1.10.2.min.js"/>

<af:resource type="css" source="/css/jquery.calendars.picker.css"/>

4- function to select with id or class or with suffix 

// you should name any input text you want to put hijri calendar in with suffix "date"

function DatePick() {
         
                  $("input[name$='date']").calendarsPicker($.extend(
            { calendar: $.calendars.instance('ummalqura', 'ar') },
                $.calendarsPicker.regionalOptions['en']));

}


5- you can change the format of the date in the  file called "jquery.calendars.ummalqura-ar.js"

for example
dateFormat: 'dd/mm/yyyy', // See format options on BaseCalendar.formatDate

or

dateFormat: 'yyyy/mm/dd', // See format options on BaseCalendar.formatDate

6- Make a page template that holds all Jquery files

 <af:resource type="javascript" source="/JavaScript/page1Class.js" />
        <af:resource type="javascript" source="/JQuery/jquery-1.10.2.js"/>
        <af:resource type="javascript" source="/JQuery/jquery-1.10.2.min.js"/>
       
        <af:resource type="javascript" source="/JQuery/jquery.plugin.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.picker.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.picker-ar.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.plus.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.ummalqura.min.js"/>
        <af:resource type="javascript" source="/JQuery/jquery.calendars.ummalqura-ar.js"/>
        <af:resource type="css" source="/JQuery/jquery.calendars.picker.css"/>
        <af:resource type="css" source="/CSS/myStyle.css"/>

7-  create a page and an input text then add A client listener to the input text you want it to display the calendar

 <af:clientListener method="DatePick" type="mouseDown"/>

8- Here is the Application Source   Hijri Calendar Application



The next post will be about converting between Greg and Hijri Dates