{{indexmenu_n>1}}

===== Propiedades asociadas a formatos de fecha =====
\\
Existen en XOne otras propiedades relacionadas a visualizaciones tipo fecha que permiten mostrar otros formatos:
\\
==== Type="D" ====
\\
Esta propiedad permite visualizar campos tipo fecha de forma tradicional **DD/MM/AAAA**
\\
<code xml>
    <prop name="FECHA" visible="1" group="1" type="D" labelwidth="6" fieldsize="7" title="FECHA" onchange="Refresh255" />
</code>
\\
==== Type="DT" ====
\\
<code xml>
     <prop name="MAP_TYPEDT" type="DT" title="Type DT" date-format="dd/MM/yyyy" img-date="logo.png" time-format="HH:mm" locale="esES" time-interval="2" width="100%" img-date-width="96p" height="10%" img-date-height="96p" img-time-width="96p" img-time-height="96p" Xfloating-tooltip="true" tooltip="hola" />
</code>
\\
==== Type="TT" ====
\\
<code xml>
 <prop name="MAP_TYPETT" type="TT" title="Type TT" time-interval="2" width="100%" mask="Hh#:#Mm" img-time-width="96p" img-time-height="96p" />    
</code>
\\
^ Propiedad   ^ Descripción                                                                                                                                                                              ^ Vista                                                                                                         ^
|  type="D"   | Formato tradicional de fecha **DD/MM/AA**, en edición muestra ícono de calendario para seleccionar fecha                                                                                 | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-d-fecha:typed.png?120 }}   |
|  type="DT"  | Formato de fecha con hora incluida **DD/MM/AA  HH:MM**, en edición muestra ícono de calendario para fecha e ícono de reloj para seleccionar tiempo                                       | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-d-fecha:typedt.png?198 }}  |
|  type="TT"  | Formato solo de hora **HH:MM**, en edición muestra ícono de reloj para seleccionar tiempo, siempre se asocia en la declaración el atributo mask="Hh#:#Mm" para que sea visible el campo  | {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:3.-controles-por-tipo:type-d-fecha:typett.png?85}}    |
\\
==== Atributos relacionados ====
\\
\\
|<-70 75%->|
^ Atributo         ^ Descripción                                                                                                                                          ^
| title            | Texto que muestra la propiedad en edición                                                                                                            |
| bgcolor          | Define el color del fondo de la propiedad                                                                                                            |
| forecolor        | Define el color del texto de la propiedad                                                                                                            |
| width            | Ancho                                                                                                                                                |
| height           | Alto                                                                                                                                                 |
| lmargin          | Distancia a la que estará colocada la propiedad desde la izquierda. Esto es en el caso que queramos que sea diferente al que toma por defecto.       |
| rmargin          | Distancia a la que estará la propiedad desde la derecha. Esto es en el caso que queramos que sea diferente al que toma por defecto.                  |
| tmargin          | Distancia a la que estará colocado el botón desde encima. Esto es en el caso que queramos que sea diferente al que toma por defecto.                 |
| bmargin          | Distancia a la que estará colocado el botón desde abajo. Esto es en el caso que queramos que sea diferente al que toma por defecto.                  |
| newline          | Valor True o False, se utiliza para que esté a continuación del control anterior (False) o se posicione en una nueva línea. (True), salto de línea.  |
| fontsize         | Se utiliza para definir tamaño de la fuente                                                                                                          |
| img-date         | Para asociar una imagen a la propiedad.                                                                                                              |
| img-date-width   | Define ancho del ícono asociado a fecha o calendario                                                                                                 |
| img-date-height  | Define alto del ícono asociado a fecha o calendario                                                                                                  |
| img-time-width   | Define ancho del ícono asociado a la hora                                                                                                            |
| img-time-height  | Define alto del ícono asociado a la hora                                                                                                             |
| visible          | Define visibilidad de la propiedad                                                                                                                   |
| date-format      | Para dar fomato de fecha a mostrar, modificando el definido por defecto.                                                                             |
| labelwith        | Para dar longitud a la etiqueta de la propiedad, o simplemente tomar valor 0, para que no exista.                                                    |
| locked           | Atributo para bloquear el botón según finalidad deseada.                                                                                             |

\\
==== Funciones asociadas a las propiedades tipo fecha ====

\\
<code javascript>
function doBeforeEdit() {
    self.MAP_TYPEDT = new Date();
    self.MAP_TYPED = "2023-07-14 00:00:00";
}

function showDatePicker() {
    ui.showDatePicker({
        targetProperty: "MAP_TYPED"
    });
}

function showDatePickerCallback() {
    ui.showDatePicker({
        onDateSet: function(nYear, nMonth, nDay) {
            ui.showToast("Día: " + nDay + " Mes: " + nMonth + " Año: " + nYear);
        }
    });
}

function showTimePicker() {
    var horaSpliteada = self.MAP_TYPETT.split(":");
    ui.showTimePicker({
        targetProperty: "MAP_TYPETT",
        initialHour: horaSpliteada[0],
        initialMinute: horaSpliteada[1],
        //theme: "holo_light",
        is24HoursMode: true,
        title: "Seleccione el tiempo"
    });
}

function startChronometer() {
    let window = ui.getView(self);
    if (!window) {
        return;
    }
    let control = window.MAP_CHRONO;
    if (!control) {
        return;
    }
    control.startChronometer();
   
}

function stopChronometer() {
    let window = ui.getView(self);
    if (!window) {
        return;
    }
    let control = window.MAP_CHRONO;
    if (!control) {
        return;
    }
    control.stopChronometer();
}

function getCurrentDate() {
    ui.showToast(new Date().toUTCString());
}
</code>