ฉันจะใช้. toLocaleTimeString () โดยไม่แสดงวินาทีได้อย่างไร


163

ฉันกำลังพยายามแสดงเวลาของผู้ใช้โดยไม่แสดงวินาที มีวิธีที่ฉันสามารถทำได้โดยใช้. toLocaleTimeString () ของ Javascript หรือไม่?

ทำสิ่งนี้:

var date = new Date();
var string = date.toLocaleTimeString();

จะแสดงเวลาของผู้ใช้กับทุกหน่วยเช่นขณะนี้จะแสดงเวลา 15:39:15 น. ฉันสามารถแสดงสตริงเดียวกันนี้ได้โดยไม่ต้องรอวินาทีหรือไม่? (เช่น 3:39 PM)

คำตอบ:


317

คุณสามารถตั้งค่าตัวเลือกได้ตามหน้านี้ที่คุณสามารถตั้งค่าเพื่อกำจัดวินาทีสิ่งที่เป็นเช่นนี้

var dateWithouthSecond = new Date();
dateWithouthSecond.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

สนับสนุนโดย Firefox, Chrome, IE9 + และ Opera ลองใช้บนคอนโซลเว็บเบราว์เซอร์ของคุณ


2
ขอบคุณฉันค้นหาชั่วโมงสำหรับคำตอบนี้
MustafaP

5
FYI hour: "2-digit"ไม่ทำงานสำหรับฉันใน Chrome 42 หรือ FF 37 --- d = new Date(1429524912495).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true})ส่งคืน"6:15 AM"ทั้งสองอย่าง
user9645

16
ใช้[]เพื่อออกจากสถานที่เฉพาะ ด้วยวิธีนี้คุณจะอยู่กับสถานที่ของผู้ใช้:toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}
Hafenkranich

12
ทำงานใน chrome 51:new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false}); "17:08"
rofrol

1
ใช่เป็นเวลา 4 ปีแล้วตั้งแต่ฉันโพสต์ที่นี่สิ่งต่าง ๆ มีการเปลี่ยนแปลง ไม่น่าแปลกใจที่คุณไม่จำเป็นต้องระบุอีกต่อไป ขอแสดงความนับถือ
CJLopez

10

สิ่งนี้ใช้ได้กับฉัน:

var date = new Date();
var string = date.toLocaleTimeString([], {timeStyle: 'short'});

6
เป็นที่น่าสังเกตว่าตั้งแต่เดือนมีนาคม 2020 ตัวเลือกเวลาสไตล์ได้รับการสนับสนุนเฉพาะใน Chrome และ Operaและไม่ใช่ใน Firefox, Edge / IE และ Safari หากคุณต้องการความครอบคลุมในวงกว้างมันน่าจะดีกว่าถ้าคุณใช้ตัวเลือกชั่วโมงและนาทีในตอนนี้
buckthorn

สำหรับ Safari / iOS จะใช้งานได้ในสหรัฐอเมริกาที่คุณมี AM / PM เท่านั้น en-US จะแสดงผล 15:16 น. สถานที่อื่นจะแสดงเวลา 15:16:00 น.
PassKit

8

ค่าที่ส่งคืนโดยDate.prototype.toLocaleStringขึ้นอยู่กับการนำไปใช้ดังนั้นคุณจะได้รับสิ่งที่คุณได้รับ คุณสามารถลองแยกสตริงเพื่อลบวินาที แต่อาจแตกต่างกันไปในเบราว์เซอร์ที่แตกต่างกันดังนั้นคุณจึงจำเป็นต้องตั้งค่าเผื่อสำหรับทุกเบราว์เซอร์ที่ใช้งานอยู่

การสร้างรูปแบบที่ชัดเจนของคุณเองนั้นไม่ใช่เรื่องยากโดยใช้วิธี Date ตัวอย่างเช่น:

function formatTimeHHMMA(d) {
  function z(n){return (n<10?'0':'')+n}
  var h = d.getHours();
  return (h%12 || 12) + ':' + z(d.getMinutes()) + ' ' + (h<12? 'AM' :'PM');
}

7
อย่าแยกสตริงที่ส่งคืนจาก toLocaleTimeString ฉันได้รับสองสามปีโดยไม่มีปัญหาใด ๆ แต่วันนี้ฉันสังเกตเห็นว่ามันไม่ทำงาน ปรากฎว่ามีอักขระยูนิโค้ดพิเศษ (เช่น 0x200E, เครื่องหมายจากซ้ายไปขวา) ซึ่งไม่สามารถประมวลผลโดย Date.parse ไม่เคยเห็นว่ามา ดังนั้นฉันจะหยุดใช้ฟังก์ชั่นสถานที่ทั้งหมดและเพียงแค่สร้างสตริงที่จัดรูปแบบเวลาของฉันเอง นั่นจะช่วยฉันจากสิ่งประหลาดใจชั่วร้ายเช่นนี้
Gabe Halsmer

