Skip to content
Snippets Groups Projects
Commit 4d6d8351 authored by Laurent Lecluse's avatar Laurent Lecluse
Browse files

Intégration dans UnicaenApp du composant Bootstrap-DateTimePicker

parent b03e3797
Branches
Tags
1 merge request!1Bootstrap datetime picker
Pipeline #1631 failed
...@@ -2,8 +2,6 @@ ...@@ -2,8 +2,6 @@
namespace UnicaenApp; namespace UnicaenApp;
use UnicaenApp\View\Helper\QueryParamsHelperFactory;
return [ return [
/** /**
* Paramètres de fonctionnement LDAP. * Paramètres de fonctionnement LDAP.
...@@ -328,7 +326,8 @@ return [ ...@@ -328,7 +326,8 @@ return [
'userProfileSelect' => 'UnicaenAuth\View\Helper\UserProfileSelectFactory', 'userProfileSelect' => 'UnicaenAuth\View\Helper\UserProfileSelectFactory',
'Message' => 'UnicaenApp\Message\View\Helper\MessageHelperFactory', 'Message' => 'UnicaenApp\Message\View\Helper\MessageHelperFactory',
'messenger' => 'UnicaenApp\View\Helper\MessengerFactory', 'messenger' => 'UnicaenApp\View\Helper\MessengerFactory',
'queryParams' => QueryParamsHelperFactory::class, 'queryParams' => View\Helper\QueryParamsHelperFactory::class,
'formControlGroup' => Form\View\Helper\FormControlGroupFactory::class,
], ],
'invokables' => [ 'invokables' => [
'appConnection' => 'UnicaenApp\View\Helper\AppConnection', 'appConnection' => 'UnicaenApp\View\Helper\AppConnection',
...@@ -339,8 +338,8 @@ return [ ...@@ -339,8 +338,8 @@ return [
'multipageFormNav' => 'UnicaenApp\Form\View\Helper\MultipageFormNav', 'multipageFormNav' => 'UnicaenApp\Form\View\Helper\MultipageFormNav',
'multipageFormRow' => 'UnicaenApp\Form\View\Helper\MultipageFormRow', 'multipageFormRow' => 'UnicaenApp\Form\View\Helper\MultipageFormRow',
'multipageFormRecap' => 'UnicaenApp\Form\View\Helper\MultipageFormRecap', 'multipageFormRecap' => 'UnicaenApp\Form\View\Helper\MultipageFormRecap',
'formControlGroup' => 'UnicaenApp\Form\View\Helper\FormControlGroup',
'formDate' => 'UnicaenApp\Form\View\Helper\FormDate', 'formDate' => 'UnicaenApp\Form\View\Helper\FormDate',
'formDateTime' => Form\View\Helper\FormDateTime::class,
'formDateInfSup' => 'UnicaenApp\Form\View\Helper\FormDateInfSup', 'formDateInfSup' => 'UnicaenApp\Form\View\Helper\FormDateInfSup',
'formRowDateInfSup' => 'UnicaenApp\Form\View\Helper\FormRowDateInfSup', 'formRowDateInfSup' => 'UnicaenApp\Form\View\Helper\FormRowDateInfSup',
'formSearchAndSelect' => 'UnicaenApp\Form\View\Helper\FormSearchAndSelect', 'formSearchAndSelect' => 'UnicaenApp\Form\View\Helper\FormSearchAndSelect',
......
/*!
* Datetimepicker for Bootstrap 3
* version : 4.17.47
* https://github.com/Eonasdan/bootstrap-datetimepicker/
*/.bootstrap-datetimepicker-widget{list-style:none}.bootstrap-datetimepicker-widget.dropdown-menu{display:block;margin:2px 0;padding:4px;width:19em}@media (min-width:768px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}@media (min-width:992px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}@media (min-width:1200px){.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{width:38em}}.bootstrap-datetimepicker-widget.dropdown-menu:before,.bootstrap-datetimepicker-widget.dropdown-menu:after{content:'';display:inline-block;position:absolute}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);top:-7px;left:7px}.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid white;top:-6px;left:8px}.bootstrap-datetimepicker-widget.dropdown-menu.top:before{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #ccc;border-top-color:rgba(0,0,0,0.2);bottom:-7px;left:6px}.bootstrap-datetimepicker-widget.dropdown-menu.top:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white;bottom:-6px;left:7px}.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before{left:auto;right:6px}.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after{left:auto;right:7px}.bootstrap-datetimepicker-widget .list-unstyled{margin:0}.bootstrap-datetimepicker-widget a[data-action]{padding:6px 0}.bootstrap-datetimepicker-widget a[data-action]:active{box-shadow:none}.bootstrap-datetimepicker-widget .timepicker-hour,.bootstrap-datetimepicker-widget .timepicker-minute,.bootstrap-datetimepicker-widget .timepicker-second{width:54px;font-weight:bold;font-size:1.2em;margin:0}.bootstrap-datetimepicker-widget button[data-action]{padding:6px}.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Increment Hours"}.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Increment Minutes"}.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Decrement Hours"}.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Decrement Minutes"}.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Show Hours"}.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Show Minutes"}.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Toggle AM/PM"}.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Clear the picker"}.bootstrap-datetimepicker-widget .btn[data-action="today"]::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Set the date to today"}.bootstrap-datetimepicker-widget .picker-switch{text-align:center}.bootstrap-datetimepicker-widget .picker-switch::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Toggle Date and Time Screens"}.bootstrap-datetimepicker-widget .picker-switch td{padding:0;margin:0;height:auto;width:auto;line-height:inherit}.bootstrap-datetimepicker-widget .picker-switch td span{line-height:2.5;height:2.5em;width:100%}.bootstrap-datetimepicker-widget table{width:100%;margin:0}.bootstrap-datetimepicker-widget table td,.bootstrap-datetimepicker-widget table th{text-align:center;border-radius:4px}.bootstrap-datetimepicker-widget table th{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget table th.picker-switch{width:145px}.bootstrap-datetimepicker-widget table th.disabled,.bootstrap-datetimepicker-widget table th.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget table th.prev::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Previous Month"}.bootstrap-datetimepicker-widget table th.next::after{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;content:"Next Month"}.bootstrap-datetimepicker-widget table thead tr:first-child th{cursor:pointer}.bootstrap-datetimepicker-widget table thead tr:first-child th:hover{background:#eee}.bootstrap-datetimepicker-widget table td{height:54px;line-height:54px;width:54px}.bootstrap-datetimepicker-widget table td.cw{font-size:.8em;height:20px;line-height:20px;color:#777}.bootstrap-datetimepicker-widget table td.day{height:20px;line-height:20px;width:20px}.bootstrap-datetimepicker-widget table td.day:hover,.bootstrap-datetimepicker-widget table td.hour:hover,.bootstrap-datetimepicker-widget table td.minute:hover,.bootstrap-datetimepicker-widget table td.second:hover{background:#eee;cursor:pointer}.bootstrap-datetimepicker-widget table td.old,.bootstrap-datetimepicker-widget table td.new{color:#777}.bootstrap-datetimepicker-widget table td.today{position:relative}.bootstrap-datetimepicker-widget table td.today:before{content:'';display:inline-block;border:solid transparent;border-width:0 0 7px 7px;border-bottom-color:#337ab7;border-top-color:rgba(0,0,0,0.2);position:absolute;bottom:4px;right:4px}.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover{background-color:#337ab7;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget table td.active.today:before{border-bottom-color:#fff}.bootstrap-datetimepicker-widget table td.disabled,.bootstrap-datetimepicker-widget table td.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget table td span{display:inline-block;width:54px;height:54px;line-height:54px;margin:2px 1.5px;cursor:pointer;border-radius:4px}.bootstrap-datetimepicker-widget table td span:hover{background:#eee}.bootstrap-datetimepicker-widget table td span.active{background-color:#337ab7;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.bootstrap-datetimepicker-widget table td span.old{color:#777}.bootstrap-datetimepicker-widget table td span.disabled,.bootstrap-datetimepicker-widget table td span.disabled:hover{background:none;color:#777;cursor:not-allowed}.bootstrap-datetimepicker-widget.usetwentyfour td.hour{height:27px;line-height:27px}.bootstrap-datetimepicker-widget.wider{width:21em}.bootstrap-datetimepicker-widget .datepicker-decades .decade{line-height:1.8em !important}.input-group.date .input-group-addon{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}
\ No newline at end of file
This diff is collapsed.
<?php
namespace UnicaenApp\Form\View\Helper;
use UnicaenApp\Exception\LogicException;
use UnicaenApp\Form\Element\Date;
use UnicaenApp\Util;
use UnicaenApp\View\Helper\TagViewHelper;
use Zend\Form\Element\DateTime;
use Zend\Form\ElementInterface;
use UnicaenApp\Form\Element\DateTime as UnicaenDateTime;
/**
* Class FormDateTime
*
* @package UnicaenApp\Form\View\Helper
*/
class FormDateTime extends \Zend\Form\View\Helper\FormDateTime
{
/**
* @var DateTime
*/
private $element;
/**
* Render a form <input> element from the provided $element
*
* @param ElementInterface $element
*
* @throws Exception\DomainException
* @return string
*/
public function render(ElementInterface $element)
{
$this->setElement($element);
// On force le format à date s'il n'a pas été déjà défini!!
if (!$this->getFormat('format')){
$this->setFormat(Util::DATE_FORMAT);
}
$inputAttrs = $element->getAttributes();
$inputAttrs['name'] = $element->getName();
$inputAttrs['type'] = $this->getType($element);
$inputAttrs['value'] = $this->getStringValue();
$inputAttrs['placeholder'] = $this->convertPHPToHumanFormat($this->getFormat());
$inputAttrs['id'] = uniqid('bdtpicker_');
  • Bertrand Gauthier @bertrand.gauthier ·
    Owner

    Laurent, il ne faut pas écraser l'id d'un élément comme ça, c'est très intrusif !

    Un id est-il obligatoire ? Si c'est non , je propose de supprimer la ligne. Si c'est oui, je propose de corriger comme cela :

            if (! $element->getAttribute('id')) {
                $inputAttrs['id'] = uniqid('bdtpicker_');
            }

    En tout cas, j'espère qu'aucune appli ne s'appuie sur le fait que l'id commence par 'bdtpicker_'...

  • Author Maintainer

    Oui effectivement. Je ne me souviens plus mais je dois avoir eu une raison d'attribuer un ID. Il faudarit tester. Mettre un IF me parait plus prudent que de supprimer la ligne.

  • Bertrand Gauthier @bertrand.gauthier ·
    Owner

    Ok, merci. Je vais modifier la ligne alors.

  • Please register or sign in to reply
$value = $element->getValue();
$divAttrs = [
'class' => 'input-group date bootstrap-datetimepicker',
'data-options' => $this->optionsToTransfer(),
'data-input-id' => $inputAttrs['id'],
];
/** @var $tag TagViewHelper */
$tag = $this->getView()->tag();
return $tag('div', $divAttrs)->html(
$tag('input', $inputAttrs)->openClose(true)
. $tag('span', ['class' => 'input-group-addon'])->html(
$tag('span', ['class' => 'glyphicon glyphicon-calendar'])
)
);
}
private function setElement(DateTime $element)
{
$name = $element->getName();
if ($name === null || $name === '') {
throw new Exception\DomainException(sprintf(
'%s requires that the element has an assigned name; none discovered',
__METHOD__
));
}
$this->element = $element;
return $this;
}
private function convertPHPToMomentFormat($format)
{
$replacements = [
'd' => 'DD',
'D' => 'ddd',
'j' => 'D',
'l' => 'dddd',
'N' => 'E',
'S' => 'o',
'w' => 'e',
'z' => 'DDD',
'W' => 'W',
'F' => 'MMMM',
'm' => 'MM',
'M' => 'MMM',
'n' => 'M',
't' => '', // no equivalent
'L' => '', // no equivalent
'o' => 'YYYY',
'Y' => 'YYYY',
'y' => 'YY',
'a' => 'a',
'A' => 'A',
'B' => '', // no equivalent
'g' => 'h',
'G' => 'H',
'h' => 'hh',
'H' => 'HH',
'i' => 'mm',
's' => 'ss',
'u' => 'SSS',
'e' => 'zz', // deprecated since version 1.6.0 of moment.js
'I' => '', // no equivalent
'O' => '', // no equivalent
'P' => '', // no equivalent
'T' => '', // no equivalent
'Z' => '', // no equivalent
'c' => '', // no equivalent
'r' => '', // no equivalent
'U' => 'X',
];
$momentFormat = strtr($format, $replacements);
return $momentFormat;
}
private function convertPHPToHumanFormat($format)
{
$replacements = [
'd' => 'jour',
'D' => 'nom-du-jour',
'j' => 'jour',
'l' => 'nom-du-jour',
'N' => 'numéro-hebdo-du-jour (0..6)',
'S' => '?',
'w' => 'numéro-hebdo-du-jour (0..6)',
'z' => 'numéro-annuel-du-jour (1..365)',
'W' => 'numéro-de-semaine (1..53)',
'F' => 'nom-du-mois',
'm' => 'mois',
'M' => 'nom-du-mois',
'n' => 'mois',
't' => '?', // no equivalent
'L' => '?', // no equivalent
'o' => 'année',
'Y' => 'année',
'y' => 'année(2 chiffres)',
'a' => 'am-pm',
'A' => 'am-pm',
'B' => '?', // no equivalent
'g' => 'heures',
'G' => 'heures',
'h' => 'heures',
'H' => 'heures',
'i' => 'minutes',
's' => 'secondes',
'u' => 'millisecondes',
'e' => 'créneau-horaire', // deprecated since version 1.6.0 of moment.js
'I' => '?', // no equivalent
'O' => '?', // no equivalent
'P' => '?', // no equivalent
'T' => '?', // no equivalent
'Z' => '?', // no equivalent
'c' => '?', // no equivalent
'r' => '?', // no equivalent
'U' => 'timestamp-unix',
];
$momentFormat = strtr($format, $replacements);
return $momentFormat;
}
private function optionsToTransfer()
{
$options = $this->element->getOptions();
$options['format'] = $this->convertPHPToMomentFormat($options['format']);
unset($options['label']);
unset($options['prefix']);
unset($options['suffix']);
unset($options['add-clear-btn']);
return $options;
}
private function getStringValue()
{
$value = $this->element->getValue(false);
$format = $this->getFormat();
if ($value instanceof \DateTime){
return $value->format($format);
}else{
return $value;
}
}
/**
* @return string
*/
public function getFormat(): string
{
return $this->element->getOption('format');
}
/**
* @param string $format
*
* @return FormDateTime
*/
public function setFormat(string $format): FormDateTime
{
$this->element->setOption('format', $format);
return $this;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment