jQuery-Datumsformatierung

184

Wie kann ich das Datum mit jQuery formatieren? Ich verwende den folgenden Code, erhalte aber eine Fehlermeldung:

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

Bitte schlagen Sie eine Lösung vor.

jquery DotnetSparrow
quelle
1
Microsoft JScript-Laufzeitfehler: '$ .format' ist null oder kein Objekt
DotnetSparrow
Haben Sie das Plugin aufgenommen, das die Formatfunktionen enthält?
zzzzBov
39
Sneaky One Liner für JJJJ-MM-TT:new Date().toJSON().substring(0,10)
Mike Causer
es ist fformat (double f)
jorrebor
10
WARNUNG! Der Slick-Code: hat gut new Date().toJSON().substring(0,10)funktioniert, aber er gibt das Datum als GMT zurück! Da wir 7 Stunden hinter GMT sind, bekam ich nach 17:00 Uhr das falsche Datum. Ich habe nur ein paar Stunden damit verbracht, die Ursache zu finden / seufz /. Referenz
JayRO-GreyBeard

Antworten:

102

jQuery dateFormat ist ein separates Plugin. Sie müssen dies explizit mit einem <script>Tag laden .

Pekka
quelle
10
@Dotnet sicher, mit anderen Funktionen: Siehe zB hier
Pekka
33
@Dotnet Wenn es mit jQuery möglich wäre, gäbe es kein jQuery-Plug-In für die Datumsformatierung, oder?
Pekka
1
Ich kann nicht sagen, ob dies ein Witz sein sollte oder nicht ... es ist fast brillant @pekka. Es ist auch die richtige Antwort.
Jcolebrand
1
jQuery dateFormat funktioniert nicht mit jQuery Validate. Weder die reine JavaScript-Version.
Kunal B.
3
Es ist kaum zu glauben, dass Vanilla jQuery keine Funktion zum Formatieren eines Datums hat. Diese Frage ist 5 Jahre alt, ist das immer noch der Fall?
felwithe
212

füge jquery ui plugin zu deiner Seite hinzu. 

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));
Thulasiram
quelle
2
Dies ist die Antwort, nach der ich gesucht habe, insbesondere da ich die jQuery-Benutzeroberfläche an anderer Stelle verwende.
Nzifnab
Gibt es eine Möglichkeit, Datum + 2 Jahre zu bekommen?
Serjas
1
var currentDate = new Date (); currentDate.setFullYear (currentDate.getFullYear () + 2);
Thulasiram
Es ist schade, dass es keine Zeitformatierung unterstützt = S
Thomas
4
Hier ist der Link zum offiziellen Dokument: api.jqueryui.com/datepicker/#utility-formatDate
Guillaume Husta
101

Eine Alternative wäre die einfache Funktion js date (), wenn Sie das jQuery / jQuery-Plugin nicht verwenden möchten:

z.B:

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

Siehe: 10 Möglichkeiten zum Formatieren von Uhrzeit und Datum mit JavaScript

Wenn Sie Tag / Monat führende Nullen hinzufügen möchten, ist dies ein perfektes Beispiel: Javascript fügt dem Datum führende Nullen hinzu

und wenn Sie Zeit mit führenden Nullen hinzufügen möchten, versuchen Sie Folgendes : getMinutes () 0-9 - wie geht das mit zwei Zahlen?

Pascal
quelle
Es wird praktisch sein, Sekunden hinzuzufügen, wie es @sein getan hat
wpcoder
Dies ist gut, bis der Benutzer das letzte Datum wünscht oder ein Datum in das DateObjekt eingegeben wird. Was ist mit dem Datum im gleichen Format, aber 6 Monate vor dem Fütterungsdatum?
Sanjok Gurung
31

Hier ist eine wirklich grundlegende Funktion, die ich gerade erstellt habe und für die keine externen Plugins erforderlich sind:

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

Verwenden:

$.date(yourDateObject);

Ergebnis:

dd/mm/yyyy
Owen
quelle
27

ThulasiRam, ich bevorzuge Ihren Vorschlag. Es funktioniert gut für mich in einer etwas anderen Syntax / Kontext:

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

Wenn Sie Datepicker über die JQuery-Benutzeroberfläche verwenden möchten , stellen Sie sicher, dass Sie im Abschnitt <head> Ihres Dokuments die richtigen Verweise verwenden:

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

