Jak w JavaScript mogę sformatować obiekt daty do wydrukowania 10-Aug-2010
?
javascript
date
date-formatting
leora
źródło
źródło
myDate.getDay()
nie zwraca dnia tygodnia, ale lokalizację dnia tygodnia związaną z tygodniem.myDate.getDate()
zwraca bieżący dzień tygodnia .Intl.DateTimeFormat
obiektu. Opisuję to w moim poście: Post . Tworzę rozwiązanie online dla Twojej odpowiedzi przezIntl.DateTimeFormat
Check OnlinetoLocaleDateString
Odpowiedzi:
W przypadku niestandardowych formatów dat należy wyciągnąć komponenty daty (lub godziny) z
DateTimeFormat
obiektu (który jest częścią interfejsu API internacjonalizacji ECMAScript ), a następnie ręcznie utworzyć ciąg z żądanymi ogranicznikami.Aby to zrobić, możesz użyć
DateTimeFormat#formatToParts
:Możesz także wyciągać poszczególne części
DateTimeFormat
za pomocąDateTimeFormat#format
, ale pamiętaj, że podczas korzystania z tej metody, począwszy od marca 2020 r., W implementacji ECMAScript występuje błąd, jeśli chodzi o wiodące zera w minutach i sekundach (ten błąd jest obchodzone przez powyższe podejście).Podczas pracy z datami i godzinami zwykle warto korzystać z biblioteki (np. Moment.js , luxon ) ze względu na wiele ukrytych zawiłości pola.
Należy pamiętać, że interfejs API internacjonalizacji ECMAScript zastosowany w powyższych rozwiązaniach nie jest obsługiwany w IE10 ( 0,03% udziału w globalnym rynku przeglądarek w lutym 2020 r.).
źródło
Date
obiektu, aby to zrobić?Jeśli potrzebujesz nieco mniejszej kontroli nad formatowaniem niż obecnie akceptowana odpowiedź,
Date#toLocaleDateString
możesz użyć jej do stworzenia standardowych renderingów specyficznych dla ustawień regionalnych.locale
Ioptions
argumenty niech aplikacje określić język, którego formatowanie konwencje powinny być stosowane i umożliwiają pewne dostosowanie renderowania.Kluczowe przykłady opcji:
przedstawienie dnia.
Możliwe wartości to „numeryczne”, „2-cyfrowe”.
reprezentacja dnia tygodnia.
Możliwe wartości to „wąski”, „krótki”, „długi”.
reprezentacja roku.
Możliwe wartości to „numeryczne”, „2-cyfrowe”.
reprezentacja miesiąca.
Możliwe wartości to „numeryczne”, „2-cyfrowe”, „wąskie”, „krótkie”, „długie”.
reprezentacja godziny.
Możliwe wartości to „numeryczne”, „2-cyfrowe”.
Możliwe wartości to „numeryczne”, „2-cyfrowe”.
reprezentacja drugiego.
Możliwe wartości to „numeryczne”, 2-cyfrowe ”.
Wszystkie te klucze są opcjonalne. Możesz zmienić liczbę wartości opcji w zależności od swoich wymagań, a to również odzwierciedli obecność każdego terminu.
Uwaga: jeśli chcesz tylko skonfigurować opcje treści, ale nadal używasz bieżących ustawień regionalnych, podanie
null
pierwszego parametru spowoduje błąd. Użyjundefined
zamiast tego.Dla różnych języków:
Możesz użyć więcej opcji językowych.
Na przykład
Możesz także użyć tej
toLocaleString()
metody do tego samego celu. Jedyną różnicą jest to, że ta funkcja zapewnia czas, w którym nie można przekazać żadnych opcji.Bibliografia:
toLocaleString()
toLocaleDateString()
źródło
moment.js
prostego formatu. Na szczęście przeprowadzono dodatkowe wyszukiwanie w Google i okazało się, że działa już natywny interfejs API. Zapisano zewnętrzną zależność. Niesamowite!undefined
jako pierwszego parametru ustawień regionalnych wydaje się arbitralne, możesz zamiast tego przekazać wartość w"default"
celu wykorzystania ustawień regionalnych przeglądarki, zgodnie z dokumentami MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…date.toLocaleDateString("en-US", { day: 'numeric' }) + "-"+ date.toLocaleDateString("en-US", { month: 'short' }) + "-" + date.toLocaleDateString("en-US", { year: 'numeric' })
powinien dać16-Nov-2019
Użyj biblioteki date.format :
zwroty:
dateformat na npm
http://jsfiddle.net/phZr7/1/
źródło
require is not defined
Jeśli trzeba szybko formatować datę przy użyciu zwykłego JavaScript, wykorzystywania
getDate
,getMonth + 1
,getFullYear
,getHours
igetMinutes
:Lub, jeśli potrzebujesz go uzupełnić zerami:
źródło
toLocaleDateString()
Można formatować datę za pomocą zlokalizowanych nazw miesiąc / dzień..toString().padStart(2, '0')
("000" + d.getFullYear()).slice(-4)
String.padStart()
jest dostępny tylko z ECMAScript 2017.Cóż, chciałem przekonwertować dzisiejszą datę na przyjazny ciąg daty MySQL, taki jak 23.06.2012, i użyć tego ciągu jako parametru w jednym z moich zapytań. Znalazłem proste rozwiązanie:
Należy pamiętać, że powyższe rozwiązanie ma nie uwzględniać strefa czasowa offsetowego.
Zamiast tego możesz rozważyć użycie tej funkcji:
To da ci prawidłową datę na wypadek, gdybyś wykonywał ten kod około początku / końca dnia.
źródło
new Date(date + " UTC")
oszukać strefę czasową i wyeliminować linię setMinutes. Człowieku, javascript jest brudnyvar today = new Date().toISOString().slice(0,-14)
:)new Date().toISOString().split('T')[0]
new Date().toISOString().slice(0, 16).replace('T',' ')
wliczając czasNiestandardowa funkcja formatowania:
W przypadku formatów ustalonych wystarczy prosta funkcja. Poniższy przykład generuje międzynarodowy format RRRR-MM-DD:
Format OP można wygenerować w następujący sposób:
Uwaga: Jednak zwykle nie jest dobrym pomysłem rozszerzenie standardowych bibliotek JavaScript (np. Poprzez dodanie tej funkcji do prototypu Date).
Bardziej zaawansowana funkcja może generować konfigurowalne dane wyjściowe na podstawie parametru formatu.
Jeśli napisanie funkcji formatowania jest zbyt długie, istnieje wiele bibliotek wokół niej. Niektóre inne odpowiedzi już je wymieniają. Ale rosnące zależności mają również swoje odpowiedniki.
Standardowe funkcje formatowania ECMAScript:
Od nowszych wersji ECMAScript
Date
klasa ma pewne specyficzne funkcje formatowania:Uwaga: możliwe jest wygenerowanie niestandardowego wyjścia z tych formatowań>
Przykłady fragmentów:
źródło
new Date().toLocaleDateString()
dajemm/dd/yyyy
niedd/mm/yyyy
Popraw że jeden.Jeśli już używasz jQuery UI w swoim projekcie, możesz to zrobić w ten sposób:
Niektóre opcje formatu daty doboru daty do zabawy są dostępne tutaj .
źródło
Myślę, że możesz po prostu użyć niestandardowej metody Date
toLocaleFormat(formatString)
formatString: ciąg formatu w tym samym formacie, jakiego oczekuje
strftime()
funkcja w C.Bibliografia:
źródło
Zwykły JavaScript jest najlepszym wyborem dla małych onetimerów.
Z drugiej strony, jeśli potrzebujesz więcej randek , MomentJS to świetne rozwiązanie.
Na przykład:
źródło
YYYY
chyba że znasz różnicę między :YYYY
i stackoverflow.com/questions/15133549/...yyyy
YYYY
(nieyyyy
) jest rokiem standardowym, aGGGG
(nieYYYY
) jest rokiem opartym na ISO.W nowoczesnych przeglądarkach (*) możesz po prostu to zrobić:
Dane wyjściowe, jeżeli zostaną wykonane dzisiaj (24 stycznia 2016 r.):
(*) Według MDN "Nowoczesne przeglądarki" oznacza Chrome 24+, 29+ Firefox, Internet Explorer 11, EDGE 12+, 15+ i Opera Safari nightly build .
źródło
Trzeba spojrzeć na date.js . Dodaje wiele wygodnych pomocników do pracy z datami, na przykład w twoim przypadku:
Pierwsze kroki: http://www.datejs.com/2007/11/27/getting-started-with-datejs/
źródło
Mogę uzyskać żądany format w jednym wierszu bez użycia bibliotek i metod Date, po prostu regex:
W moich testach działa to niezawodnie w głównych przeglądarkach (Chrome, Safari, Firefox i IE). Jak wskazał @RobG, dane wyjściowe Date.prototype.toString () zależą od implementacji, więc po prostu przetestuj dane wyjściowe, aby się upewnić działa bezpośrednio w silniku JavaScript. Możesz nawet dodać kod, aby przetestować dane wyjściowe ciągu i upewnić się, że pasują one do oczekiwań przed wykonaniem zamiany wyrażenia regularnego.
źródło
console.log(new Date().toString().replace(/\S+\s(\S+)\s(\d+)\s(\d+)\s.*/,'$2-$1-$3'));
@ Sébastien - alternatywnie obsługa wszystkich przeglądarek
Dokumentacja: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
źródło
new Date().toLocaleDateString("en-EN", {month: "short", weekday: "short", day: "2-digit", year: "numeric"})
Powrót"Wed, Sep 06, 2017"
OK , mamy coś o nazwie Intl, które jest bardzo przydatne do formatowania daty w JavaScript w dzisiejszych czasach:
Twoja data jak poniżej:
I zmieniasz na Date, używając nowej Date () jak poniżej:
A teraz możesz sformatować go w dowolny sposób, korzystając z listy ustawień regionalnych, takich jak poniżej:
Jeśli chcesz dokładnie wspomniany powyżej format, możesz:
Rezultatem będzie:
Aby uzyskać więcej informacji, zobacz Intl API i dokumentację Intl.DateTimeFormat .
źródło
Za pomocą szablonu ciągu ECMAScript Edition 6 (ES6 / ES2015):
Jeśli musisz zmienić ograniczniki:
źródło
Pakowane rozwiązanie: Luxon
Jeśli chcesz zastosować jedno rozwiązanie, które pasuje do wszystkich, bardzo polecam użycie Luxon (zmodernizowanej wersji Moment.js ), która również formatuje w wielu lokalizacjach / językach i tonach innych funkcji.
Luxon jest hostowany na stronie Moment.js i opracowany przez programistę Moment.js, ponieważ Moment.js ma ograniczenia, które deweloper chciał rozwiązać, ale nie mógł.
Żeby zainstalować:
npm install luxon
lubyarn add luxon
(odwiedź link, aby uzyskać inne metody instalacji)Przykład:
luxon.DateTime.fromISO('2010-08-10').toFormat('yyyy-LLL-dd');
Wydajność:
Rozwiązanie ręczne
Używając podobnego formatowania jak Moment.js, Class DateTimeFormatter (Java) i Class SimpleDateFormat (Java) , wdrożyłem kompleksowe rozwiązanie, w
formatDate(date, patternStr)
którym kod jest łatwy do odczytania i modyfikacji. Możesz wyświetlić datę, godzinę, AM / PM itp. Zobacz kod, aby uzyskać więcej przykładów.Przykład:
formatDate(new Date(), 'EEEE, MMMM d, yyyy HH:mm:ss:S')
(
formatDate
jest zaimplementowany w poniższym fragmencie kodu)Wydajność:
Wypróbuj kod, klikając „Uruchom fragment kodu”.
Wzory daty i godziny
yy
= 2-cyfrowy rok;yyyy
= pełny rokM
= cyfra miesiąca;MM
= 2-cyfrowy miesiąc;MMM
= nazwa krótkiego miesiąca;MMMM
= pełna nazwa miesiącaEEEE
= pełna nazwa dnia tygodnia;EEE
= krótka nazwa dnia tygodniad
= cyfrowy dzień;dd
= 2-cyfrowy dzieńh
= godziny przed południem / po południu;hh
= 2-cyfrowe godziny am / pm;H
= godziny;HH
= 2-cyfrowe godzinym
= minuty;mm
= 2-cyfrowe minuty;aaa
= AM / PMs
= sekundy;ss
= 2-cyfrowe sekundyS
= milisekundyDziękuję @Gerry za wychowanie Luxona.
źródło
SimpleDateFormat
klasa została wyparta przez lata temujava.time.format.DateTimeFormatter
.Oto kod, który właśnie napisałem, aby obsłużyć formatowanie daty dla projektu, nad którym pracuję. Naśladuje funkcję formatowania daty PHP, która odpowiada moim potrzebom. Możesz go używać, po prostu rozszerza on już istniejący obiekt Date (). To może nie jest najbardziej eleganckie rozwiązanie, ale działa na moje potrzeby.
źródło
Rozwiązanie JavaScript bez użycia zewnętrznych bibliotek:
źródło
Więcej dokumentacji na developer.mozilla.org
źródło
Jeśli używasz interfejsu jQuery w swoim kodzie, istnieje wbudowana funkcja o nazwie
formatDate()
. Używam go w ten sposób, aby sformatować dzisiejszą datę:Możesz zobaczyć wiele innych przykładów formatowania daty w dokumentacji interfejsu użytkownika jQuery .
źródło
Mamy na to wiele rozwiązań, ale myślę, że najlepsze z nich to Moment.js. Dlatego osobiście sugeruję użycie Moment.js do operacji daty i godziny.
źródło
Przydatnym i elastycznym sposobem formatowania DateTimes w JavaScript jest
Intl.DateTimeFormat
:Wynik to:
"12-Oct-2017"
Formaty daty i godziny można dostosować za pomocą argumentu opcji.
Intl.DateTimeFormat
Obiekt jest konstruktor dla obiektów, które umożliwiają języka wrażliwego formatowanie daty i czasu.Składnia
Parametry
lokalizacje
Opcjonalny. Ciąg ze znacznikiem języka BCP 47 lub tablica takich ciągów. Ogólną formę i interpretację argumentu locales można znaleźć na stronie Intl. Dozwolone są następujące klucze rozszerzenia Unicode:
Opcje
Opcjonalny. Obiekt posiadający niektóre lub wszystkie z następujących właściwości:
localeMatcher
Algorytm dopasowywania ustawień regionalnych do użycia. Możliwe wartości to
"lookup"
i"best fit"
; domyślnie jest to"best fit"
. Aby uzyskać informacje o tej opcji, zobacz stronę Intl.strefa czasowa
Strefa czasowa do użycia. Jedyne implementacje wartości, które muszą rozpoznać, to
"UTC"
; wartością domyślną jest domyślna strefa czasowa środowiska wykonawczego. Implementacje mogą także rozpoznawać nazwy strefy czasowej bazy danych stref czasowych IANA, takie jak"Asia/Shanghai"
,"Asia/Kolkata"
,"America/New_York"
.godzina 12
Określa, czy użyć 12-godzinnego czasu (w przeciwieństwie do 24-godzinnego). Możliwe wartości to
true
ifalse
; wartość domyślna zależy od ustawień regionalnych.formatMatcher
Używany algorytm dopasowywania formatu. Możliwe wartości to
"basic"
i"best fit"
; domyślnie jest to"best fit"
. Informacje o korzystaniu z tej właściwości znajdują się w poniższych akapitach.Poniższe właściwości opisują składniki daty i godziny, które mają być użyte w sformatowanym wyjściu, oraz ich pożądane reprezentacje. Implementacje są wymagane do obsługi co najmniej następujących podzbiorów:
Implementacje mogą obsługiwać inne podzbiory, a żądania będą negocjowane ze wszystkimi dostępnymi kombinacjami podzbiorów w celu znalezienia najlepszego dopasowania. Do tej negocjacji dostępne są dwa algorytmy wybrane przez właściwość formatMatcher: W pełni określony
"basic"
algorytm i zależny od implementacji algorytm „najlepszego dopasowania”.dzień powszedni
Przedstawienie dnia tygodnia. Możliwe są następujące wartości
"narrow"
,"short"
,"long"
.era
Reprezentacja epoki. Możliwe są następujące wartości
"narrow"
,"short"
,"long"
.rok
Przedstawienie roku. Możliwe są następujące wartości
"numeric"
,"2-digit"
.miesiąc
Reprezentacja miesiąca. Możliwe są następujące wartości
"numeric"
,"2-digit"
,"narrow"
,"short"
,"long"
.dzień
Reprezentacja dnia. Możliwe są następujące wartości
"numeric"
,"2-digit"
.godzina
Reprezentacja godziny. Możliwe są następujące wartości
"numeric"
,"2-digit"
.minuta
Reprezentacja minuty. Możliwe są następujące wartości
"numeric"
,"2-digit"
.druga
Reprezentacja drugiego. Możliwe są następujące wartości
"numeric"
,"2-digit"
.timeZoneName
Reprezentacja nazwy strefy czasowej. Możliwe są następujące wartości
"short"
,"long"
. Wartość domyślna dla każdej właściwości komponentu data-czas jest niezdefiniowana, ale jeśli wszystkie właściwości komponentu są niezdefiniowane, zakłada się, że rok, miesiąc i dzień są"numeric"
.Sprawdź online
Więcej szczegółów
źródło
Może to pomóc w rozwiązaniu problemu:
źródło
d.toLocaleDateString('en-US', options);
jeśli jesteś w USA.Tak zaimplementowałem moje wtyczki npm
źródło
March
stanie się3arch
z tym kodem.'M'
celuformat = format.replace("M(?!M)", (dt.getMonth()+1).toString());
i umieścić go powyżej linii z'MMMM'
źródło
Sugar.js ma doskonałe rozszerzenia do obiektu Date, w tym metodę Date.format .
Przykłady z dokumentacji:
źródło
Dla każdego, kto szuka naprawdę prostego rozwiązania ES6 do kopiowania, wklejania i przyjmowania:
źródło
Od 2019 r. Wygląda na to, że możesz dostać się doLocaleDateString, aby zwrócić tylko niektóre części, a następnie możesz dołączyć do nich, jak chcesz:
źródło
Powinieneś rzucić okiem na DayJs To remake momentów, ale modułowa architektura zorientowana na tak lżejszą.
Szybka 2kB alternatywa dla Moment.js z tym samym nowoczesnym API
źródło
Aby uzyskać „10 sierpnia 2010”, spróbuj:
Aby uzyskać informacje na temat obsługi przeglądarki, zobacz toLocaleDateString .
źródło