.. _widgetpedia/elements/inputfields/datetextbox:

dateTextBox e timeTextBox
=========================




Il dateTextBox è un  :ref:`textBox<widgetpedia/elements/inputfields/textbox>`  che ammette come valori delle date. Il valore inserito sarà pertanto automaticamente convertito a un oggetto di tipo *data*. 

Di default presenta un ``popup`` che mostra un calendario per la selezione del giorno. Il *popup* può essere disabilitato impostando il parametro ``popup=False``.

.. raw:: html

    <hr>

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/inputfields/datetextbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "dateTextBox standard con popup ", "example_name": "_base_"} );'>
                dateTextBox standard con popup 
            </a>
            <div></div>
        </div> 
        

Il *datetextbox* supporta il *linguaggio naturale*: oltre quindi all'inserimento canonico in forma numerica (anche nella forma senza barre, ad es: "010121"), sono supportate le espressioni verbali naturali come "*mese scorso*", "*quest'anno*", "*settimana prossima*", nonché le operazioni con le stesse (es: "oggi-10").

Inoltre, utilizzando ``period_to`` indicando il path di un'altra *dateTextBox*, è possibile auto-compilare le date di inizio e di fine e di un periodo: inserendo quindi in quella che sarà la data di inizio "settimana scorsa", il sistema compilerà automaticamente il primo campo data con il lunedì della scorsa settimana e l'altro campo data con la domenica.

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/inputfields/datetextbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "dateTextBox con period_to senza popup ", "example_name": "period_to"} );'>
                dateTextBox con period_to senza popup 
            </a>
            <div></div>
        </div> 
        

timeTextBox
~~~~~~~~~~~
La timeTextBox, analogamente al caso precedente, permette di presentare un'interfaccia per l'inserimento di un orario.

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/inputfields/datetextbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "timeTextBox ", "example_name": "time"} );'>
                timeTextBox 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

    <hr>
    
dateTimeTextBox
~~~~~~~~~~~~~~~
È stata recentemente introdotta una versione ibrida, la *dateTimeTextBox*, che permette di gestire in un unico campo data e ora contemporaneamente.

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/inputfields/datetextbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Esempio di dateTimeTextBox ", "example_name": "datetime"} );'>
                Esempio di dateTimeTextBox 
            </a>
            <div></div>
        </div> 
        

format
------
Si noti che è possibile specificare il *format* del widget::

  fb.datetextbox(lbl='Insert date',value='^.date', format='MM/dd/yy')
  
In questo caso caso con ``format='dd/MM/yy'`` si specifica di mostrare prima due cifre per il mese, poi due cifre per il giorno e infine due cifre per l'anno.

.. raw:: html

 <hr>

**Parametri:**

+------------------------+------+--------------------------------------------------+
|     Nome parametro     | Tipo |                   Descrizione                    |
+========================+======+==================================================+
|popup                   |B     |Di default True, se impostato a False nasconde il |
|                        |      |popup che mostra il calendario con la data        |
+------------------------+------+--------------------------------------------------+
|period_to               |T     |Utilizzando period_to indicando il path di        |
|                        |      |un'altra dateTextBox è possibile auto-compilare le|
|                        |      |date di inizio e di fine e di un periodo (es:     |
|                        |      |period_to='.date_to')                             |
+------------------------+------+--------------------------------------------------+
|                                 *Html Parametri*                                 |
+------------------------+------+--------------------------------------------------+
|_class                  |T     |Permette di assegnare una specifica classe CSS al |
|                        |      |widget                                            |
+------------------------+------+--------------------------------------------------+
|height                  |T     |Permette di assegnare un'altezza al widget        |
+------------------------+------+--------------------------------------------------+
|width                   |T     |Permette di assegnare una larghezza al widget     |
+------------------------+------+--------------------------------------------------+
|border                  |T     |Permette di assegnare un bordo al widget          |
+------------------------+------+--------------------------------------------------+
|rounded                 |L     |Permette di assegnare un arrotondamento al widget |
+------------------------+------+--------------------------------------------------+
|style                   |T     |Permette di assegnare uno stile (da esprimersi    |
|                        |      |come serie di attributi CSS) al widget            |
+------------------------+------+--------------------------------------------------+
|background              |T     |Permette di assegnare uno sfondo al widget        |
+------------------------+------+--------------------------------------------------+
|                             *Validations Parametri*                              |
+------------------------+------+--------------------------------------------------+
|validate_empty          |T     |Restituisce un errore se il valore è nullo o è una|
|                        |      |stringa vuota                                     |
+------------------------+------+--------------------------------------------------+
|validate_notnull        |B     |Restituisce un errore se il campo è vuoto         |
+------------------------+------+--------------------------------------------------+
|validate_call           |T     |Restituisce un errore js                          |
+------------------------+------+--------------------------------------------------+
|validate_regex          |T     |Restituisce un errore se il campo corrisponde     |
|                        |      |esattamente a quanto indicato                     |
+------------------------+------+--------------------------------------------------+
|validate_remote         |T     |Metodo RPC che effettua la validazione del valore |
|                        |      |inserito                                          |
+------------------------+------+--------------------------------------------------+
|                                *Common Parametri*                                |
+------------------------+------+--------------------------------------------------+
|value                   |T     |Permette di inserire un valore, in termini        |
|                        |      |assoluti (es. value='Pippo') o posizionali (es.   |
|                        |      |value='^.name'). Nel primo caso verrà assegnato il|
|                        |      |valore 'Pippo', nel secondo verrà assegnato a     |
|                        |      |'name' il valore che inseriremo nell'inputfield.  |
+------------------------+------+--------------------------------------------------+
|lbl                     |T     |Permette di inserire un'etichetta per il campo.   |
|                        |      |Per div, caselle e aree di testo la "lbl" verrà   |
|                        |      |visualizzata prima del campo, per le checkbox     |
|                        |      |invece verrà mostrata dopo.                       |
+------------------------+------+--------------------------------------------------+
|lbl\_                   |T     |Permette di assegnare attributi alla lbl (es:     |
|                        |      |"lbl_class")                                      |
+------------------------+------+--------------------------------------------------+
|default                 |T     |Valore di default se non modificato               |
+------------------------+------+--------------------------------------------------+
|placeholder             |T     |Testo di anteprima (non rappresenta un valore     |
|                        |      |inserito ma solo un suggerimento)                 |
+------------------------+------+--------------------------------------------------+
|disabled                |B     |Permette di disabilitare il campo. Es:            |
|                        |      |disabled=True                                     |
+------------------------+------+--------------------------------------------------+
|tabindex                |L     |In un formbuilder con una serie di campi, permette|
|                        |      |di dare un ordinamento personalizzato nella       |
|                        |      |compilazione nel passaggio da un campo a un altro |
|                        |      |con il tabulatore (es: tabindex=4)                |
+------------------------+------+--------------------------------------------------+
|_autoselect             |B     |Se impostato a True, alla selezione del campo il  |
|                        |      |contenuto del campo sarà automaticamente          |
|                        |      |selezionato                                       |
+------------------------+------+--------------------------------------------------+

.. sectionauthor:: Davide Paci