Persian calendar (Solar Hijri)

Quform WordPress v2 DocumentationGuidesCustomizationPersian calendar (Solar Hijri)

Persian calendar (Solar Hijri)

The Date element in Quform does not support the Persian Solar Hijri calendar but using a script you can attach a calendar/datepicker to a Text element.

Step 1

Add a Text element to the form, in the Settings on the Styles tab you can set a calendar icon on the field if you wish.

Step 2

Visit this page and click the Download now button to download the package.

Extract the downloaded zip file, and upload these files from the package to the wp-content directory on your server.

  • css/jquery.calendars.picker.css
  • js/jquery.calendars.min.js
  • js/jquery.calendars.plus.min.js
  • js/jquery.calendars.persian.min.js
  • js/jquery.calendars.persian-fa.js
  • js/jquery.plugin.min.js
  • js/jquery.calendars.picker.min.js
  • js/jquery.calendars.picker-fa.js

Step 3

Add the following code to the theme functions.php file (or create a plugin for it).

1
2
3
4
5
6
7
8
9
10

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('jquery-calendars-picker', content_url('jquery.calendars.picker.css'));
    wp_enqueue_script('jquery-calendars', content_url('jquery.calendars.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-plus', content_url('jquery.calendars.plus.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian', content_url('jquery.calendars.persian.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian-fa', content_url('jquery.calendars.persian-fa.js'), array(), false, true);
    wp_enqueue_script('jquery-plugin', content_url('jquery.plugin.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker', content_url('jquery.calendars.picker.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker-fa', content_url('jquery.calendars.picker-fa.js'), array(), false, true);
});
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('jquery-calendars-picker', content_url('jquery.calendars.picker.css'));
    wp_enqueue_script('jquery-calendars', content_url('jquery.calendars.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-plus', content_url('jquery.calendars.plus.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian', content_url('jquery.calendars.persian.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian-fa', content_url('jquery.calendars.persian-fa.js'), array(), false, true);
    wp_enqueue_script('jquery-plugin', content_url('jquery.plugin.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker', content_url('jquery.calendars.picker.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker-fa', content_url('jquery.calendars.picker-fa.js'), array(), false, true);
});
1
2
3
4
5
6
7
8
9
10
11
12

function my_enqueue_scripts()
{
    wp_enqueue_style('jquery-calendars-picker', content_url('jquery.calendars.picker.css'));
    wp_enqueue_script('jquery-calendars', content_url('jquery.calendars.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-plus', content_url('jquery.calendars.plus.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian', content_url('jquery.calendars.persian.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian-fa', content_url('jquery.calendars.persian-fa.js'), array(), false, true);
    wp_enqueue_script('jquery-plugin', content_url('jquery.plugin.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker', content_url('jquery.calendars.picker.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker-fa', content_url('jquery.calendars.picker-fa.js'), array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts()
{
    wp_enqueue_style('jquery-calendars-picker', content_url('jquery.calendars.picker.css'));
    wp_enqueue_script('jquery-calendars', content_url('jquery.calendars.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-plus', content_url('jquery.calendars.plus.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian', content_url('jquery.calendars.persian.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-persian-fa', content_url('jquery.calendars.persian-fa.js'), array(), false, true);
    wp_enqueue_script('jquery-plugin', content_url('jquery.plugin.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker', content_url('jquery.calendars.picker.min.js'), array(), false, true);
    wp_enqueue_script('jquery-calendars-picker-fa', content_url('jquery.calendars.picker-fa.js'), array(), false, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Step 4

Go to Forms → Settings → Custom CSS & JS and in the Custom JavaScript field enter the following code.

1
2
34
5
6
7

jQuery(function ($) {
    if ($.fn.calendarsPicker) {
        $('.quform-field-1_3').calendarsPicker({            calendar: $.calendars.instance('persian', 'fa')
        });
    }
});
jQuery(function ($) {
    if ($.fn.calendarsPicker) {
        $('.quform-field-1_3').calendarsPicker({
            calendar: $.calendars.instance('persian', 'fa')
        });
    }
});
  • On line 3, replace 1_3 with the Text element unique ID
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy