Định dạng ngày của jQuery

184

Làm cách nào để định dạng ngày bằng jQuery. Tôi đang sử dụng mã dưới đây nhưng nhận được lỗi:

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

Xin đề xuất một giải pháp.

jquery 
— DotnetSparrow
nguồn
1
Lỗi thời gian chạy Microsoft JScript: '$ .format' là null hoặc không phải là một đối tượng
— DotnetSparrow
Bạn đã bao gồm các plugin bao gồm các chức năng định dạng?
— zzzzBov
39
Lén lút một lớp lót cho yyyy-mm-dd:new Date().toJSON().substring(0,10)
— Mike Causer
đó là fformat (double f)
— jorrebor
10
CẢNH BÁO! mã khéo léo: new Date().toJSON().substring(0,10)hoạt động tốt, nhưng nó trả về ngày là GMT! Vì chúng tôi chậm hơn 7 giờ so với GMT, tôi đã nhận được ngày sai sau 5:00 chiều. Tôi chỉ lãng phí một vài giờ để tìm ra nguyên nhân / thở dài /. Tham khảo
— JayRO-GreyBeard

Câu trả lời:

102

jQuery dateFormat là một plugin riêng biệt. Bạn cần tải một cách rõ ràng bằng cách sử dụng một <script>thẻ.

— Bắc Kinh
nguồn
10
@Dotnet chắc chắn, sử dụng các chức năng khác: Xem ví dụ tại đây
— Pekka
33
@Dotnet nếu có thể được thực hiện bằng jQuery, sẽ không có trình cắm jQuery để định dạng ngày, phải không?
— Pekka
1
Tôi không thể biết đây có phải là một trò đùa hay không ... nó gần như tuyệt vời @pekka. Ngoài ra, đó là câu trả lời đúng.
— jcolebrand
1
jQuery dateFormat không hoạt động với jQuery Validate. Cả phiên bản JavaScript thuần túy.
— Kunal B.
3
Thật khó để tin rằng vanilla jQuery không có chức năng định dạng ngày. Câu hỏi này đã 5 tuổi, đây có còn là trường hợp không?
— felwithe
212

thêm plugin jquery ui trong trang của bạn. 

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
— Thicesiram
nguồn
2
Đây là câu trả lời tôi đang tìm kiếm, đặc biệt khi tôi đang sử dụng jQuery UI ở nơi khác.
— nzifnab
Có cách nào để có được ngày + 2 năm không?
— Serjas
1
var currentDate = ngày mới (); currentDate.setFullYear (currentDate.getFullYear () + 2);
— Thicesiram
Thật đáng tiếc khi nó không hỗ trợ định dạng thời gian = S
— Thomas
4
Đây là liên kết đến tài liệu chính thức: api.jqueryui.com/datepicker/#utility-formatDate
— Guillaume Husta
101

Một thay thế sẽ là hàm js date () đơn giản, nếu bạn không muốn sử dụng plugin jQuery / jQuery:

ví dụ:

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);

xem: 10 cách định dạng thời gian và ngày bằng JavaScript

Nếu bạn muốn thêm số không hàng đầu vào ngày / tháng, đây là một ví dụ hoàn hảo: Javascript thêm số không hàng đầu cho đến nay

và nếu bạn muốn thêm thời gian với các số 0 đứng đầu, hãy thử điều này: getMinutes () 0-9 - làm thế nào để có hai số?

— Pascal
nguồn
Sẽ rất hữu ích khi thêm giây như @sein đã làm
— wpcoder
Điều này là tốt cho đến khi người dùng muốn ngày gần đây hoặc một ngày được đưa vào Dateđối tượng. Điều gì về việc nhận được ngày ở cùng định dạng nhưng 6 tháng trước ngày cho ăn ??
— Sanjok Gurung
31

Đây là một chức năng thực sự cơ bản mà tôi vừa thực hiện mà không yêu cầu bất kỳ plugin bên ngoài nào:

$.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;
};

Sử dụng:

$.date(yourDateObject);

Kết quả:

dd/mm/yyyy
— Owen
nguồn
27

ThulasiRam, tôi thích đề nghị của bạn. Nó hoạt động tốt với tôi trong một cú pháp / ngữ cảnh hơi khác:

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

Nếu bạn quyết định sử dụng tính năng hẹn hò từ Giao diện người dùng JQuery , hãy đảm bảo bạn sử dụng các tham chiếu thích hợp trong phần <head> của tài liệu của bạn:

<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
nguồn
25

