การจัดรูปแบบวันที่ jQuery

186

ฉันจะจัดรูปแบบวันที่โดยใช้ jQuery ได้อย่างไร ฉันใช้รหัสด้านล่าง แต่ได้รับข้อผิดพลาด:

 $("#txtDate").val($.format.date(new Date(), 'dd M yy'));

กรุณาแนะนำวิธีแก้ปัญหา

jquery 
— DotnetSparrow
แหล่งที่มา
1
ข้อผิดพลาดรันไทม์ Microsoft JScript: '$ .format' เป็นโมฆะหรือไม่ใช่วัตถุ
— DotnetSparrow
คุณรวมปลั๊กอินที่มีฟังก์ชั่นการจัดรูปแบบแล้วหรือยัง?
— zzzzBov
39
ซับหนึ่งส่อเสียดสำหรับ yyyy-mm-dd:new Date().toJSON().substring(0,10)
— Mike Causer
มันเป็นรูปแบบ (double f)
— jorrebor
10
คำเตือน! รหัสเนียน: new Date().toJSON().substring(0,10)ทำงานได้ดี แต่มันกลับมาเป็น GMT! เนื่องจากเราอยู่หลังเวลา GMT 7 ชั่วโมงฉันจึงได้รับวันที่ผิดหลังเวลา 17.00 น. ฉันเพิ่งเสียเวลาสองสามชั่วโมงในการหาสาเหตุ / ถอนหายใจ / การอ้างอิง
— JayRO-GreyBeard

คำตอบ:

103

jQuery dateFormatเป็นปลั๊กอินแยกต่างหาก คุณต้องโหลดโดยใช้<script>แท็ก

— Pekka
แหล่งที่มา
10
@Dotnet แน่ใจว่าใช้ฟังก์ชั่นอื่น ๆ : ดูเช่นที่นี่
— Pekka
33
@Dotnet หากสามารถทำได้โดยใช้ jQuery จะไม่มีปลั๊กอิน jQuery สำหรับการจัดรูปแบบวันที่หรือไม่
— Pekka
1
ฉันไม่สามารถบอกได้ว่านี่เป็นเรื่องตลกหรือไม่ ... มันเกือบจะยอดเยี่ยม @pekka นอกจากนี้ยังเป็นคำตอบที่ถูกต้อง
— jcolebrand
1
jQuery dateFormat ไม่ทำงานกับ jQuery Validate ไม่ว่าจะเป็นรุ่น JavaScript ล้วนๆ
— Kunal B.
3
เป็นการยากที่จะเชื่อว่า vanilla jQuery ไม่มีฟังก์ชันในการจัดรูปแบบวันที่ คำถามนี้อายุ 5 ปียังคงเป็นกรณีนี้หรือไม่?
— felwithe
212

เพิ่ม jquery ui plugin ในหน้าของคุณ 

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
— Thulasiram
แหล่งที่มา
2
นี่คือคำตอบที่ฉันต้องการโดยเฉพาะเมื่อฉันใช้ jQuery UI ที่อื่น
— nzifnab
มีวิธีใดบ้างในการรับเดท + 2 ปี?
— Serjas
1
var currentDate = new Date (); currentDate.setFullYear (currentDate.getFullYear () + 2);
— Thulasiram
เป็นเรื่องที่ผิดเพี้ยนที่ไม่รองรับการจัดรูปแบบเวลา = S
— Thomas
4
นี่คือลิงค์ไปยังเอกสารอย่างเป็นทางการ: api.jqueryui.com/datepicker/#utility-formatDate
— Guillaume
101

อีกทางเลือกหนึ่งคือฟังก์ชั่น js date () ง่ายๆหากคุณไม่ต้องการใช้ปลั๊กอิน jQuery / jQuery:

เช่น:

var formattedDate = new Date("yourUnformattedOriginalDate");
var d = formattedDate.getDate();
var m =  formattedDate.getMonth();
m += 1;  // JavaScript months are 0-11
var y = formattedDate.getFullYear();

$("#txtDate").val(d + "." + m + "." + y);

ดู: 10 วิธีในการจัดรูปแบบเวลาและวันที่โดยใช้ JavaScript

หากคุณต้องการเพิ่มศูนย์นำหน้าไปยังวัน / เดือนนี่เป็นตัวอย่างที่สมบูรณ์แบบ: จาวาสคริปต์เพิ่มศูนย์นำหน้าไปยังวันที่

และถ้าคุณต้องการเพิ่มเวลาด้วยศูนย์นำลองด้วยวิธีนี้: getMinutes () 0-9 - ทำอย่างไรกับตัวเลขสองตัว?

— ปาสคาล
แหล่งที่มา
มันจะมีประโยชน์ในการเพิ่มวินาทีตามที่ @ sein ทำ
— wpcoder
สิ่งนี้ดีจนกระทั่งผู้ใช้ต้องการวันที่ล่าสุดหรือวันที่จะถูกป้อนเข้าDateวัตถุ แล้วการได้รับวันที่ในรูปแบบเดียวกัน แต่ 6 เดือนก่อนถึงวันที่ได้รับอาหาร?
— Sanjok Gurung
31

นี่เป็นฟังก์ชั่นพื้นฐานที่ฉันสร้างขึ้นโดยไม่ต้องใช้ปลั๊กอินภายนอก:

$.date = function(dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date = day + "/" + month + "/" + year;

    return date;
};

ใช้:

$.date(yourDateObject);

ผลลัพธ์:

dd/mm/yyyy
— โอเว่น
แหล่งที่มา
27

ThulasiRam ฉันชอบข้อเสนอแนะของคุณ มันทำงานได้ดีสำหรับฉันในไวยากรณ์ / บริบทที่แตกต่างกันเล็กน้อย:

var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());

หากคุณตัดสินใจใช้ datepicker จากJQuery UIตรวจสอบให้แน่ใจว่าคุณใช้การอ้างอิงที่เหมาะสมในส่วน <head> ของเอกสารของคุณ:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
— Dominik Ras
แหล่งที่มา
25

ฉันใช้ช่วงเวลา JS มีประโยชน์มากและใช้งานง่าย

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
— Jhonatascf
แหล่งที่มา
ฉันเห็นด้วยกับผู้ใช้ 3812343! Moment JS นั้นยอดเยี่ยม - ง่ายต่อการดูดซับโดยผู้ที่ทำงานกับ. NET syntax
— Dominik Ras
ต้องการในปีเดือนวันชั่วโมงนาทีที่สอง?
— Chaitanya Desai
15

ฉันหวังว่ารหัสนี้จะแก้ไขปัญหาของคุณ

var d = new Date();

var curr_day = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();

curr_month++ ; // In js, first month is 0, not 1
year_2d = curr_year.toString().substring(2, 4)

$("#txtDate").val(curr_day + " " + curr_month + " " + year_2d)
— Sein Navarro
แหล่งที่มา
8

หากคุณกำลังใช้ jquery ui คุณสามารถใช้รูปแบบดังต่อไปนี้คุณสามารถระบุรูปแบบวันที่ของคุณเอง

$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"
— Jatin C
แหล่งที่มา
7

เพียงใช้สิ่งนี้:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
— หัวนม
แหล่งที่มา
1
หมายเหตุสิ่งนี้จะให้วันที่หนึ่งเดือนที่ผ่านมา (เว้นแต่จะมีการเข้าถึงในเดือนมกราคมซึ่งในกรณีนี้จะให้ '00' สำหรับเดือนนั้น) เพราะ date.getMonth () เป็นดัชนีที่ไม่มีศูนย์
— jaybrau
7

เพิ่มฟังก์ชั่นนี้ให้กับคุณ<script></script>และโทรจากที่คุณต้องการ<script></script> 

<script>

function GetNow(){
    var currentdate = new Date(); 
    var datetime = currentdate.getDate() + "-"
            + (currentdate.getMonth()+1)  + "-" 
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
    return datetime;
}

window.alert(GetNow());

</script>

หรือคุณอาจใช้ Jquery ซึ่งให้บริการการจัดรูปแบบเช่นกัน: -

window.alert(Date.parse(new Date()).toString('yyyy-MM-dd H:i:s'));

ฉันรักตัวเลือกที่สอง จะช่วยแก้ไขปัญหาทั้งหมดในครั้งเดียว

