Do tej pory JavaScript dodaje wiodące zera


437

Stworzyłem ten skrypt, aby obliczyć datę z 10-dniowym wyprzedzeniem w formacie dd / mm / rrrr:

var MyDate = new Date();
var MyDateString = new Date();
MyDate.setDate(MyDate.getDate()+10);
MyDateString = MyDate.getDate() + '/' + (MyDate.getMonth()+1) + '/' + MyDate.getFullYear();

Potrzebuję, aby data pojawiła się z zerami wiodącymi w komponencie dnia i miesiąca, poprzez dodanie tych reguł do skryptu. Nie mogę sprawić, żeby zadziałało.

if (MyDate.getMonth < 10)getMonth = '0' + getMonth;

i

if (MyDate.getDate <10)get.Date = '0' + getDate;

Gdyby ktoś mógł mi pokazać, gdzie wstawić je do skryptu, byłbym bardzo wdzięczny.


6
Jako dobrą konwencję powinieneś pisać małe litery pierwszego znaku w nazwach zmiennych i rezerwować obudowę wielbłąda na obiekty / prototypy.
zykadelic

Jeśli format RRRR-MM-DD jest akceptowalny, byłaby to bardzo dobra odpowiedź: stackoverflow.com/a/28431880/1717535
Fabien Snauwaert

Odpowiedzi:


1352

Spróbuj tego: http://jsfiddle.net/xA5B7/

var MyDate = new Date();
var MyDateString;

MyDate.setDate(MyDate.getDate() + 20);

MyDateString = ('0' + MyDate.getDate()).slice(-2) + '/'
             + ('0' + (MyDate.getMonth()+1)).slice(-2) + '/'
             + MyDate.getFullYear();

EDYTOWAĆ:

Aby to wyjaśnić, .slice(-2)podaje nam dwa ostatnie znaki ciągu.

Bez względu na wszystko, możemy dodać "0"do dnia lub miesiąca i po prostu poprosić o dwa ostatnie, ponieważ zawsze są to dwa, których chcemy.

Więc jeśli MyDate.getMonth()zwroty 9będą:

("0" + "9") // Giving us "09"

więc dodanie .slice(-2)tego daje nam ostatnie dwa znaki, które są:

("0" + "9").slice(-2)
"09"

Ale jeśli MyDate.getMonth()powróci 10, będzie to:

("0" + "10") // Giving us "010"

więc dodanie .slice(-2)daje nam dwa ostatnie znaki lub:

("0" + "10").slice(-2)
"10"

27
Rozwidlony - format daty RRRR-MM-DD jsfiddle.net/j6qJp/1 Może to być przydatne dla kogoś. Dzięki
tomexx,

3
Czy ktoś może wyjaśnić, dlaczego jest to lepsze niż odpowiedź podana poniżej przez @Aleross? Nie jest od razu jasne, co robi w porównaniu z funkcją padu, która jest wyraźnie wyraźna.
claudio

2
Nie wspominając już o tym, że dzisiaj ten przykład dał mi 26.06.2014 zamiast 06.06.2014
DazManCat

3
@DazManCat: Tak właśnie powinno być. Kod zaczyna się od dodania 20 dni do bieżącej daty. MyDate.setDate(MyDate.getDate() + 20);
ciasteczkowy potwór

3
@ n00b i @Pilil Cooper, nie odrywając się od dyskusji na temat tajników rutynowych procedur JavaScript, stwierdziłem, że slice()technika w zaakceptowanej odpowiedzi jest o 1/10 sekundy szybsza niż technika @Aleross pad()na 1 milion iteracji. jsFiddle . „zapłać pieniądze, wybierz coś”.
Karl

105

Oto przykład z dokumentacji obiektu Date w sieci Mozilla Developer Network przy użyciu niestandardowej funkcji „pad”, bez konieczności rozszerzania prototypu JavaScript w języku Number. Przydatną funkcją, którą dają jako przykład, jest

function pad(n){return n<10 ? '0'+n : n}