Tôi đang sử dụng Moment JS . Rất hữu ích và dễ sử dụng.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
— Jhonatascf
nguồn
Tôi đồng ý người dùng3812343! Khoảnh khắc JS rất tuyệt - rất dễ tiếp thu bởi những người làm việc với cú pháp .NET.
— Dominik Ras
cần trong năm tháng ngày giờ phút thứ hai?
— Chaitanya Desai
15

Tôi hy vọng mã này sẽ khắc phục vấn đề của bạn.

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
nguồn
7

Chỉ cần sử dụng này:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
— Núm vú
nguồn
1
Lưu ý, điều này cung cấp cho bạn một ngày một tháng trong quá khứ (trừ khi nó được truy cập vào tháng 1 trong trường hợp nó mang lại cho bạn '00' trong tháng) vì date.getMonth () là chỉ số dựa trên số không.
— jaybrau
7

Nếu bạn đang sử dụng jquery ui thì bạn có thể sử dụng nó như bên dưới, bạn có thể chỉ định định dạng ngày của riêng bạn

$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"
— Jatin C
nguồn
7

Thêm chức năng này vào của bạn <script></script>và gọi từ bất cứ nơi nào bạn muốn trong đó<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>

hoặc bạn có thể chỉ cần sử dụng Jquery cũng cung cấp các phương tiện định dạng: -

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

Tôi thích lựa chọn thứ hai. Nó giải quyết tất cả các vấn đề trong một lần.

— dùng8373067
nguồn
1
Tùy chọn thứ 2 đó cho tôi "đối số cơ số phải nằm trong khoảng từ 2 đến 36 tại Number.toString". Nó bị treo.
— IRGeekSauce
6

Mặc dù câu hỏi này đã được hỏi vài năm trước, một plugin jQuery không còn cần thiết nữa với điều kiện giá trị ngày trong câu hỏi là một chuỗi có định dạng mm/dd/yyyy(như khi sử dụng trình chọn ngày);

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
nguồn
5

Bạn có thể thêm chức năng jQuery người dùng mới 'getDate'

JSFiddle: getDate jQuery

Hoặc bạn có thể chạy đoạn mã. Chỉ cần nhấn nút "Chạy đoạn mã" bên dưới bài đăng này.

// 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>
Mở rộng đoạn trích

Thưởng thức!

— người dùng439968
nguồn
4

Bạn có thể sử dụng đoạn trích này

$('.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>
Mở rộng đoạn trích

— Bajju
nguồn
4

Đơn giản là chúng ta có thể định dạng ngày như,

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)));

Trong đó "ngày" là một ngày ở bất kỳ định dạng nào.

— itzmebibin
nguồn
1

Sử dụng tùy chọn dateFormat khi tạo bộ chọn ngày.

$("#startDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'yy/mm/dd'
                });
— deenfirdoush
nguồn
1

bạn có thể sử dụng mã dưới đây mà không cần plugin.

<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">
Mở rộng đoạn trích

— Mohamed Farshad
nguồn
1

Điều này làm việc cho tôi với sửa đổi nhỏ và không có bất kỳ plugin nào

Đầu vào: Thứ tư ngày 11 tháng 4 năm 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')

Đầu ra: 04/11/2018

— Ashokkumar C
nguồn
0

Tôi không chắc lắm nếu tôi được phép trả lời một câu hỏi đã được hỏi như 2 năm trước vì đây là câu trả lời đầu tiên của tôi về stackoverflow nhưng, đây là giải pháp của tôi;

Nếu bạn đã lấy lại ngày từ cơ sở dữ liệu MySQL của mình, hãy tách nó và sau đó sử dụng các giá trị được tách. 

$(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);
});

Đây là một câu đố .

— Terby
nguồn
0

Dưới đây là ví dụ mã đầy đủ tôi đã hiển thị trên trình duyệt, Hy vọng bạn cũng cảm ơn hữu ích.

<!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>
— Thịt
nguồn
-1

bạn có thể sử dụng mã hóa này 

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));
— Endang Taryana
nguồn
2
Các câu trả lời chỉ có mã không được khuyến khích vì chúng không giải thích cách chúng giải quyết vấn đề. Vui lòng cập nhật câu trả lời của bạn để giải thích cách cải thiện này trên nhiều câu trả lời được chấp nhận và nâng cao khác mà câu hỏi này đã có. Ngoài ra, câu hỏi này đã được 6 tuổi, những nỗ lực của bạn sẽ được đánh giá cao hơn bởi những người dùng có câu hỏi chưa được trả lời gần đây. Vui lòng xem lại Làm thế nào để tôi viết một câu trả lời tốt .
— FluffyKitten
1
Câu trả lời không đề cập đến giao diện người dùng jQuery là bắt buộc
— sean2078
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.