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

priyankmaniar — Mon, 17 Jan 2022 09:50:09 +0000

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);
}

WooCommerce Custom Fields – A Weblog of Priyank Maniar

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