Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript fest

Lesezeit: 6 Minuten

Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript
DOM-Manipulator

Ich habe zwei Eingabefelder:

<input type="date" id="currentDate">
<input type="time" id="currentTime">

Wie kann ich diese Felder auf das aktuelle Datum/die aktuelle Uhrzeit einstellen?

  • Mit welchem ​​Code hast du Probleme? Bitte bearbeiten Sie Ihre Frage, um zu zeigen, was Sie versucht haben und was speziell schief geht.

    – Showdev

    25. Februar 2015 um 21:21 Uhr

1647158526 892 Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript
jung

Sie können einfach die einstellen value des Eingabefeldes mit den jeweiligen Formaten:

  • date ist yyyy-MM-dd
  • time ist HH:mm

Mit Ihrem Beispiel können Sie etwas Einfaches tun wie:

var date = new Date();
var currentDate = date.toISOString().substring(0,10);
var currentTime = date.toISOString().substring(11,16);

document.getElementById('currentDate').value = currentDate;
document.getElementById('currentTime').value = currentTime;

  • Ihr Code funktioniert nicht, wenn getHours() oder getMinutes() gibt Werte unter zurück 10. Die Zeiteingabe weist Zeichenfolgen wie ab "4:8". Sie müssen sicherstellen, dass jede Komponente (Stunden und Minuten) eine führende Null hat, z "04:08"

    – Dai

    3. Juli 2016 um 16:26 Uhr


  • Was macht „.slice(0,10)“? Nimmt es die ersten 10 Ziffern und setzt sie für das entsprechende Datumsformat? Habt ihr hilfreiche Links?

    – Vaggelis Manousakis

    27. November 2018 um 19:11 Uhr

  • .toISOString() kann nur ein Fehlerproblem verursachen, da standardmäßig die UTC-Konvertierung berechnet wird. Um zu verhindern, dass die Berechnung automatisiert wird, sollten Sie mit anrufen toISOString(true) um es zu erreichen.

    – Natta Wang

    5. Juni 2019 um 7:20 Uhr

  • @NattaWang toISOString() akzeptiert keine Argumente: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – xyres

    17. August 2019 um 6:47 Uhr

  • toISOString() hat bei mir nicht funktioniert, aber toString() hat es getan

    – Dimuth Ruwantha

    26. März 2020 um 16:56 Uhr

1647158526 981 Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript
XepherX

var date = new Date();

var day = date.getDate(),
    month = date.getMonth() + 1,
    year = date.getFullYear(),
    hour = date.getHours(),
    min  = date.getMinutes();

month = (month < 10 ? "0" : "") + month;
day = (day < 10 ? "0" : "") + day;
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;

var today = year + "-" + month + "-" + day,
    displayTime = hour + ":" + min; 

document.getElementById('formdate').value = today;      
document.getElementById("formtime").value = displayTime;

  • funktioniert besser als die akzeptierte Antwort (behebt das Problem mit Minuten < 10)

    – BjornErlösung

    16. August 2019 um 3:10 Uhr

  • Dies ist die beste Lösung auf dieser Seite. Andere Lösungen verwerfen einfach die Zeitzoneninformationen des Benutzers.

    – xyres

    17. August 2019 um 10:53 Uhr

  • Geben Sie Probleme in Hülle und Fülle ein

    – Ben Racicot

    18. April 2020 um 23:29 Uhr

1647158526 139 Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript
Herr Jojo

Bei modernen Browsern ist dies sehr einfach:

Verwenden Sie einfach HTML_element .valueAsDate anstelle von HTML_element .Wert

const 
  myForm = document.querySelector('#my-form')
, dtStr  = document.querySelector('#date-time-Str')  
, localDt_now =_=>
    {
    let now = new Date()
    now.setMinutes(now.getMinutes() - now.getTimezoneOffset())
    now.setSeconds(0)       // remove seconds
    now.setMilliseconds(0) // remove milliseconds
    return now
    }

/* ------------------------------------------- *\
*      set date & time  !                       *
\* ------------------------------------------- */

myForm.inDate.valueAsDate = localDt_now()   // current date
myForm.inTime.valueAsDate = localDt_now()   // current time

/*----------------------------------- Bonus -*\
*     some Intl methods to use...             *
\*-------------------------------------------*/
const
  fxD = // dates Formats
    { ymd : Intl.DateTimeFormat( 0, { year: 'numeric', month: '2-digit', day: '2-digit' })
    , hm  : Intl.DateTimeFormat( 0, { hour12: false, hour: '2-digit', minute: '2-digit' })
    }
, fxD_parts = (d,fx) => fx.formatToParts(d).reduce((o,{type,value})=>(o[type]=value,o),{})
  ;

/*------------------------------------ Bonus -*\
*  reverse action = get date & time values !   *
\*--------------------------------------------*/
// add TZ offset to get locale values
const getLocalDt = dt => dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset())


/*----------------------------------- Bonus -*\
*  demo...                                    *
\*-------------------------------------------*/
myForm.onsubmit = e =>
  {
  e.preventDefault()

  let
    dt_D = fxD_parts( getLocalDt( myForm.inDate.valueAsDate), fxD.ymd )
  , dt_T = fxD_parts( getLocalDt( myForm.inTime.valueAsDate), fxD.hm )
    ;
  dtStr.innerHTML = ` date = ${dt_D.year} - ${dt_D.month} - ${dt_D.day} <br>`
                  + ` time = ${dt_T.hour} : ${dt_T.minute}` 
  }
form {
  padding       : 1em 2em;
  }