A poniżej jest używany w kontekście.

/* use a function for the exact format desired... */
function ISODateString(d){
    function pad(n){return n<10 ? '0'+n : n}
    return d.getUTCFullYear()+'-'
    + pad(d.getUTCMonth()+1)+'-'
    + pad(d.getUTCDate())+'T'
    + pad(d.getUTCHours())+':'
    + pad(d.getUTCMinutes())+':'
    + pad(d.getUTCSeconds())+'Z'
}

var d = new Date();
console.log(ISODateString(d)); // prints something like 2009-09-28T19:03:12Z

3
Bardzo fajny sposób na zrobienie tego. Myślę, że zaakceptowana odpowiedź jest naprawdę fajna, ale moim zdaniem jest jeszcze czystsza
Binke

1
może to prowadzić do nieoczekiwanych błędów, ponieważ wyświetla ciąg znaków dla <10 i liczbę dla> = 10
David Fregoli

@DavidFregoli, wszystkie te funkcje od daty do łańcucha zwracają ciąg, więc jeśli wprowadzisz ciąg, padwyprowadza tylko ciągi.
Rohmer,

56

Nowym nowoczesnym sposobem na to jest użycie toLocaleDateString, ponieważ nie tylko pozwala on sformatować datę z odpowiednią lokalizacją, ale nawet przekazać opcje formatowania, aby zarchiwizować pożądany wynik:

var date = new Date(2018, 2, 1);
var result = date.toLocaleDateString("en-GB", { // you can skip the first argument
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
});
console.log(result);

Pominięcie pierwszego argumentu spowoduje wykrycie języka przeglądarki. Możesz też użyć opcji 2-digitna rok.

Jeśli nie potrzebujesz obsługiwać starych przeglądarek, takich jak IE10, jest to najczystszy sposób na wykonanie zadania. IE10 i niższe wersje nie zrozumieją argumentu opcji.

Uwaga: Ponadto istnieje możliwość toLocaleTimeString, jeśli chcesz zlokalizować lub sformatować godzinę daty.


3
Właśnie tego szukałem, dzięki. Więcej informacji o opcjach dostępnych dla toLocaleDateString tutaj: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
JoseLinares

1
@JoseLinares Cześć, dzięki za przywrócenie tego linku w ciągu ostatnich dni. Właśnie postanowiłem poprawić swoją odpowiedź, aby rozwiązanie było bardziej atrakcyjne dla typowych scenariuszy, ponieważ można pominąć pierwszy argument, a IE10 nie jest już istotny. Mając to na uwadze, dołączyłem twój link do mojej odpowiedzi.
Martin Braun,

@modiX, przepraszam, to był mój błąd w kodzie i źle podjąłem opis, tak ustawienia narodowe (pierwsza zmienna) są opcjonalne .
Kanhaiya lal

@Kanhaiyalal Nie martw się, błędy mogą się zdarzyć. Byłem tylko zaskoczony, że 2 z 3 recenzentów również zaakceptowało niewłaściwą edycję.
Martin Braun

51

Możesz zdefiniować funkcję „str_pad” (jak w php):

function str_pad(n) {
    return String("00" + n).slice(-2);
}

9
Wystarczy „0” zamiast „00”
David Fregoli

Jak dotąd najlepsza odpowiedź.
Lucas Andrade

30

Dla was, ludzie z przyszłości (ECMAScript 2017 i nie tylko)

Rozwiązanie

"use strict"

const today = new Date()

const year = today.getFullYear()

const month = `${today.getMonth() + 1}`.padStart(2, "0")

const day = `${today.getDate()}`.padStart(2, "0")

const stringDate = [day, month, year].join("/") // 13/12/2017

Wyjaśnienie

String.prototype.padStart(targetLength[, padString])dodaje jak najwięcej padStringw String.prototypecelu tak, że nowa długość tarczy jest targetLength.

Przykład

"use strict"

let month = "9"

month = month.padStart(2, "0") // "09"

let byte = "00000100"

byte = byte.padStart(8, "0") // "00000100"

