Skip to main content
UncategorizedThird Party ScriptsWooCommerce Custom Fields

Change the default datepicker to native date field | WooCommerce CodeCanyon Custom Fields

By January 17, 2022No Comments

The default Datepicker that comes with the script is archaic. Replacing it with the native datepicker is quite easy. The following is the solution I used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// assets/js/general.js

    /**
     * Set up datetime picker
     */

    function set_up_datetimepicker(element, type) {

        // Select config
        if (type === 'date') {
            var config = wccf_datetimepicker_date_config.x;
        } else if (type === 'time') {
            var config = wccf_datetimepicker_time_config.x;
        } else {
            var config = wccf_datetimepicker_datetime_config.x;
        }

        // Set z-index
        if (typeof config.style !== 'undefined') {
            config.style += ' z-index: 999999999;';
        } else {
            config.style = 'z-index: 999999999';
        }

        // custom added

        // Initialize datepicker
        // element.datetimepicker(config);
        // custom added
        config.mask = 'dd/mm/yy';

        if (type === 'date') {
            element.attr('type', 'date');
        } else if (type === 'time') {
            element.attr('type', 'time');
        } else {
            element.attr('type', 'datetime');
        }

        // Set locale
        // jQuery.datetimepicker.setLocale(wccf_datetimepicker_locale.x);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// classes/wccf-fb.class.php

        /**
         * Validate date field value
         *
         * Throws exception if validation fails
         *
         * @access public
         * @param string $value
         * @return bool
         */

        public static function validate_date($value)
        {


            // custom added
            // exported format is j/n/y by WCCF_Settings::get_date_format()
            // $value is in the format of yyyy-mm-dd

            if (empty($value)) {
                throw new Exception(__('is blank', 'rp_wccf'));
            }

            $value = date('j/n/y', strtotime($value));

            // Value must be date
            if ( ! RightPress_Help::is_date($value, WCCF_Settings::get_date_format())) {
                throw new Exception(__('must be a valid date', 'rp_wccf'));
            }

            return true;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// classes/fields/fields/wccf-fields.class.php

        /**
         * Convert date/time value between ISO and settings formats
         *
         * @access public
         * @param string $operation
         * @param string $value
         * @return string
         */

        public function convert_datetime_value_between_formats($operation, $value)
        {

            // custom added
            $value = date('j/n/y', strtotime($value));

            // Get date formats
            if ($this->field_type_is('date')) {
                $settings_format = WCCF_Settings::get_date_format();
                $iso_format = RightPress_Help::get_iso_date_format();
            } // Get time formats
            else if ($this->field_type_is('time')) {
                $settings_format = WCCF_Settings::get_time_format();
                $iso_format = RightPress_Help::get_iso_time_format();
            } // Get datetime formats
            else {
                $settings_format = WCCF_Settings::get_datetime_format();
                $iso_format = RightPress_Help::get_iso_datetime_format();
            }

            // Get correct format order
            $from_format = ($operation === 'from_iso') ? $iso_format : $settings_format;
            $to_format = ($operation === 'from_iso') ? $settings_format : $iso_format;

            // Convert value
            return RightPress_Help::convert_date_from_format_to_format($value, $from_format, $to_format);
        }