wake-up-neo.com

Selecionador de data / hora no componente

No meu componente personalizado, preciso inserir data e hora.

O elemento de calendário padrão do Joomla suporta um seletor de datas - mas nenhum seletor de hora.

Alguém pode me ajudar e me indicar um selecionador alternativo de data e hora?

6
Piero Marsilio

A única desvantagem da solução do @ johanpw é usar # datetimepicker2, o que significa que esse tipo de campo pode ser usado apenas uma vez. Boa solução caso contrário!

Em vez disso, tente o seguinte em /modules/mod_yourmodule/fields/datetime.php

$id = str_replace('jform[','',str_replace(']','',$this->name));

return '<div id="datetimepicker'.$id.'" class="input-append date">'.
                 '<input name="'.$this->name.'" data-format="MM/dd/yyyy HH:mm:ss PP" value="'.$this->value.'" type="text" />'.
                 '<span class="add-on">'.
                   '<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>'.
                 '</span>'.
                '</div>'.
                '<script type="text/javascript">'.
                  'jQuery(function() {'.
                    'jQuery("#datetimepicker'.$id.'").datetimepicker({'.
                      'language: "en",'.
                      'pick12HourFormat: true,'.
                      'format: "yyyy-MM-dd hh:mm:ss"'.
                    '});'.
                  '});'.
                '</script>';

Eu também adicionei em 'format: "yyyy-MM-dd hh:mm:ss"' para que você possa usá-lo adequadamente em um componente com um campo SQL DateTime, se desejar.

Eu também tive problemas em que a caixa de entrada desapareceria depois de selecionar uma data, isso poderia ser apenas eu, mas se alguém experimenta isso, tente isso no css do administrador:

.input-append.date {
    display: inline-block!important;
}
4
VaciDesign

Você pode criar seus próprios tipos de campos personalizados no Joomla. Este exemplo é para um módulo, mas o mesmo processo funciona com componentes:

Crie este arquivo: /modules/mod_yourmodule/fields/datetime.php

<?php
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

// Add CSS and JS
JHtml::stylesheet('http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css');
JHtml::stylesheet('http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css');
JHtml::script('http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js');

jimport('joomla.form.formfield');

class JFormFieldDateTime extends JFormField {

    protected $type = 'DateTime';

    public function getInput() {
            return '<div class="well">'.
                    '<div id="datetimepicker2" class="input-append">'.
                        '<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>'.
                        '<span class="add-on">'.
                          '<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>'.
                        '</span>'.
                      '</div>'.
                    '</div>'.
                    '<script type="text/javascript">'.
                      'jQuery(function() {'.
                        'jQuery("#datetimepicker2").datetimepicker({'.
                          'language: "en",'.
                          'pick12HourFormat: true'.
                        '});'.
                      '});'.
                    '</script>';
    }
}

Agora você tem um tipo de campo personalizado. Para usá-lo, coloque-o no seu .xml Arquivo:

<fields name="params">
   <fieldset name="basic" addfieldpath="/modules/mod_yourmodule/models/fields">
       <field name="title" type="DateTime" label="Select Date and Time" description=""   />
   </fieldset>
</fields>

Joomla Custom Field type

(Baseado em http://tarruda.github.io/bootstrap-datetimepicker/ )

3
johanpw

A partir do Joomla 3.7, um selecionador de tempo está incluído no núcleo. Os documentos para isso são aqui , mas o Gist é o seguinte.

Se você quiser fazer isso por meio de uma definição de formulário XML, use

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fieldset>
        <field
            name="mydatetimefield"
            type="calendar"
            label="COM_MYCOMPONENTNAME_FIELD_DATETIME"
            showtime="true"
            format="%Y-%m-%d %H:%M:%S"
        />
    />
/>

Ou se você deseja JHTML diretamente, então é

JHtml::_(
'calendar',
'',
'mydatetimefield',
'mydatetimefieldid',
'%Y-%m-%d %H:%M',
[ 'showTime'=>'showTime' ]);

Os pontos principais nesses dois métodos são o 'horário do show' e o formato. O formato deve incluir alguns elementos de tempo %H, %M, %S, caso contrário, você obterá um selecionador de horário, mas o horário escolhido não retornará ao seu servidor.

1
Dom

JHTML :: _ ('behavior.modal');

eco JHTML :: calendar ('2015-04-03', 'nome', 'id', '% d.% m.% Y% H:% I');

0
Bender