Problem with dates input in module with atomick theme

I everyone, i have a problem in the following web site
http://80.88.84.51/plesk-site-preview/toscana-holiday.it/https/80.88.84.51/resources/libeccio

in the form i have insert input field for date check-in and date check-out, but datapicker js function seam not work.

somebody have solutions about?
Enrico

The datepicker javascript asset is not being loaded. In the browser dev console:

Uncaught TypeError: $(…).datepicker is not a function

so! is a bug ?
how can fix it?

anyway in developing mode it works,

Enrico

There will be an CMS asset or feature that loads the Datepicker script. I don’t know which that is without doing some research.

You will then need to either write some code to ‘require’ the asset or feature, or trick it into loading by adding something else to the page that already pulls in that asset or feature .

There are many forum threads about assets and features if you search back.

Can i change the code of form in same place ? because isn’t no more necessary datapikker with html5 , is sufficient change the type of input from text to date.

Enrico

With v9, $form->date() will use a browser native HTML5 date input control.

Not with base form and atomik theme, you suggest me change form plugin, or theme?
Which plugin or theme is it definitely working with?

Enrico

Personally I don’t use that feature of the core Express forms package. Anything more complex than a simple contact form I use my Form Reform addon.

In Express forms all inputs are attributes. For a different input, or to fix that input, you will need to either modify the attribute with an override in /application or to create your own attribute to substitute.

I ran into the same issue here - if you are signed in as an admin the necessary css / js is loaded.

You can include jquery-ui in your css / js if you are bundling it yourself. For the site we were working on the following worked:

in the scss for the theme:

@import "path/to/node_modules/jquery-ui/themes/base/base.css";
@import "path/to/node_modules/jquery-ui/themes/base/datepicker.css";
@import "path/to/node_modules/jquery-ui/themes/base/theme.css";

in the js for the theme:

import 'jquery-ui/ui/widgets/datepicker';

Hopefully this helps point you in the right direction - otherwise, including the jquery-ui assets using another method should resolve the issue.

ok i can add this in resurces.css

this in main.js?

Thank you in advance
Enrico

other way that work perfectly
look here ; https://www.toscana-holiday.it/en/resources/libeccio

just edit: /concrete/src/form/Service/Widget/DateTime.php

