agorum.dateInput

Dieses Widget zeigt ein Datum an, das Benutzer per Kalender neu wählen können, und nimmt für value einen Datumswert (java.util.Calendar) entgegen.

Datumswerte müssen Sie beim Setzen oder Lesen konvertieren.

Verwendung

 

---

 

 

let aguila = require('common/aguila');

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    height: 200,
    width: 300,
    items: [
      {
        type: 'agorum.dateInput',
        label: 'Datumsfeld',
        name: 'datePicker'
      }
    ]
  }
);

widget;

Konvertierung

---

Der Datumspicker rechnet und speichert sein Wert in einem Java-Objekt vom Typ Datum.

• Sie erhalten ein Datum ohne Uhrzeit zurück.
• Sie müssen die Werte konvertieren, wenn Sie den Datumswert weiter verarbeiten möchten, etwa per new Date().
• Das System rechnet bei new Date() zusätzlich mit einer Uhrzeit (12 Uhr mittags), um Konflikte mit der Zeitzone oder Sommer-/Winterzeit zu vermeiden.
• Einige Stunden Verschiebung spielen keine Rolle, der reine Datumswert bleibt der gleiche.

Die Konvertierung ist notwendig, wenn Sie Werte manipulieren, Eingaben prüfen oder Werte als Metadaten speichern möchten.

Bestimmte Funktion unterstützen die Konvertierung: JS -> Java und Java -> JS. Sie werden im Folgenden beschrieben.

Die Funktionen beachten neben der Uhrzeit noch die Zeitzone.

Einen Wert des Datumspickers in ein JavaScript-Objekt konvertieren

Das Datumsfeld gibt ein java.time.LocalDate-Objekt zurück. Der folgende Einzeiler hilft bei der Konvertierung:

let localToTime = ld => java.util.Date.from(ld.atTime(12, 0).atOffset(java.time.ZoneOffset.UTC).toInstant());

Einmal definiert, können Sie diese Funktion direkt beim Erhalten des Werts verwenden:

datePicker1.on('valueChanged', value => {
   // Convert java.util.Calendar to JS Date
   let pickedDate = localToTime(value);

  // Get date as string and print full date
  log.value = pickedDate.toString();

  // Get and print year
  logYear.value = pickedDate.getFullYear();
});

• Das System wandelt den Java-Datumswert value in ein JavaScript-Objekt und setzt die Uhrzeit auf 12 Uhr mittags.
• Sie können etwa per toString() den ganzen String oder per getFullYear() das Jahr auslesen und als Text anzeigen.
• Sie können einen ausgelesenen Wert nach der Konvertierung als Metadatum abspeichern:

let pickedDate = localToTime(datePicker1.value);
// Set date as metadata  
metadata({
  aguilaschulung_test_date: pickedDate
}).save(file);

Einen Wert in Datumspicker setzen

Da das Datumsfeld ein java.time.LocalDate-Objekt erwartet, müssen Sie ein mögliches JavaScript-Datum erst umwandeln. Die Funktion dazu lautet wie folgt:

let timeToLocal = date => java.time.Instant.ofEpochMilli(date.getTime()).atZone(java.time.ZoneId.systemDefault()).toLocalDate();

Das folgende Beispiel liest ein Metadatum vom Typ date. Beim Umwandeln in ein reines Datum geht die Uhrzeit verloren:

// Load metadate??
let some = metadata().load(file, 'aguilaschulung_test_date').data();
let date = some.aguilaschulung_test_date;

// Convert date and set in datePicker
datePicker1.value = timeToLocal(date);

Anstatt ein Metadatum zu laden, können Sie direkt ein JavaScript-Datum (date) erstellen:

let date = new Date(2019, 0, 28, 12, 0, 0);
datePicker1.value = timeToLocal(date);

Dieses Beispiel erzeugt ein neues Datum (date) vom 28.01.2019 um 12:00 mittags.

Events

---

keine

Parameter

---

keine

Funktionen

---

keine

Beispiele

---

/* global parameters, sc */
let aguila = require('common/aguila');
let metadata = require('common/metadata');
let objects = require('common/objects');

// Converter functions
let localToTime = ld => java.util.Date.from(ld.atTime(12, 0).atOffset(java.time.ZoneOffset.UTC).toInstant());
let timeToLocal = date => java.time.Instant.ofEpochMilli(date.getTime()).atZone(java.time.ZoneId.systemDefault()).toLocalDate();

let widget = aguila.create({
  width: 400,
  hight: 300,
  type: 'agorum.vbox',
  title: 'agorum.dateInput - Beispiel',
  items: [ 
    {
      type: 'agorum.dateInput',
      label: 'datePicker',
      name: 'datePicker1'
    },
    {
      type: 'agorum.spacer',
    },
    {type: 'agorum.hbox',
     items: [
       {
         type: 'agorum.textDisplay',
         text: 'Manuelle Eingabe:'
       },
       {
         type: 'agorum.textInput',
         placeholder: 'Tag',
         width: 50,
         name: 'inpDay'
       },
       {
         type: 'agorum.textInput',
         placeholder: 'Monat',
         width: 50,
         name: 'inpMonth'
       },
       {
         type: 'agorum.textInput',
         placeholder: 'Jahr',
         width: 50,
         name: 'inpYear'
       }
     ]
    },
    {
      type: 'agorum.button',
      text: 'Setze Eingabe',
      name: 'btnSetDate'
    },
    {
      type: 'agorum.button',
      text: 'Speichere Metadatum',
      name: 'btnSaveMD'
    },
    {
      type: 'agorum.button',
      text: 'Lese Metadatum',
      name: 'btnReadMD'
    },
    {
      type: 'agorum.spacer',
    },
    {
      type: 'agorum.textDisplay',
      label: 'Eingabe',
      name: 'log'
    },
    {
      type: 'agorum.textDisplay',
      label: 'Jahr:',
      name: 'logYear'
    }      
  ]
});

let datePicker1 = widget.down('datePicker1');
let log = widget.down('log');
let logYear = widget.down('logYear');
let btnSetDate = widget.down('btnSetDate');
let btnSaveMD = widget.down('btnSaveMD');
let btnReadMD = widget.down('btnReadMD');
let inpDay = widget.down('inpDay');
let inpMonth = widget.down('inpMonth');
let inpYear = widget.down('inpYear');


let file = objects.find('/Home/roi/MyFiles/Referenz/examples/agorum-dateInput.js');

datePicker1.on('valueChanged', value => {  
  // Convert picker value from java.util.Calendar to JS Date
  let pickedDate = localToTime(value);

  // Get date as string and print full date
  log.value = pickedDate.toString();

  // Get and print year
  logYear.value = pickedDate.getFullYear();
});


btnSetDate.on('clicked', () => {
  // Generate JavaScript date from input fields
  let date = new Date(inpYear.value, (inpMonth.value - 1), inpDay.value, 12, 0, 0);

  datePicker1.value = timeToLocal(date);
});

btnSaveMD.on('clicked', () => {
  let pickedDate = localToTime(datePicker1.value);
  // Set date as metadata  
  metadata({
    aguilaschulung_test_date: pickedDate
  }).save(file);
});

btnReadMD.on('clicked', () => {
  // Read metadata
  let some = metadata().load(file, 'aguilaschulung_test_date').data();
  let date = some.aguilaschulung_test_date;

  if (!date) return;

  // Convert date and set in datePicker
  datePicker1.value = timeToLocal(date);
});


widget;