— user8373067
แหล่งที่มา
1
ตัวเลือกที่สองให้ฉัน "อาร์กิวเมนต์ radix ต้องอยู่ระหว่าง 2 และ 36 ที่ Number.toString" มันขัดข้อง
— IRGeekSauce
6

แม้ว่าคำถามนี้จะถูกถามเมื่อไม่กี่ปีที่ผ่านมา แต่ปลั๊กอิน jQuery ไม่จำเป็นต้องใช้อีกต่อไปหากค่าวันที่มีปัญหานั้นเป็นสตริงที่มีรูปแบบmm/dd/yyyy(เช่นเมื่อใช้ตัวใช้เลือกวันที่)

var birthdateVal = $('#birthdate').val();
//birthdateVal: 11/8/2014

var birthdate = new Date(birthdateVal);
//birthdate: Sat Nov 08 2014 00:00:00 GMT-0500 (Eastern Standard Time)
— Scott Pelak
แหล่งที่มา
5

คุณสามารถเพิ่มผู้ใช้ใหม่ฟังก์ชั่น jQuery 'getDate'

JSFiddle: getDate jQuery

หรือคุณสามารถเรียกใช้ข้อมูลโค้ด เพียงกดปุ่ม "เรียกใช้ข้อมูลโค้ด" ใต้โพสต์นี้

// Create user jQuery function 'getDate'
(function( $ ){
   $.fn.getDate = function(format) {

	var gDate		= new Date();
	var mDate		= {
	'S': gDate.getSeconds(),
	'M': gDate.getMinutes(),
	'H': gDate.getHours(),
	'd': gDate.getDate(),
	'm': gDate.getMonth() + 1,
	'y': gDate.getFullYear(),
	}

	// Apply format and add leading zeroes
	return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});

	return getDate(str);
   }; 
})( jQuery );


// Usage: example #1. Write to '#date' div
$('#date').html($().getDate("y-m-d H:M:S"));

// Usage: ex2. Simple clock. Write to '#clock' div
function clock(){
	$('#clock').html($().getDate("H:M:S, m/d/y"))
}
clock();
setInterval(clock, 1000); // One second