in this way: edit type file form “text” to “date”, and take away javascript datapicker function
`

<?php namespace Concrete\Core\Form\Service\Widget; use Concrete\Core\Http\ResponseAssetGroup; use Concrete\Core\Support\Facade\Application; use DateTime as PHPDateTime; use Exception; class DateTime { /** * Takes a "field" and grabs all the corresponding disparate fields from $_POST and translates into a timestamp. * If $field has both date and time, the resulting value will be converted from the user timezone to the system timezone. * If $field has only date and not time, no timezone conversion will occur. * * @param string $field The name of the field to translate * @param array $arr The array containing the value. If null (default) we'll use $_POST * @param bool $asDateTime Set to true to get a DateTime object, false (default) for a string representation * * @return \DateTime|string|null In case of success returns the timestamp (in the format 'Y-m-d H:i:s' or 'Y-m-d' if $asDateTime is false) or the DateTime instance (if $asDateTime is true); if the date/time was not received we'll return null (if $field value is empty) */ public function translate($field, $arr = null, $asDateTime = false) { $app = Application::getFacadeApplication(); $dh = $app->make('helper/date'); /* @var \Concrete\Core\Localization\Service\Date $dh */ if ($arr === null) { $arr = $_POST; } // Example of $field: akID[5][value] if (preg_match('/^([^\[\]]+)\[([^\[\]]+)(?:\]\[([^\[\]]+))*\]$/', $field, $matches)) { // Example: $matches === ['akID[5][test]', 'akID', '5', 'value'] array_shift($matches); while (isset($matches[1]) && is_array($arr)) { $key = array_shift($matches); $arr = isset($arr[$key]) ? $arr[$key] : null; } $field = $matches[0]; } $datetime = null; if (is_array($arr)) { $systemTimezone = $dh->getTimezone('system'); if (isset($arr[$field . '_dt'])) { $value = $arr[$field . '_dt']; if (is_string($value) && trim($value) !== '') { $h = isset($arr[$field . '_h']) ? (int) $arr[$field . '_h'] : 0; $m = isset($arr[$field . '_m']) ? (int) $arr[$field . '_m'] : 0; $s = isset($arr[$field . '_s']) ? (int) $arr[$field . '_s'] : 0; if (isset($arr[$field . '_a'])) { if ($arr[$field . '_a'] === 'AM' && $h === 12) { $h = 0; } elseif ($arr[$field . '_a'] === 'PM' && $h < 12) { $h += 12; } } $value .= ' ' . substr("0$h", -2) . ':' . substr("0$m", -2) . ':' . substr("0$s", -2); try { $datetime = new PHPDateTime($value, $dh->getTimezone('user')); } catch (Exception $foo) { } $datetime->setTimezone($systemTimezone); } } elseif (isset($arr[$field])) { $value = $arr[$field]; if (is_string($value) && trim($value) !== '') { try { $datetime = new PHPDateTime($value, $systemTimezone); } catch (Exception $foo) { } } } } if ($datetime === null || $asDateTime) { $result = $datetime; } else { $result = $datetime->format('Y-m-d H:i:s'); } return $result; } /** * Creates form fields and JavaScript calendar includes for a particular item (date/time string representations will be converted from the user system-zone to the time-zone). * * @param string $field The field prefix (will be used as $field parameter in the translate method) * @param \DateTime|string $value The initial value * @param bool $includeActivation Set to true to include a checkbox to enable/disable the date/time fields * @param bool $calendarAutoStart Set to false to avoid initializing the Javascript calendar * @param string $classes A list of space-separated classes to add to the ui-datepicker-div container * @param int $timeResolution The time resolution in seconds (60 means we won't ask seconds) * @param array $datePickerOptions datepicker properties, see jquery-ui datepicker docs * * @return string */ public function datetime($field, $value = null, $includeActivation = false, $calendarAutoStart = true, $classes = null, $timeResolution = 60, array $datePickerOptions = []) { $app = Application::getFacadeApplication(); $dh = $app->make('helper/date'); /* @var \Concrete\Core\Localization\Service\Date $dh */ $timeResolution = (int) $timeResolution; if ($timeResolution < 1) { $timeResolution = 60; } // Calculate the field names if (substr($field, -1) === ']') { $prefix = substr($field, 0, -1); $fieldActivate = $prefix . '_activate]'; $fieldDate = $prefix . '_dt]'; $fieldHours = $prefix . '_h]'; $fieldMinutes = $prefix . '_m]'; $fieldSeconds = $prefix . '_s]'; $fieldAMPM = $prefix . '_a]'; } else { $checkPostField = $field; $checkPostData = $_POST; $fieldActivate = $field . '_activate'; $fieldDate = $field . '_dt'; $fieldHours = $field . '_h'; $fieldMinutes = $field . '_m'; $fieldSeconds = $field . '_s'; $fieldAMPM = $field . '_a'; } $id = trim(preg_replace('/[^0-9A-Za-z-]+/', '_', $field), '_'); // Set the initial date/time value $dateTime = null; $requestValue = $this->translate($field, null, true); if ($requestValue !== null) { $dateTime = $requestValue; $dateTime->setTimezone($dh->getTimezone('user')); } else { if ($value) { if ($value instanceof PHPDateTime) { $dateTime = clone $value; $dateTime->setTimezone($dh->getTimezone('user')); } else { try { $dateTime = $dh->toDateTime($value, 'user', 'system'); } catch (Exception $x) { } } } } // Determine the date/time parts $timeFormat = $dh->getTimeFormat(); if ($dateTime === null) { $now = new PHPDateTime('now', $dh->getTimezone('user')); $timeHour = (int) $now->format('G'); $timeMinute = (int) $now->format('i'); $timeSecond = (int) $now->format('s'); } else { $timeHour = (int) $dateTime->format('G'); $timeMinute = (int) $dateTime->format('i'); $timeSecond = (int) $dateTime->format('s'); } if ($timeFormat === 12) { $timeAMPM = ($timeHour < 12) ? 'AM' : 'PM'; $timeHour = ($timeHour % 12); if ($timeHour === 0) { $timeHour = 12; } } // Split the time resolution $tr = $timeResolution; $stepSeconds = $tr % 60; $tr = (int) (($tr - $stepSeconds) / 60); $stepMinutes = $tr % 60; $tr = (int) (($tr - $stepMinutes) / 60); $stepHours = $tr; if ($stepSeconds !== 0 && $stepMinutes === 0) { $stepMinutes = 1; } if ($stepHours === 0) { $stepHours = 1; } // Build HTML $datePickerOptionsAsJSON = json_encode($datePickerOptions, JSON_FORCE_OBJECT); $shownDateFormat = $dh->getPHPDatePattern(); $disabled = ''; $html = '
'; if ($includeActivation) { $html .= '
'; $html .= 'format($shownDateFormat)) . '"'; } $html .= ' />'; $html .= 'format('Y-m-d')) . '"'; } $html .= ' />'; $html .= '
'; $html .= '
'; $html .= '
'; $hourStart = ($timeFormat === 12) ? 1 : 0; $hourEnd = ($timeFormat === 12) ? 12 : 23; $hourList = []; for ($i = $hourStart; $i <= $hourEnd; $i += $stepHours) { $hoursList[] = $i; } $timeHour = $this->selectNearestValue($hoursList, $timeHour); foreach ($hoursList as $i) { $html .= '<option value="' . $i . '"'; if ($i === $timeHour) { $html .= ' selected="selected"'; } $html .= '>' . $i . ''; } $html .= '
'; if ($stepMinutes !== 0) { $html .= '
:
'; $html .= '
'; $minutesList = []; for ($i = 0; $i < 60; $i += $stepMinutes) { $minutesList[] = $i; } $timeMinute = $this->selectNearestValue($minutesList, $timeMinute); foreach ($minutesList as $i) { $html .= '<option value="' . sprintf('%02d', $i) . '"'; if ($i === $timeMinute) { $html .= ' selected="selected"'; } $html .= '>' . sprintf('%02d', $i) . ''; } $html .= '
'; } if ($timeFormat === 12) { $html .= '
'; $html .= 'date('A', mktime(1), 'system'); $html .= ''; $html .= 'date('A', mktime(13), 'system'); $html .= ''; $html .= '
'; } if ($stepSeconds !== 0) { $html .= '
:
'; $html .= '
'; $secondsList = []; for ($i = 0; $i < 60; $i += $stepSeconds) { $secondsList[] = $i; } $timeSecond = $this->selectNearestValue($secondsList, $timeSecond); foreach ($secondsList as $i) { $html .= '<option value="' . sprintf('%02d', $i) . '"'; if ($i === $timeSecond) { $html .= ' selected="selected"'; } $html .= '>' . sprintf('%02d', $i) . ''; } $html .= '
'; } $html .= '
'; $html .= '
'; // Create the Javascript for the calendar /* if ($calendarAutoStart) { $dateFormat = json_encode($dh->getJQueryUIDatePickerFormat($shownDateFormat)); if ($classes) { $beforeShow = 'beforeShow: function() { $(\'#ui-datepicker-div\').addClass(' . json_encode((string) $classes) . '); },'; } else { $beforeShow = ''; } if ($dateTime === null) { $defaultDateJs = "''"; } else { $defaultDateJs = 'new Date(' . implode(', ', [$dateTime->format('Y'), $dateTime->format('n') - 1, (int) $dateTime->format('j')]) . ')'; } $html .= <<<EOT EOT; } */ // Add the Javascript to handle the activation if ($includeActivation) { $html .= <<<EOT EOT; } return $html; } /** * Creates form fields and JavaScript calendar includes for a particular item but includes only calendar controls (no time, so no time-zone conversions will be applied). * * @param string $field The field name (will be used as $field parameter in the translate method) * @param \DateTime|string $value The initial value * @param bool $calendarAutoStart Set to false to avoid initializing the Javascript calendar * @param array $datePickerOptions datepicker properties, see jquery-ui datepicker docs * * @return string */ public function date($field, $value = null, $calendarAutoStart = true, array $datePickerOptions = []) { $app = Application::getFacadeApplication(); $dh = $app->make('helper/date'); /* @var \Concrete\Core\Localization\Service\Date $dh */ $fh = $app->make('helper/form'); /* @var \Concrete\Core\Form\Service\Form $fh */ // Calculate the field names $id = trim(preg_replace('/[^0-9A-Za-z-]+/', '_', $field), '_'); // Set the initial date/time value $dateTime = null; $requestValue = $this->translate($field, null, true); if ($requestValue !== null) { $dateTime = $requestValue; } elseif ($value) { if ($value instanceof PHPDateTime) { $dateTime = $value; } else { try { $dateTime = $dh->toDateTime($value); } catch (Exception $x) { } } } // Build HTML $datePickerOptionsAsJSON = json_encode($datePickerOptions, JSON_FORCE_OBJECT); $shownDateFormat = $dh->getPHPDatePattern(); $html = '
'; $html .= ''; $html .= 'format($shownDateFormat)) . '"'; } $html .= '/>'; $html .= ''; $html .= ''; $html .= '
'; /* // Create the Javascript for the calendar if ($calendarAutoStart) { $dateFormat = json_encode($dh->getJQueryUIDatePickerFormat($shownDateFormat)); if ($dateTime === null) { $defaultDateJs = "''"; } else { $defaultDateJs = 'new Date(' . implode(', ', [$dateTime->format('Y'), $dateTime->format('n') - 1, (int) $dateTime->format('j')]) . ')'; } $html .= <<<EOT EOT; } */ return $html; } /** * Choose an array value nearest to a specified value. * Useful when we work with time resolutions. * * @param int $values * @param int $wantedValue * * @return int * * @example If the current time is 10 and the time resolution is 15, we have an array of values of [0, 15, 30, 45]: the closest value is 15. */ protected function selectNearestValue(array $values, $wantedValue) { if (in_array($wantedValue, $values)) { $result = $wantedValue; } else { $result = null; $minDelta = PHP_INT_MAX; foreach ($values as $value) { $delta = abs($value - $wantedValue); if ($delta < $minDelta) { $minDelta = $delta; $result = $value; } } } return $result; } } `

