pemformatan tanggal jQuery

186

Bagaimana saya bisa memformat tanggal menggunakan jQuery. Saya menggunakan kode di bawah ini tetapi mendapatkan kesalahan:

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

Mohon saran solusinya.

jquery 
— DotnetSparrow
sumber
1
Kesalahan runtime Microsoft JScript: '$ .format' adalah null atau bukan objek
— DotnetSparrow
sudahkah Anda memasukkan plugin yang menyertakan fungsi format?
— zzzzBov
39
Menyelinap satu liner untuk yyyy-mm-dd:new Date().toJSON().substring(0,10)
— Mike Causer
it's fformat (double f)
— jorrebor
10
PERINGATAN! kode apik: new Date().toJSON().substring(0,10)bekerja dengan baik, tetapi mengembalikan tanggal sebagai GMT! Karena kami 7 jam lebih lambat dari GMT, saya mendapatkan tanggal yang salah setelah jam 5:00 sore. Saya hanya membuang waktu beberapa jam untuk menemukan penyebabnya / menghela nafas /. Referensi
— JayRO-GreyBeard

Jawaban:

103

jQuery dateFormat adalah plugin terpisah. Anda harus memuatnya secara eksplisit menggunakan <script>tag.

— Pekka
sumber
10
@Dotnet yakin, menggunakan fungsi-fungsi lain: Lihat misalnya di sini
— Pekka
33
@ Doknet jika itu bisa dilakukan menggunakan jQuery, tidak akan ada plug-in jQuery untuk format tanggal, bukan?
— Pekka
1
Saya tidak tahu apakah ini lelucon atau tidak ... itu hampir cemerlang @ pekka. Juga, itu jawaban yang tepat.
— jcolebrand
1
jQuery dateFormat tidak berfungsi dengan jQuery Validate. Baik versi JavaScript murni.
— Kunal B.
3
Sulit dipercaya bahwa vanilla jQuery tidak memiliki fungsi untuk memformat tanggal. Pertanyaan ini berumur 5 tahun, apakah masih demikian?
— felwithe
212

tambahkan plugin jquery ui di halaman Anda. 

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
— Thulasiram
sumber
2
Ini adalah jawaban yang saya cari, terutama karena saya menggunakan jQuery UI di tempat lain.
— nzifnab
Apakah ada cara untuk mendapatkan tanggal + 2 tahun?
— Serjas
1
var currentDate = Tanggal baru (); currentDate.setFullYear (currentDate.getFullYear () + 2);
— Thulasiram
itu sangat menyebalkan yang tidak mendukung format waktu = S
— Thomas
4
Berikut tautan ke dokumen resmi: api.jqueryui.com/datepicker/#utility-formatDate
— Guillaume Husta
101

Alternatifnya adalah fungsi js date () sederhana, jika Anda tidak ingin menggunakan plugin jQuery / jQuery:

misalnya:

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

lihat: 10 cara untuk memformat waktu dan tanggal menggunakan JavaScript

Jika Anda ingin menambahkan nol di awal untuk hari / bulan, ini adalah contoh sempurna: Javascript menambahkan nol di awal

dan jika Anda ingin menambah waktu dengan memimpin nol coba ini: getMinutes () 0-9 - bagaimana dengan dua angka?

— Pascal
sumber
akan berguna untuk menambahkan detik seperti yang dilakukan
— @sein
Ini bagus sampai pengguna ingin tanggal terakhir atau tanggal dimasukkan ke Dateobjek. Bagaimana dengan mendapatkan tanggal dalam format yang sama tetapi 6 bulan sebelum tanggal pemberian?
— Sanjok Gurung
31

Inilah fungsi yang sangat mendasar yang baru saja saya buat yang tidak memerlukan plugin eksternal:

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

Menggunakan:

$.date(yourDateObject);

Hasil:

dd/mm/yyyy
— Owen
sumber
27

ThulasiRam, saya lebih suka saran Anda. Ini berfungsi baik untuk saya dalam sintaks / konteks yang sedikit berbeda:

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

Jika Anda memutuskan untuk menggunakan datepicker dari JQuery UI , pastikan Anda menggunakan referensi yang tepat di bagian <head> dokumen Anda:

<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
sumber
25

Saya menggunakan Momen JS . Sangat membantu dan mudah digunakan.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
— Jhonatascf
sumber
Saya setuju dengan user3812343! Momen JS hebat - sangat mudah diserap oleh mereka yang bekerja dengan sintaks .NET.
— Dominik Ras
butuhkan di tahun bulan hari jam menit kedua?
— Chaitanya Desai
15

Saya harap kode ini akan memperbaiki masalah Anda.

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
sumber
8

Jika Anda menggunakan jquery ui maka Anda dapat menggunakannya seperti di bawah ini, Anda dapat menentukan format tanggal Anda sendiri

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

Gunakan ini saja:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
— Puting susu
sumber
1
Catatan, ini memberi Anda tanggal satu bulan di masa lalu (kecuali jika diakses pada bulan Januari yang memberi Anda '00' untuk bulan itu) karena date.getMonth () adalah indeks berbasis nol.
— jaybrau
7

Tambahkan fungsi ini ke Anda <script></script>dan panggil dari tempat yang Anda inginkan<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>

atau Anda dapat menggunakan Jquery yang menyediakan fasilitas format juga: -

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

Saya suka pilihan kedua. Ini menyelesaikan semua masalah dalam sekali jalan.

— pengguna8373067
sumber
1
Pilihan ke-2 memberi saya "argumen radix harus antara 2 dan 36 di Number.toString". Itu crash.
— IRGeekSauce
6

Meskipun pertanyaan ini ditanyakan beberapa tahun yang lalu, plugin jQuery tidak diperlukan lagi asalkan nilai tanggal dalam pertanyaan adalah string dengan format mm/dd/yyyy(seperti ketika menggunakan pemilih tanggal);

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
sumber
5

Anda dapat menambahkan fungsi jQuery pengguna baru 'getDate'

JSFiddle: getDate jQuery

Atau Anda dapat menjalankan cuplikan kode. Cukup tekan tombol "Jalankan cuplikan kode" di bawah posting ini.

// 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>
Luaskan cuplikan

Nikmati!

— pengguna3439968
sumber
4

Anda dapat menggunakan cuplikan ini

$('.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>
Luaskan cuplikan

— Bajju
sumber
4

Cukup kita dapat memformat tanggal seperti,

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

Di mana "tanggal" adalah tanggal dalam format apa pun.

— itzmebibin
sumber
1

Gunakan opsi dateFormat saat membuat pemilih tanggal.

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

Anda dapat menggunakan kode di bawah ini tanpa 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">
Luaskan cuplikan

— Mohamed Farshad
sumber
1

Ini bekerja untuk saya dengan sedikit modifikasi dan tanpa plugin apa pun

Input: Rab 11 Apr 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')

Output: 04/11/2018

— Ashokkumar C
sumber
0

Saya tidak yakin apakah saya diizinkan untuk menjawab pertanyaan yang diajukan 2 tahun yang lalu karena ini adalah jawaban pertama saya di stackoverflow tetapi, inilah solusi saya;

Jika Anda pernah mengambil tanggal dari database MySQL Anda, pisahkan dan kemudian gunakan nilai yang dibagi. 

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

Ini biola .

— Terby
sumber
0

Berikut ini adalah contoh kode lengkap yang saya tampilkan di browser, Semoga Anda juga berterima kasih.

<!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
sumber
-1

Anda dapat menggunakan kode ini 

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));
— Endang Taryana
sumber
2
Jawaban khusus kode tidak disarankan karena tidak menjelaskan bagaimana mereka menyelesaikan masalah. Harap perbarui jawaban Anda untuk menjelaskan bagaimana hal ini meningkat pada banyak jawaban lain yang diterima dan terunggah pertanyaan ini. Selain itu, pertanyaan ini berumur 6 tahun, usaha Anda akan lebih dihargai oleh pengguna yang memiliki pertanyaan yang belum terjawab baru-baru ini. Harap tinjau Bagaimana cara menulis jawaban yang baik .
— FluffyKitten
1
Jawaban tidak menyebutkan jQuery UI diperlukan
— sean2078
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.