4
Jest to część ES2017 lub ES8. Dlatego błędnie jest mówić „ES6 +”, ponieważ nie jest to część ES6 i ES7.
Noel Llevares

1
Technicznie powinno tak być, .padStart(2, '0')ponieważ drugi parametr jest łańcuchem, choć prawdopodobnie nie będzie to miało znaczenia, chyba że użyjesz TypeScript
bmaupin

Masz rację, zmienię moją odpowiedź.
Amin NAIRI

11
Number.prototype.padZero= function(len){
 var s= String(this), c= '0';
 len= len || 2;
 while(s.length < len) s= c + s;
 return s;
}

//w użyciu:

(function(){
 var myDate= new Date(), myDateString;
 myDate.setDate(myDate.getDate()+10);

 myDateString= [myDate.getDate().padZero(),
 (myDate.getMonth()+1).padZero(),
 myDate.getFullYear()].join('/');

 alert(myDateString);
})()

/*  value: (String)
09/09/2010
*/

10

Znalazłem najkrótszy sposób, aby to zrobić:

 MyDateString.replace(/(^|\D)(\d)(?!\d)/g, '$10$2');

doda wiodące zera do wszystkich samotnych, pojedynczych cyfr


Podoba mi się to rozwiązanie, czy możesz trochę wyjaśnić, co się tam dzieje?
Gobliins,

7
var MyDate = new Date();
var MyDateString = '';
MyDate.setDate(MyDate.getDate());
var tempoMonth = (MyDate.getMonth()+1);
var tempoDate = (MyDate.getDate());
if (tempoMonth < 10) tempoMonth = '0' + tempoMonth;
if (tempoDate < 10) tempoDate = '0' + tempoDate;
MyDateString = tempoDate + '/' + tempoMonth + '/' + MyDate.getFullYear();

5

Możesz użyć operatora trójskładnikowego, aby sformatować datę jak instrukcję „jeśli”.

Na przykład:

var MyDate = new Date();
MyDate.setDate(MyDate.getDate()+10);
var MyDateString = (MyDate.getDate() < 10 ? '0' + MyDate.getDate() : MyDate.getDate()) + '/' + ((d.getMonth()+1) < 10 ? '0' + (d.getMonth()+1) : (d.getMonth()+1)) + '/' + MyDate.getFullYear();

Więc

(MyDate.getDate() < 10 ? '0' + MyDate.getDate() : MyDate.getDate())

byłoby podobne do instrukcji if, gdzie jeśli getDate () zwraca wartość mniejszą niż 10, to zwraca „0” + datę lub zwraca datę, jeśli jest większa niż 10 (ponieważ nie musimy dodawać wiodącego 0). To samo dla miesiąca.

Edycja: Zapomniałem, że getMonth zaczyna się od 0, więc dodał +1, aby to uwzględnić. Oczywiście możesz również powiedzieć d.getMonth () <9:, ale pomyślałem, że użycie +1 pomogłoby ułatwić zrozumienie.


dzięki za wyjaśnienie +1
Bryan A

5

Istnieje inne podejście do rozwiązania tego problemu, slicew JavaScript.

var d = new Date();
var datestring = d.getFullYear() + "-" + ("0"+(d.getMonth()+1)).slice(-2) +"-"+("0" + d.getDate()).slice(-2);

datestringdata powrotu z formatu zgodnie z oczekiwaniami: 01.09.2019

innym podejściem jest użycie dateformatbiblioteki: https://github.com/felixge/node-dateformat


Uważaj na pisownię „JavaScript”.
Basil Bourque,

3

Ułatw sobie życie i użyj Moment.js przykładowego kodu:

var beginDateTime = moment()
  .format('DD-MM-YYYY HH:mm')
  .toString();

// Now will print 30-06-2015 17:55
console.log(beginDateTime);

4
moment.js -> niezbyt dobre rozwiązanie, bo jego 19,8 tys. kodu w porównaniu z rozwiązaniami o wielkości 0,3 tys.
MarcoZen