label {
  display       : inline-block;
  line-height   : 1.3em;
  margin        : 1em .6em;
  font-size     : .8em;
  }
input {
  display       : block;
  margin-bottom : .6em;
  }
<form id="my-form" method="post" action="#">
  <label>
    Date:
    <input name="inDate" type="date">
  </label>
  <label>
    Time: 
    <input name="inTime" type="time">
  </label>
  <br><br>
  <button type="submit">get Date & time (Bonus)</button>
</form>

<p id="date-time-Str">d=??? t=???</p>

(vorherige Version)

// just my preference to access form elements by names
const myForm = document.querySelector('#my-Form')

// 1: get local date and time values
let sysDate  = new Date()  
  , userDate = new Date(Date.UTC(sysDate.getFullYear(), sysDate.getMonth(), sysDate.getDate(),  sysDate.getHours(), sysDate.getMinutes(), 0));

// 2: set interface values !
myForm.currentDate.valueAsDate = userDate
myForm.currentTime.valueAsDate = userDate
<form action="xxx" id="my-Form">

  <input type="date" name="currentDate">
  <br><br>
  <input type="time" name="currentTime">

</form>

  • tolle Antwort, obwohl ich das gefunden habe valueAsDate verwendet die UTC-Zeit des Datums. Eine saubere Lösung habe ich noch nicht gefunden

    – Felipe

    23. September 2021 um 22:22 Uhr

  • Alle Daten sind immer UTC-Werte. Worüber redest du?

    – Herr Jojo

    23. September 2021 um 22:25 Uhr

  • ja, intern. Aber wenn es um die Anzeige der Uhrzeit geht, ist es meistens so, dass Sie sie in der Kundenzone anzeigen möchten. Siehe dieses kurze Beispiel: jsfiddle.net/jtmLv0dc

    – Felipe

    23. September 2021 um 22:44 Uhr

  • Ich kann meinen Kommentar nicht mehr bearbeiten, aber was er sagen sollte, ist valueAsDate Wille Anzeige die UTC-Zeit des Datums

    – Felipe

    23. September 2021 um 22:45 Uhr

  • @Felipe Ich habe meine Antwort mit einer einfachsten Methode aktualisiert, um Eingaben auf lokale Datums-/Zeitwerte festzulegen

    – Herr Jojo

    24. September 2021 um 1:38 Uhr

Ich finde, dass mit ISOString das Format natürlich standardisiert ist. Sie können die Zeichenfolge einfach bei ‘T’ für ein Array aus Datum und Uhrzeit aufteilen (Zulu eingeschlossen, Sie möchten vielleicht das letzte Zeichen ‘Z’ heraustrennen).

Daher war die einfachste Lösung, die ich gefunden habe, lediglich:

let tmp = new Date(Date.now());

// tmp now like: "2018-08-21T11:54:50.580Z"

let dateInputFormatted = tmp.toISOString().split('T')[0];

// 0, as split produces: ["2018-08-21", "11:54:50.580Z"]

console.log(dateInputFormatted);

Sie können zwei Prototypen erstellen, um sie wiederzuverwenden:

    Date.prototype.dateToInput = function(){
        return this.getFullYear() + '-' + ('0' + (this.getMonth() + 1)).substr(-2,2) + '-' + ('0' + this.getDate()).substr(-2,2);
    }
    Date.prototype.timeToInput = function(){
        return  ('0' + (this.getHours())).substr(-2,2) + ':' + ('0' + this.getMinutes()).substr(-2,2);
    }

Dann verwenden Sie sie wie folgt:

    var date = new Date();
    document.getElementById('currentDate').value = date.dateToInput();
    document.getElementById('currentTime').value = date.timeToInput();

1647158527 920 Legen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript
keiohtani

var date = new Date();
var dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };
var currentDate = date.toLocaleDateString('ja-JP', dateOptions).replace(/\//gi, '-');
var timeOptions = { hour: '2-digit', minute: '2-digit' };
var currentTime = date.toLocaleTimeString('it-IT', timeOptions);

document.getElementById('currentDate').value = currentDate;
document.getElementById('currentTime').value = currentTime;

Um ein Datum in ein ISO-Datum ohne Uhrzeit umzuwandeln, müssen Sie die verwenden getDate, getMonthetc. Methoden statt immer die ISOString direkt und die Saite manipulieren. Letzteres wird die Zeitzone nicht berücksichtigen, was zu unerwarteten Ergebnissen führen wird.

Hier ist eine Lösung für dasselbe mit ES6.

// Function which returns a minimum of two digits in case the value is less than 10
const getTwoDigits = (value) => value < 10 ? `0${value}` : value;

const formatDate = (date) => {
  const day = getTwoDigits(date.getDate());
  const month = getTwoDigits(date.getMonth() + 1); // add 1 since getMonth returns 0-11 for the months
  const year = date.getFullYear();

  return `${year}-${month}-${day}`;
}

const formatTime = (date) => {
  const hours = getTwoDigits(date.getHours());
  const mins = getTwoDigits(date.getMinutes());

  return `${hours}:${mins}`;
}

const date = new Date();
document.getElementById('currentDate').value = formatDate(date);
document.getElementById('currentTime').value = formatTime(date);
<input type="date" id="currentDate">
<input type="time" id="currentTime">

Dies gibt nun das aktuelle Datum und die Uhrzeit gemäß der aktuellen Zeitzone zurück.

996510cookie-checkLegen Sie Werte im Eingabetyp Datum und Uhrzeit in Javascript fest

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy