Click here to Skip to main content
15,614,943 members
Articles / Programming Languages / Javascript
Posted 11 Oct 2022


5 bookmarked

Hijri Date Support for Dynamic CRM 365 Forms using JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
11 Oct 2022CPOL3 min read
Allowing Hijri and Gregorian date fields to work together on your Dynamic CRM form and updating them simultaneously according to the user entry.
This article will guide you through a step-by-step explanation of how you can add a Gregorian date field and Hijri field to your Dynamic CRM form and let the user fill the date in one of them and reflect the equivalent value to the other and versa.


I have created this solution since I have a requirement to allow the CRM users to use two types of calendars (Hijri and Gregorian) simultaneously.
In other words, They want to give their users the flexibility to add a Gregorian date or the Hijri date, as many of their users are more familiar with the Hijri date. Whichever they populate or modify should update the other date. So, You can add a Hijri date field while still using the Gregorian date.

Unfortunately, there are no out of the box ways to support two types of calendars in Microsoft Dynamic CRM. Therefore, you can consider this as a workaround to fulfill these requirements.

Please note that this is a pure JavaScript solution. Therefore, it can work with all Dynamic CRM versions from 4.0 to 365. whether cloud or On-premise versions. as well as any dynamic CRM Forms like Main and Quick add forms.

Image 1


It would help if you had a basic understanding of Microsoft dynamic CRM form customization and JavaScript.
Please note that This is not a fancy-looking Hijri calendar widget; it is just a text box. .
The script calculates approximate Hijri dates based on the given gregorian date. It is based on an arithmetical calculation to match the dates. The calculation is based on the lunar cycle where the length of the lunar months is defined as either 29 or 30 days. Every two or three years an extra day is added at the end of the year to keep up with the phase of the moon. This formula is matching to "Umm Al-Qura" Hijri Calendar.

Using the Code

Let us go through a scenario to allow the CRM users to enter the customer's date of birth in Gregorian or Hijri dates as they like. And then, both dates were updated accordingly.

  1. Create a new unmanaged solution, select Settings, then Solutions.

    Image 2

  2. Add Customer entity to your solution:

    Image 3

  3. Add the customer form and open it.

    Image 4

  4. Create a new field for Gregorian date of Birth with "Date only" type.

    Image 5

  5. Create a new fields for Hijri date of birth with "Single Line of text" type.

    Image 6

  6. Add the new fields to the customer form under Customer Name.

    Image 7

  7. Download the attached JavaScript file and add it to the form property libraries as a JavaScript Web Resource.

    Image 8

  8. Add an onchange event handler for the Gregorian date of Birth field. And pass two parameters to the JavaScript function. The first parameter is the name of the Gregorian date field and the second parameter is the related Hijri date field.

    Image 9

    function onGregorianDateFieldChange(gregorianDateFieldName, HijriDateFieldName) {
        if (Xrm.Page.getAttribute(gregorianDateFieldName).getValue() != null) {
            var dateGregValue = 
            var year = dateGregValue.getFullYear();
            var month = dateGregValue.getMonth();
            var day = dateGregValue.getDate();
                                 (convertToHijri(day, month, year));
  9. Add an onchange event handler for the Hijri date of Birth field. And pass two parameters to the JavaScript function. The first parameter is the name of the Hijri date field and the second parameter is the related Gregorian date field.

    Image 10

    function onHijriDateFieldChange(HijriDateFieldName, gregorianDateFieldName ) {
        if (Xrm.Page.getAttribute(HijriDateFieldName).getValue() != null) {
            if (isValidHijriDate(Xrm.Page.getAttribute
               (HijriDateFieldName).getValue())) {
                var dateHijriValue = Xrm.Page.getAttribute
                // Parse the date parts to integers
                var parts = dateHijriValue.split("/");
                var day = parseInt(parts[0], 10);
                var month = parseInt(parts[1], 10);
                var year = parseInt(parts[2], 10);
                var strGregDate = convertToGreg(day, month, year);
                var gregDate = new Date(strGregDate);
  10. Save and publish.


Since I have defined the Hijri field as text because there is no way to define it as a date, I have applied multiple checks to make sure the user enters the correct date format, and the valid numbers as below:

// Validates that the input string is a valid date formatted as "dd/MM/yyyy"
function isValidHijriDate(dateString) {

    // Parse the date parts to integers
    var parts = dateString.split("/");
    if (parts.length != 3) {
        OpenAlert("OK", "Enter date in dd/MM/yyyy format ONLY", 
                  "Date Format Notification");
        return false;

    var day = parts[0];
    var month = parts[1];
    var year = parts[2];

    // Check the range of the day
    if (!isPositiveInteger(day) || day <= 0 || day > 30) {
        OpenAlert("OK", "Hijri Days should be between 1 and 30", 
                  "Date Format Notification");
        return false;

    // Check the ranges of months
    if (!isPositiveInteger(month) || month <= 0 || month > 12) {
        OpenAlert("OK", "Hijri months should be between 1 and 12", 
                  "Date Format Notification");
        return false;

    // Check the ranges of month and year
    if (!isPositiveInteger(year) || year < 1000 || year > 3000) {
        OpenAlert("OK", "Allowed Hijri years between 1000 and 3000");
        return false;

    return true;

Points of Interest

  • As you see in the above scenario, there is no need to touch or update the JavaScript web resources because if we pass the field's name as a parameter, it will work like plug and play. Also other benefits of this are in case of multiple date fields, you do not need to create new JavaScript functions.
  • You can use this code with any HTML page; You need only to pass the dates fields as parameters.




  • 11th October, 2022: Version 1.0


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Saudi Arabia Saudi Arabia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionWhat is the IDE you used Pin
Mekki Ahmedi 202212-Oct-22 19:24
Mekki Ahmedi 202212-Oct-22 19:24 
AnswerRe: What is the IDE you used Pin
Yahya Mohammed Ammouri12-Oct-22 22:08
Yahya Mohammed Ammouri12-Oct-22 22:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.