Ich benutze Moment JS . Ist sehr hilfreich und einfach zu bedienen.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10
Jhonatascf
quelle
Ich stimme user3812343 zu! Moment JS ist großartig - sehr einfach für diejenigen, die mit .NET-Syntax gearbeitet haben.
Dominik Ras
brauchen im Jahr Monat Tag Stunde Minute Sekunde?
Chaitanya Desai
15

Ich hoffe, dieser Code wird Ihr Problem beheben.

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
quelle
7

Verwenden Sie einfach dies:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);
Nippel
quelle
1
Beachten Sie, dass Sie dadurch ein Datum erhalten, das einen Monat in der Vergangenheit liegt (es sei denn, es wird im Januar aufgerufen. In diesem Fall erhalten Sie für den Monat '00'), da date.getMonth () ein auf Null basierender Index ist.
Jaybrau
7

Wenn Sie jquery ui verwenden, können Sie es wie folgt verwenden. Sie können Ihr eigenes Datumsformat angeben

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

Fügen Sie diese Funktion zu Ihrer hinzu <script></script>und rufen Sie an, wo immer Sie möchten<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>

oder Sie können einfach die JQuery verwenden, die auch Formatierungsmöglichkeiten bietet: -

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

Ich liebe die zweite Option. Es löst alle Probleme auf einmal.

Benutzer8373067
quelle
1
Diese zweite Option gibt mir "Radix-Argument muss bei Number.toString zwischen 2 und 36 liegen". Es stürzt ab.
IRGeekSauce
6

Obwohl diese Frage vor einigen Jahren gestellt wurde, ist ein jQuery-Plugin nicht mehr erforderlich, vorausgesetzt, der betreffende Datumswert ist eine Zeichenfolge mit Format mm/dd/yyyy(wie bei Verwendung einer Datumsauswahl).

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

Sie können die neue Benutzer-jQuery-Funktion 'getDate' hinzufügen.

JSFiddle: getDate jQuery

Oder Sie können ein Code-Snippet ausführen. Klicken Sie einfach auf die Schaltfläche "Code-Snippet ausführen" unter diesem Beitrag.

// 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>
Erweitern Sie das Snippet

Genießen!

user3439968
quelle
4

Sie könnten dieses Snippet verwenden

$('.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>
Erweitern Sie das Snippet

Bajju
quelle
4

Einfach können wir das Datum wie folgt formatieren:

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

Wobei "Datum" ein Datum in einem beliebigen Format ist.

Itzmebibin
quelle
1

Verwenden Sie die Option dateFormat, wenn Sie eine Datumsauswahl erstellen.

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

Sie können den folgenden Code ohne das Plugin verwenden.

<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">
Erweitern Sie das Snippet

Mohamed Farshad
quelle
1

Dies funktionierte bei mir mit geringfügigen Änderungen und ohne Plugin

Eingabe: Mi 11. April 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')

Ausgabe: 04/11/2018

Ashokkumar C.
quelle
0

Ich bin mir nicht ganz sicher, ob ich eine Frage beantworten darf, die wie vor 2 Jahren gestellt wurde, da dies meine erste Antwort auf Stackoverflow ist, aber hier ist meine Lösung.

Wenn Sie das Datum einmal aus Ihrer MySQL-Datenbank abgerufen haben, teilen Sie es auf und verwenden Sie dann die aufgeteilten Werte. 

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

Hier ist eine Geige .

Terby
quelle
0

Hier ist das vollständige Codebeispiel, das ich im Browser gezeigt habe. Ich hoffe, Sie sind auch hilfreich, danke.

<!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
quelle
0

Sie können http://www.datejs.com/ versuchen

 $('#idInput').val( Date.parse("Jun 18, 2017 7:00:00 PM").toString('yyyy-MM-dd'));

BR

Condemateguadua
quelle
-1

Sie können diese Codierung verwenden 

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));
Endang Taryana
quelle
2
Von Nur-Code-Antworten wird abgeraten, da sie nicht erklären, wie sie das Problem lösen. Bitte aktualisieren Sie Ihre Antwort, um zu erklären, wie sich dies gegenüber den vielen anderen akzeptierten und positiv bewerteten Antworten verbessert, die diese Frage bereits hat. Außerdem ist diese Frage 6 Jahre alt. Ihre Bemühungen würden von Benutzern, die kürzlich unbeantwortete Fragen haben, mehr geschätzt. Bitte überprüfen Sie, wie ich eine gute Antwort schreibe .
FluffyKitten
1
Die Antwort erwähnte nicht, dass eine jQuery-Benutzeroberfläche erforderlich war
sean2078