// Usage: ex3. Simple clock 2. Write to '#clock2' div
function clock2(){

	var format = 'H:M:S'; // Date format
	var updateInterval = 1000; // 1 second
	var clock2Div	= $('#clock2'); // Get div
	var currentTime	= $().getDate(format); // Get time
	
	clock2Div.html(currentTime); // Write to div
	setTimeout(clock2, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock2();

// Just for fun
// Usage: ex4. Simple clock 3. Write to '#clock3' span

function clock3(){

	var formatHM = 'H:M:'; // Hours, minutes
	var formatS = 'S'; // Seconds
	var updateInterval = 1000; // 1 second
	var clock3SpanHM	= $('#clock3HM'); // Get span HM
	var clock3SpanS	= $('#clock3S'); // Get span S
	var currentHM	= $().getDate(formatHM); // Get time H:M
	var currentS	= $().getDate(formatS); // Get seconds
	
	clock3SpanHM.html(currentHM); // Write to div
	clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span
	setTimeout(clock3, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock3();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="date"></div><br>
<div id="clock"></div><br>
<span id="clock3HM"></span><span id="clock3S"></span>
ขยายตัวอย่างข้อมูล

สนุก!

— user3439968
แหล่งที่มา
4

คุณสามารถใช้ประโยชน์จากตัวอย่างนี้

$('.datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  yearRange: '1900:+0',
  defaultDate: '01 JAN 1900',
  buttonImage: "http://www.theplazaclub.com/club/images/calendar/outlook_calendar.gif",
  dateFormat: 'dd/mm/yy',
  onSelect: function() {
    $('#datepicker').val($(this).datepicker({
      dateFormat: 'dd/mm/yy'
    }).val());
  }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>
  selector: <input type="text" class="datepicker">
</p>
<p>
  output: <input type="text" id="datepicker">
</p>
ขยายตัวอย่างข้อมูล

— Bajju
แหล่งที่มา
4

เพียงแค่เราสามารถจัดรูปแบบวันที่เช่น

var month = date.getMonth() + 1;
var day = date.getDate();
var date1 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + date.getFullYear();
$("#txtDate").val($.datepicker.formatDate('dd/mm/yy', new Date(date1)));

โดยที่ "date" เป็นวันที่ในรูปแบบใด ๆ

— itzmebibin
แหล่งที่มา
1

ใช้ตัวเลือก dateFormat เมื่อสร้างตัวใช้เลือกวันที่

$("#startDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'yy/mm/dd'
                });
— deenfirdoush
แหล่งที่มา
1

คุณสามารถใช้รหัสด้านล่างโดยไม่ต้องใช้ปลั๊กอิน

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
    //call the function on page load
	$( "#datepicker" ).datepicker();
    //set the date format here
    $( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");
	
    // you also can use 
    // yy-mm-dd
    // d M, y
    // d MM, y
    // DD, d MM, yy
    // &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)
	} );
 </script>

Pick the Date: <input type="text" id="datepicker">
ขยายตัวอย่างข้อมูล

— Mohamed Farshad
แหล่งที่มา
1

สิ่งนี้ใช้ได้กับฉันด้วยการปรับเปลี่ยนเล็กน้อยและไม่มีปลั๊กอินใด ๆ

ป้อน: พุธ 11 เม.ย. 2018 00:00:00 GMT + 0000

$.date = function(orginaldate) { 
    var date = new Date(orginaldate);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date =  month + "/" + day + "/" + year; 
    return date;
};

$.date('Wed Apr 11 2018 00:00:00 GMT+0000')

ผลลัพธ์: 04/11/2018

— Ashokkumar C
แหล่งที่มา
0

ฉันค่อนข้างไม่แน่ใจว่าฉันได้รับอนุญาตให้ตอบคำถามที่ถูกถามเมื่อ 2 ปีก่อนหรือไม่เพราะนี่คือคำตอบแรกของฉันใน stackoverflow แต่นี่คือคำตอบของฉัน

หากคุณเคยเรียกข้อมูลวันที่จากฐานข้อมูล MySQL ของคุณให้ทำการแยกแล้วใช้ค่าที่แยกออก 

$(document).ready(function () {
    var datefrommysql = $('.date-from-mysql').attr("date");
    var arraydate = datefrommysql.split('.');
    var yearfirstdigit = arraydate[2][2];
    var yearlastdigit = arraydate[2][3];
    var day = arraydate[0];
    var month = arraydate[1];
    $('.formatted-date').text(day + "/" + month + "/" + yearfirstdigit + yearlastdigit);
});

นี่คือไวโอลิน

— Terby
แหล่งที่มา
0

นี่คือตัวอย่างโค้ดแบบเต็มที่ฉันแสดงบนเบราว์เซอร์หวังว่าคุณจะได้รับประโยชน์เช่นกัน

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker" ).datepicker({
                minDate: -100,
                maxDate: "+0D",
                dateFormat: 'yy-dd-mm',
                onSelect: function(datetext){
                    $(this).val(datetext);
                },
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker"></p>
   </body>
</html>
— Kamlesh
แหล่งที่มา
-1

คุณสามารถใช้การเข้ารหัสนี้ 

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));
— Endang Taryana
แหล่งที่มา
2
คำตอบที่เป็นรหัสเท่านั้นจะหมดกำลังใจเพราะพวกเขาไม่ได้อธิบายวิธีที่พวกเขาแก้ไขปัญหา โปรดอัปเดตคำตอบของคุณเพื่ออธิบายวิธีการปรับปรุงนี้กับคำตอบที่ยอมรับและอัปเดตอื่น ๆ อีกมากมายที่คำถามนี้มีอยู่แล้ว นอกจากนี้คำถามนี้มีอายุ 6 ปีความพยายามของคุณจะได้รับการชื่นชมจากผู้ใช้ที่มีคำถามที่ยังไม่ได้ตอบล่าสุด โปรดตรวจสอบฉันจะเขียนคำตอบที่ดีได้อย่างไร
— FluffyKitten
1
คำตอบไม่ได้พูดถึง jQuery UI ที่จำเป็น
— sean2078
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.