@ GabeHalsmer - ฉันไม่แนะนำให้อนุญาต Date.parse แยกสตริง (เช่นย่อหน้าสุดท้ายที่นี่ ) แต่นั่นไม่เกี่ยวข้องกับที่นี่มันไม่ได้กล่าวถึงเลยคุณมีความเข้าใจผิดในคำตอบถ้าคุณคิดว่ามันเป็นเช่นนั้น (เช่น " คุณสามารถลองแยกวิเคราะห์ ... ")
RobG

ลิงค์ที่ดี ดังนั้นโดยสรุปแล้วผู้คนต้องทำการแยกวิเคราะห์ด้วยตัวเองหรือวิธี ToString ของตัวเองเพราะพื้นฐาน Date.prototype.toLocalString และ Date.parse นั้นไม่เข้ากัน การสร้าง ToString นั้นเป็นวิธีที่ง่ายที่สุดที่ฉันจะทำได้ แต่คุณได้ดำเนินการคุณแยกวิเคราะห์ ดังนั้นจะทำงานสำหรับคน สิ่งสำคัญที่ฉันต้องการให้ทุกคนทราบคือ Date.parse ไม่ทำงานกับ toLocaleString และฉันใช้เวลาหลายชั่วโมงในการติดตามความไม่ลงรอยกันนี้เพราะความละเอียดอ่อน เครื่องหมายจากซ้ายไปขวาจะมองไม่เห็นในดีบักเกอร์ของ Visual Studio
Gabe Halsmer

เยี่ยมอีกคะแนนโหวตผิด ๆ ไม่น่าแปลกใจที่ผู้คนไม่ต้องการใส่ชื่อให้กับพวกเขา
RobG

สำหรับการจัดเก็บและการขนส่งวันที่เป็นรูปแบบอื่น toISOString และ getTime อาจจัดรูปแบบวันที่ที่ปลอดภัยที่สุดสำหรับการแยกวิเคราะห์ใหม่ ฉันไม่ได้ตระหนักถึงการใช้งาน JS ใด ๆ ในทศวรรษที่ผ่านมาที่ไม่ได้จัดการ UTC รุ่นมิลลิวินาทีที่ส่งคืนจาก getTime และค่า ISO ยังอยู่ในรายละเอียดในรูปแบบวันที่แยกวิเคราะห์สำหรับเวลา loooonnng แต่ไม่เคยอ่านวันกลับจากองค์ประกอบ UI ที่ควรมาจากเลเยอร์แอปของคุณ และทดสอบใน Safari เสมอ พวกเขาเป็นกระตุกระดับ IE6 เกี่ยวกับวัตถุวันที่
Erik Reppen


0

ฉันเคยค้นหาวิธีแก้ไขปัญหานี้นี่คือสิ่งที่ฉันมาในที่สุด:

function getTimeStr() {
    var dt = new Date();
    var d = dt.toLocaleDateString();
    var t = dt.toLocaleTimeString();
    t = t.replace(/\u200E/g, '');
    t = t.replace(/^([^\d]*\d{1,2}:\d{1,2}):\d{1,2}([^\d]*)$/, '$1$2');
    var result = d + ' ' + t;
    return result;
}

คุณสามารถลองได้ที่นี่: http://jsfiddle.net/B5Zrx/

\ u200E เป็นอักขระการจัดรูปแบบบางตัวที่ฉันเคยเห็นใน IE บางเวอร์ชัน (มันเป็นยูนิโค้ดซ้ายไปขวา)

ฉันคิดว่าถ้าเวลาที่จัดรูปแบบมีบางอย่างเช่น "XX: XX: XX" มันต้องใช้เวลาเป็นวินาทีและฉันจะลบส่วนสุดท้ายถ้าฉันไม่พบรูปแบบนี้จะไม่มีอะไรเปลี่ยนแปลง ค่อนข้างปลอดภัย แต่มีความเสี่ยงที่จะทิ้งวินาทีไว้ในบางสถานการณ์ที่แปลก

ฉันหวังว่าจะไม่มีสถานที่ที่จะเปลี่ยนลำดับของเวลาส่วนที่จัดรูปแบบ (เช่นทำให้มันเป็น ss: mm: hh) เครื่องหมายจากซ้ายไปขวาทำให้ฉันรู้สึกประหม่าเล็กน้อยเกี่ยวกับเรื่องนั้นนั่นคือสาเหตุที่ฉันไม่ลบเครื่องหมายจากขวาไปซ้าย (\ u202E) - ฉันไม่ต้องการพบการแข่งขันในกรณีนี้และปล่อยให้ เวลาที่จัดรูปแบบด้วยวินาทีในกรณีเช่นนี้


1
+1 คุณเป็นคนเดียวที่ตอบคำถามถูกต้อง ขอบคุณเพื่อน
mate64

1
สิ่งนี้ทำให้มีข้อสันนิษฐานมากมายเกี่ยวกับtoLocaleTimeString()ผลตอบแทนที่อาจไม่เป็นจริงสำหรับทุกสถานที่
AJ Richardson

0

คุณสามารถลองสิ่งนี้ซึ่งใช้ได้กับความต้องการของฉัน