3
function formatDate(jsDate){
  // add leading zeroes to jsDate when days or months are < 10.. 
  // i.e.
  //     formatDate(new Date("1/3/2013")); 
  // returns
  //    "01/03/2103"
  ////////////////////
  return (jsDate.getDate()<10?("0"+jsDate.getDate()):jsDate.getDate()) + "/" + 
      ((jsDate.getMonth()+1)<10?("0"+(jsDate.getMonth()+1)):(jsDate.getMonth()+1)) + "/" + 
      jsDate.getFullYear();
}

3

Możesz podać opcje jako parametr formatowania daty. Pierwszy parametr dotyczy ustawień regionalnych, które mogą nie być potrzebne, a drugi dotyczy opcji. Aby uzyskać więcej informacji, odwiedź https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

var date = new Date(Date.UTC(2012, 1, 1, 3, 0, 0));
var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString(undefined,options));

1
Dziękuję za sugestie.
MJ55,

2

Zawarłem poprawną odpowiedź na to pytanie w funkcji, która może dodawać wiele wiodących zer, ale domyślnie dodaje 1 zero.

function zeroFill(nr, depth){
  depth = (depth === undefined)? 1 : depth;

  var zero = "0";
  for (var i = 0; i < depth; ++i) {
    zero += "0";
  }

  return (zero + nr).slice(-(depth + 1));
}

w przypadku pracy tylko z cyframi i nie więcej niż 2 cyframi jest to również podejście:

function zeroFill(i) {
    return (i < 10 ? '0' : '') + i
  }

1

Inna opcja, wykorzystująca wbudowaną funkcję wypełniania (ale skutkuje dość długim kodem!):

myDateString = myDate.getDate().toLocaleString('en-US', {minimumIntegerDigits: 2})
  + '/' + (myDate.getMonth()+1).toLocaleString('en-US', {minimumIntegerDigits: 2})
  + '/' + myDate.getFullYear();

// '12/06/2017'

I jeszcze inne, manipulowanie ciągami za pomocą wyrażeń regularnych:

var myDateString = myDate.toISOString().replace(/T.*/, '').replace(/-/g, '/');

// '2017/06/12'

Należy jednak pamiętać, że rok pokaże się na początku, a dzień na końcu .


najbardziej mi się podobało: myDate.getDate (). toLocaleString ('en-US', {minimumIntegerDigits: 2})
Max Alexander Hanna

1

Dodając do odpowiedzi @modiX, to działa ... NIE ZATRZYMUJ SIĘ, że jest puste

today.toLocaleDateString("default", {year: "numeric", month: "2-digit", day: "2-digit"})

1

Oto bardzo prosty przykład, jak poradzić sobie z tą sytuacją.

var mydate = new Date();

var month = (mydate.getMonth().toString().length < 2 ? "0"+mydate.getMonth().toString() :mydate.getMonth());

var date = (mydate.getDate().toString().length < 2 ? "0"+mydate.getDate().toString() :mydate.getDate());

var year = mydate.getFullYear();

console.log("Format Y-m-d : ",year+"-"+month+"-" + date);

console.log("Format Y/m/d : ",year+"/"+month+"/" + date);


0

Poniższe ma na celu wyodrębnienie konfiguracji, podłączenie Date.protoypei zastosowanie konfiguracji.

Użyłem Arraydo przechowywania fragmentów czasu, a gdy push() thisjako Dateobiekt zwraca mi długość do iteracji. Kiedy skończę, mogę używać joinna returnwartości.

Wydaje się, że działa dość szybko: 0,016 ms

// Date protoype
Date.prototype.formatTime = function (options) {
    var i = 0,
        time = [],
        len = time.push(this.getHours(), this.getMinutes(), this.getSeconds());

    for (; i < len; i += 1) {
        var tick = time[i];
        time[i] = tick < 10 ? options.pad + tick : tick;
    }

    return time.join(options.separator);
};

