TEMA:

Time Element 6 años 8 meses antes #172442

  • Autor del tema
  • stefan@icelink.is
  • Fuera de línea
  • Navegador Iniciado
  • Navegador Iniciado
  • Registered
  • Mensajes: 5
  • Gracias recibidas: 0
Hi

How can I add PickTime to a form, there is a calendar element but no time element, I want the user to select the time instead of typing it.

Regards,
Stefan

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Time Element 6 años 8 meses antes #172476

  • Avatar de pedro81
  • pedro81
  • Fuera de línea
  • Navegador Platino
  • Navegador Platino
  • Registered
  • Mensajes: 15269
  • Gracias recibidas: 1077
Hi Stefan,

you can build it fastly using two select list with the hours and minutes, what do you think about this solution?

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Time Element 6 años 8 meses antes #172489

  • Autor del tema
  • stefan@icelink.is
  • Fuera de línea
  • Navegador Iniciado
  • Navegador Iniciado
  • Registered
  • Mensajes: 5
  • Gracias recibidas: 0
Hi

Yes that could work, but how can I position two select lists side by side ?

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Time Element 6 años 8 meses antes #172493

  • Avatar de Tihomir
  • Tihomir
  • Fuera de línea
  • Usuario está bloqueado
  • Usuario está bloqueado
  • Registered
  • Mensajes: 3564
  • Gracias recibidas: 289
Hi,

this is an example if you want to implement clokcpicker into the BreezingForms.

1) locate this folder :
components\com_breezingforms\libraries
and copy attached zip file ( clockpicker ) at this location and unzipp the folder

2 ) Once you do it, create an element ( 'textfiled' ) , and put the name 'timepicker'

3) Then go to the form > advanced > more options > Form Pieces > Before Form > Custom , and copy the follwoing scripts into the box :
$this->execPieceByName('ff_InitLib');
echo '<script src="'.JURI::root().'components/com_breezingforms/libraries/clockpicker/js/clockpicker.js" type="text/javascript"></script>';
echo '<link rel="stylesheet" type="text/css" media="all"
href="'.JURI::root().'components/com_breezingforms/libraries/clockpicker/css/clockpicker.css">';
echo '<link rel="stylesheet" type="text/css" media="all"
href="'.JURI::root().'components/com_breezingforms/libraries/clockpicker/css/standalone.css">';

4) once you do it , go to the form > advanced > more options > scripts > custom radio button > create code framework and put the following code into the function :
jQuery('[name="ff_nm_timepicker[]"]').wrap( '<div class="input-group clockpicker"></div>' );

jQuery('[name="ff_nm_timepicker[]"]').after( '<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>' );

jQuery('.clockpicker').clockpicker({
    placement: 'top',
    align: 'left',
    autoclose: true
});

Also , you can find attached an example so you can test it yourself.

Let us know if that worked for you.

Kind regards
===============================================
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===============================================
Regards
Tihomir
==========================================
+++ Purchase Professional Support: crosstec.org/en/support/purchase-additional-support.html +++
Adjuntos:
El siguiente usuario dijo gracias: Dankill

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Última Edición: Post by Tihomir.

Time Element 6 años 8 meses antes #172524

  • Autor del tema
  • stefan@icelink.is
  • Fuera de línea
  • Navegador Iniciado
  • Navegador Iniciado
  • Registered
  • Mensajes: 5
  • Gracias recibidas: 0
Looks great and issue solved.

Thank you very much, brilliant solution !

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Time Element 6 años 8 meses antes #172530

  • Avatar de Tihomir
  • Tihomir
  • Fuera de línea
  • Usuario está bloqueado
  • Usuario está bloqueado
  • Registered
  • Mensajes: 3564
  • Gracias recibidas: 289
Great :),

let us know if you need further help.

Kind regards
===============================================
Support Crosstec and get ALL EXTENSIONS and professional support for just $5
Here!
===============================================
Regards
Tihomir
==========================================
+++ Purchase Professional Support: crosstec.org/en/support/purchase-additional-support.html +++

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Moderadores: ForumSupport
Tiempo de carga de la página: 0.067 segundos

Live Support Chat Opened!

Join our Discord chat here and enter the Crosstec channels to receive live support and talk directly to the team!