var d = new Date();
d.toLocaleTimeString().replace(/:\d{2}\s/,' ');

หรือ

d.toLocaleString().replace(/:\d{2}\s/,' ');

6
นี้จะไม่ทำงานเพราะภาษาอื่น ๆ :อาจใช้คั่นที่แตกต่างกันอย่างสิ้นเชิงกว่า
Jon Koops

-2

นี่คือฟังก์ชั่นที่จะทำโดยมีความคิดเห็นที่อธิบาย:

  function displayNiceTime(date){
    // getHours returns the hours in local time zone from 0 to 23
    var hours = date.getHours()
    // getMinutes returns the minutes in local time zone from 0 to 59
    var minutes =  date.getMinutes()
    var meridiem = " AM"

    // convert to 12-hour time format
    if (hours > 12) {
      hours = hours - 12
      meridiem = ' PM'
    }
    else if (hours === 0){
      hours = 12
    }

    // minutes should always be two digits long
    if (minutes < 10) {
      minutes = "0" + minutes.toString()
    }
    return hours + ':' + minutes + meridiem
  }

เนื่องจากตามที่คนอื่น ๆ ระบุไว้ toLocaleTimeString () สามารถใช้งานได้แตกต่างกันในเบราว์เซอร์ที่ต่างกันวิธีนี้ให้การควบคุมที่ดีกว่า

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวัตถุวันที่ของ Javascript นี่เป็นแหล่งข้อมูลที่ดี: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date


-2

ฉันคิดว่าคำถามดั้งเดิมสามารถตอบได้อย่างง่ายดายด้วยบางสิ่งที่ถูกมองข้าม: การแบ่งสตริงแบบง่าย เวลาที่ส่งคืนเป็นสตริงข้อความเพียงแค่แยกมันในตัวคั่น ":" และประกอบสตริงตามที่คุณต้องการ ไม่มีปลั๊กอินไม่มีสคริปต์ที่ซับซ้อน และที่นี่คุณไป:

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() {
    var d = new Date();
    currentNow = d.toLocaleTimeString();
    nowArray = currentNow.split(':');
    filteredNow = nowArray[0]+':'+nowArray[1];
    document.getElementById("demo").innerHTML = filteredNow;
}

-3

แม้ว่านี่จะเป็นคำถามที่เก่ากว่า แต่ฉันก็มีสิ่งเดียวกันกับตัวเองเมื่อเร็ว ๆ นี้และมีวิธีแก้ปัญหาที่ง่ายกว่าโดยใช้นิพจน์ทั่วไปและฟังก์ชั่นแทนที่สตริงเป็นทางเลือกอื่น (ไม่ต้องใช้ไลบรารี js ภายนอกหรือพึ่ง ECMAScript Internalization API) :

var d = new Date();
var localeTime = d.toLocaleTimeString();
var localeTimeSansSeconds = localeTime.replace(/:(\d{2}) (?=[AP]M)/, " ");

วิธีนี้ใช้ regex look-ahead เพื่อดึงจุดสิ้นสุด: ss AM / PM ของสตริงและแทนที่: ส่วน ss ด้วยช่องว่างส่งคืนส่วนที่เหลือของสตริงที่ไม่มีการแตะ (ตามตัวอักษรพูดว่า "ค้นหาโคลอนที่มีตัวเลขสองหลักและเว้นวรรคที่ตามด้วย AM หรือ PM และแทนที่โคลอนสองหลักและส่วนที่เว้นวรรคด้วยช่องว่าง)

การแสดงออก / วิธีการนี้ใช้งานได้สำหรับสถานที่ตั้งในสหรัฐอเมริกาและในสหรัฐอเมริกาเท่านั้น หากคุณต้องการผลลัพธ์ที่คล้ายกันด้วยพูดภาษาอังกฤษแบบอังกฤษ (en-GB) ซึ่งไม่ได้ใช้ AM / PM จำเป็นต้องใช้นิพจน์ทั่วไปอื่น

จากผลลัพธ์ตัวอย่างของผู้ถามดั้งเดิมฉันคิดว่าพวกเขาเกี่ยวข้องกับผู้ชมชาวอเมริกันเป็นหลักและสคีมาเวลาในสหรัฐอเมริกา


-3

เพียงแปลงวันที่เป็นสตริงจากนั้นเชื่อมวัสดุย่อยที่คุณต้องการ

let time = date.toLocaleTimeString();
console.log(time.substr(0, 4) + time.substr(7, 3))
//=> 5:45 PM

3
โปรดเพิ่มคำอธิบายลงในโพสต์ของคุณ
DigitCart

5
toLocaleTimeStringส่งคืนสตริงที่แตกต่างกันในทุกเบราว์เซอร์ขึ้นอยู่กับการตั้งค่าโลแคล คุณไม่สามารถพึ่งพาตำแหน่งเหล่านี้ได้คุณจะได้รับผลลัพธ์ที่แตกต่างและแตกหักบนเบราว์เซอร์ของผู้อื่น
oriadam
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.