// Setup output
var cfg = {
    fieldClock: "#fieldClock",
    options: {
        pad: "0",
        separator: ":",
        tick: 1000
    }
};

// Define functionality
function startTime() {
    var clock = $(cfg.fieldClock),
        now = new Date().formatTime(cfg.options);

    clock.val(now);
    setTimeout(startTime, cfg.options.tick);
}

// Run once
startTime();

demo: http://jsfiddle.net/tive/U4MZ3/


0

Chciałbym utworzyć własnego niestandardowego pomocnika daty, który wygląda następująco:

var DateHelper = {
    addDays : function(aDate, numberOfDays) {
        aDate.setDate(aDate.getDate() + numberOfDays); // Add numberOfDays
        return aDate;                                  // Return the date
    },
    format : function format(date) {
        return [
           ("0" + date.getDate()).slice(-2),           // Get day and pad it with zeroes
           ("0" + (date.getMonth()+1)).slice(-2),      // Get month and pad it with zeroes
           date.getFullYear()                          // Get full year
        ].join('/');                                   // Glue the pieces together
    }
}

// With this helper, you can now just use one line of readable code to :
// ---------------------------------------------------------------------
// 1. Get the current date
// 2. Add 20 days
// 3. Format it
// 4. Output it
// ---------------------------------------------------------------------
document.body.innerHTML = DateHelper.format(DateHelper.addDays(new Date(), 20));

(zobacz także to skrzypce )


0

Dodaj dopełnienie, aby umożliwić wiodące zero - w razie potrzeby - i konkatenuj, używając wybranego separatora jako łańcucha.

Number.prototype.padLeft = function(base,chr){
        var  len = (String(base || 10).length - String(this).length)+1;
        return len > 0? new Array(len).join(chr || '0')+this : this;
    }

var d = new Date(my_date);
var dformatted = [(d.getMonth()+1).padLeft(), d.getDate().padLeft(), d.getFullYear()].join('/');

0

Jak sugeruje @John Henckel, rozpoczęcie korzystania z metody toISOString () ułatwia sprawę

const dateString = new Date().toISOString().split('-');
const year = dateString[0];
const month = dateString[1];
const day = dateString[2].split('T')[0];

console.log(`${year}-${month}-${day}`);


0
 let date = new Date();
 let dd = date.getDate();//day of month

 let mm = date.getMonth();// month
 let yyyy = date.getFullYear();//day of week
 if (dd < 10) {//if less then 10 add a leading zero
     dd = "0" + dd;
   }
 if (mm < 10) {
    mm = "0" + mm;//if less then 10 add a leading zero
  }

możesz także krótko opisać, co próbujesz.
Shiv Kumar Baghel

0

wypróbuj to dla podstawowej funkcji, nie wymaga bibliotek

Date.prototype.CustomformatDate = function() {
 var tmp = new Date(this.valueOf());
 var mm = tmp.getMonth() + 1;
 if (mm < 10) mm = "0" + mm;
 var dd = tmp.getDate();
 if (dd < 10) dd = "0" + dd;
 return mm + "/" + dd + "/" + tmp.getFullYear();
};

0
function pad(value) {
    return value.tostring().padstart(2, 0);
}

let d = new date();
console.log(d);
console.log(`${d.getfullyear()}-${pad(d.getmonth() + 1)}-${pad(d.getdate())}t${pad(d.gethours())}:${pad(d.getminutes())}:${pad(d.getseconds())}`);

2
Chociaż ten kod może odpowiedzieć na pytanie, zapewnienie dodatkowego kontekstu dotyczącego tego, jak i / lub dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi.
leopal

0

Możesz użyć String.slice (), która wyodrębnia sekcję ciągu i zwraca go jako nowy ciąg, bez modyfikowania oryginalnego ciągu:

const currentDate = new Date().toISOString().slice(0, 10) // 2020-04-16

Możesz też użyć biblioteki lib, takiej jak Moment.js, aby sformatować datę:

const moment = require("moment")
const currentDate = moment().format("YYYY-MM-DD") // 2020-04-16
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.