Hijri Date Support for Dynamic CRM 365 Forms using JavaScript

• Download source code - 2 KB

Introduction

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.

Background

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.

   

2. Add Customer entity to your solution:

   

3. Add the customer form and open it.

   

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

   

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

   

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

   

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

   

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.

   

   JavaScript

   function onGregorianDateFieldChange(gregorianDateFieldName, HijriDateFieldName) {
   
       if (Xrm.Page.getAttribute(gregorianDateFieldName).getValue() != null) {
   
           var dateGregValue = 
               Xrm.Page.getAttribute(gregorianDateFieldName).getValue();
           var year = dateGregValue.getFullYear();
           var month = dateGregValue.getMonth();
           var day = dateGregValue.getDate();
   
           Xrm.Page.getAttribute(HijriDateFieldName).setValue
                                (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.

   

   JavaScript

   function onHijriDateFieldChange(HijriDateFieldName, gregorianDateFieldName ) {
   
       if (Xrm.Page.getAttribute(HijriDateFieldName).getValue() != null) {
   
           if (isValidHijriDate(Xrm.Page.getAttribute
              (HijriDateFieldName).getValue())) {
   
               var dateHijriValue = Xrm.Page.getAttribute
                                    (HijriDateFieldName).getValue();
   
               // 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);
   
               Xrm.Page.getAttribute(gregorianDateFieldName).setValue(gregDate);
           }
       }
   }

10. Save and publish.

Validations

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.

References

• https://www.al-habib.info/islamic-calendar/hijricalendartext.htm

History

• 11^th October, 2022: Version 1.0