Ok, the interface work but i need fix output because no dates in output.

some body can suggest me where look about ?

well i have try but i’m just confused
you wrote : " ```
path/to/node_modules/jquery-ui/themes

last version of concrete not have node_modules   working i symphony similar   frame work 

so i have   " jquery-ui"  under :
/concrete/js/i18n/jquery-ui
concrete/images/vendor/jquery-ui/
concrete/bedrock/assets/@concretecms/bedrock/assets/cms/scss/jquery-ui/

so from concrete/themes/atomik/css/scss/resurces.css

i can write: 

../../../../bedrock/assets/@concretecms/bedrock/assets/cms/scss/jquery-ui/base.css
../../../../bedrock/assets/@concretecms/bedrock/assets/cms/scss/jquery-ui/theme.css



for this " ```
jquery-ui/ui/widgets/datepicker

not have in my concrete

Enrico

0k i have inside updates/concrete-cms-9.2.1_remote_updater/concrete/js/i18n/jquery-ui/

a list of datepicker-en-GB.jss for each language

iv try to crate a html element with inside

<SCRIPT type="text/javascript" SRC="updates/concrete-cms-9.2.1_remote_updater/concrete/js/i18n/jquery-ui/datepicker-en-GB.jss"></SCRIPT>

don’t work

Enrico

hi john i have buy and installed your form reform, but not understand how change array of state by country selection , like in the core form to explain myself.
can you help me?

As this is a support question for Form Reform, please open a support request at Support - Concrete CMS

As a general guide, in form reform, you build a form by adding blocks to a page for each kind of form input. For the country-state input, the edit dialogue allows you to select which countries to enable and within that list which to enable state selection.

Anyway, please open a support ticket and we can get into more details.