jQuery UI DatePicker - Datumsformat ändern

546

Ich verwende den UI DatePicker von jQuery UI als eigenständige Auswahl. Ich habe diesen Code:

<div id="datepicker"></div>

Und die folgende JS:

$('#datepicker').datepicker();

Wenn ich versuche, den Wert mit diesem Code zurückzugeben:

var date = $('#datepicker').datepicker('getDate');

Mir wird folgendes zurückgegeben:

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

Welches ist völlig das falsche Format. Gibt es eine Möglichkeit, wie ich es im Format zurückgeben kann DD-MM-YYYY?

Tarnfeld
quelle
2
Perfekt, danke, warum nicht $ .datepicker.formatDate ("yy-mm-dd", neues Datum (2007, 1 - 1, 26)); Arbeit wie in der Dokumentation?
Hein du Plessis

Antworten:

961

Hier ist eine für Ihren Code spezifische:

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

Weitere allgemeine Informationen finden Sie hier:

AvatarKava
quelle
6
Dies gibt mir nur das gleiche Format, das ich im Datepicker angegeben habe, und nicht TT-MM-JJ. mit Version 1.10. Die Antwort unten funktioniert gut.
Tommy
4
das yygibt mir 2015. Wie kann ich nur bekommen 15?
SearchForKnowledge
6
@SearchForKnowledge nur verwenden y. Datepicker-Formatierung
Shadoath
11
Achten Sie darauf, dass, wenn Sie bereits zuvor ein anderes Format definiert haben, dies nicht funktioniert, Sie dies dann tun sollten$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()
João Pimentel Ferreira
4
in älteren Versionen format: 'dd-mm-yyyy',sollte funktionieren
TarangP
99

Fügen Sie im jQuery-Skriptcode einfach den Code ein.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

das sollte funktionieren.

Sampath
quelle
10
.selectorund #datepickersind nicht gleich. Das wörtliche Einfügen Ihres Codes würde nicht funktionieren.
Dave Jarvis
63

Die getDateMethode der Datumsauswahl gibt einen Datumstyp zurück, keine Zeichenfolge.

Sie müssen den zurückgegebenen Wert mit Ihrem Datumsformat in eine Zeichenfolge formatieren. Verwenden Sie die Datepicker- formatDateFunktion:

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

Die vollständige Liste der Formatbezeichner finden Sie hier .

kcsoft
quelle
34

Hier vollständiger Code für die Datumsauswahl mit Datumsformat (JJ / MM / TT).

Kopieren Sie den Link unten und fügen Sie das Head-Tag ein:

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>

Kopieren Sie den folgenden Code und fügen Sie ihn zwischen das Body-Tag ein:

      Date: <input type="text" id="datepicker" size="30"/>    

Wenn Sie möchten , zwei (2) Eingabetyp Text wie Start Dateund End Dateverwenden Sie dann dieses Skript und ändern Datumsformat.

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  

Zwei Eingabetexte wie:

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>
Nasirali
quelle
19

Datumsformat

Das Format für analysierte und angezeigte Daten. Dieses Attribut ist eines der Regionalisierungsattribute. Eine vollständige Liste der möglichen Formate finden Sie in der Funktion formatDate.

Codebeispiele Initialisieren Sie einen Datepicker mit der angegebenen Option dateFormat.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

Rufen Sie nach init die Option dateFormat ab oder legen Sie sie fest.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
Benutzer369661
quelle
In der ersten Codezeile in diesem Beispiel funktioniert die "Datumsauswahl" mit einem bestimmten Datumsformat und nicht mit dem amerikanischen Standardformat MM / TT / JJ.
Ryan
3
@ Ryan es funktioniert nicht für mich, hast du ein Beispiel, das alle Codezeilen enthält?
Knocte
19

getDateFunktion gibt ein JavaScript-Datum zurück. Verwenden Sie den folgenden Code, um dieses Datum zu formatieren:

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

Es verwendet eine Dienstprogrammfunktion, die in datepicker integriert ist:

$.datepicker.formatDate( format, date, settings ) - Formatieren Sie ein Datum in einen Zeichenfolgenwert mit einem bestimmten Format.

Die vollständige Liste der Formatbezeichner finden Sie hier .

Salman A.
quelle
2
Es wäre besser gewesen, wenn Sie die @ kcsoft-Antwort bereichert hätten (wie ich es tun werde), anstatt eine neue zu veröffentlichen;)
bläulich am
10

$("#datepicker").datepicker("getDate") Gibt ein Datumsobjekt zurück, keine Zeichenfolge.

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format
Catalin
quelle
10
<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>
Muddasir Abbas
quelle
9

Versuchen Sie, die zu verwenden

$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });  

und es gibt viele Optionen für den Datepicker finden Sie hier

http://api.jqueryui.com/datepicker/

Auf diese Weise rufen wir den Datepicker mit dem Parameter auf

$(function() {
      $('.selector').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            buttonImage: 'contact/calendar/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                 // we can write code here 
             }
      });
});
Ritesh d Joshi
quelle
6

Sie können dieses Format einfach so verwenden, wie Sie es möchten

     $(function() {  
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true
        });
      });

<input type="text" id="datepicker"></p>
Rohit
quelle
5

Wenn Sie das Datum im Format JJ-MM-TT benötigen, können Sie Folgendes verwenden: -

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });

Sie finden alle unterstützten Formate unter https://jqueryui.com/datepicker/#date-formats

Ich brauchte den 06. Dezember 2015, ich tat dies: -

$("#datepicker").datepicker({ dateFormat: "d M,y" });
Kgn-Web
quelle
4
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
traurig
quelle
4

Führen Sie einfach diese HTML-Seite aus. Sie können verschiedene Formate sehen.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
        $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30" /></p>

<p>Format options:<br />
<select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>


</body>
</html>
Ständiger Lerner
quelle
4

Das funktioniert auch:

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});
Patrick Mutwiri
quelle
3
<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>
Sa.
quelle
3

Dies funktioniert reibungslos. Versuche dies.

Fügen Sie diese Links in Ihren Kopfbereich ein.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Es folgt die JS-Codierung.

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>
Dulith De Costa
quelle
2

Wenn Sie einen Datepicker für ein input[type="text"]Element einrichten , erhalten Sie möglicherweise kein konsistent formatiertes Datum, insbesondere wenn der Benutzer das Datumsformat für die Dateneingabe nicht einhält .

Zum Beispiel, wenn Sie das Datumsformat als dd-mm-yyund die Benutzertypen festlegen 1-1-1. Der Datepicker konvertiert dies in Jan 01, 2001intern, aber val()wenn Sie das Datepicker-Objekt aufrufen, wird die Zeichenfolge zurückgegeben "1-1-1"- genau das, was sich im Textfeld befindet.

Dies bedeutet, dass Sie entweder die Benutzereingaben validieren sollten, um sicherzustellen, dass das eingegebene Datum in dem von Ihnen erwarteten Format vorliegt, oder dass Sie dem Benutzer nicht erlauben, Datumsfreiform einzugeben (bevorzugen Sie stattdessen die Kalenderauswahl). Trotzdem ist es möglich, den Datepicker-Code so zu erzwingen, dass Sie eine Zeichenfolge erhalten, die wie erwartet formatiert ist:

var picker = $('#datepicker');

picker.datepicker({ dateFormat: 'dd-mm-yy' });

picker.val( '1-1-1' );  // simulate user input

alert( picker.val() );  // "1-1-1"

var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );

alert( v );             // "01-01-2001"

Beachten Sie jedoch, dass die getDate()Methode des Datepickers zwar ein Datum zurückgibt , jedoch nur mit Benutzereingaben, die nicht genau dem Datumsformat entsprechen, so viel bewirken kann. Dies bedeutet, dass es ohne Validierung möglich ist, ein Datum zurückzugewinnen, das sich von den Erwartungen des Benutzers unterscheidet. Vorbehalt Emptor .

Par
quelle
2

Ich verwende jquery für datepicker. Diese jqueries werden dafür verwendet

<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">

Dann folgen Sie diesem Code,

<script>
     jQuery(function() {
     jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
                });
</script>
Sinsil Mathew
quelle
2

Meine Option ist unten angegeben:

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>


quelle
1

Endlich die Antwort für die Datumsauswahl-Datumsänderungsmethode:

$('#formatdate').change(function(){
    $('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
Ravi Soni
quelle
1

Ich benutze das:

var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');

Welches ein Datum des Formats wie " 20120118" für zurückgibt Jan 18, 2012.

Daniel Morin
quelle
1

Der folgende Code kann hilfreich sein, um zu überprüfen, ob das Formular mehr als ein Datumsfeld enthält:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    function pickDate(DateObject){
//      alert(DateObject.name)
       $(function() {
               $("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
       });
    }
/*
    $(function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
*/
    </script>
</head>
<body>

<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>


</body>
</html>
Chakry
quelle
2
Wie beantwortet dies die ursprüngliche Frage zu Datumsformaten?
Ryadavilli
0

Ich denke, der richtige Weg, dies zu tun, wäre ungefähr so:

var picker = $('.date-picker');
var date = $.datepicker.formatDate(
    picker.datepicker('option', 'dateFormat'),
    picker.datepicker('getDate'));

Auf diese Weise stellen Sie sicher, dass die Formatzeichenfolge nur einmal definiert ist, und verwenden denselben Formatierer, um die Formatzeichenfolge in das formatierte Datum zu übersetzen.

Naktinis
quelle
0

Hier ist ein sofort einsatzbereites Datumsausschnitt. Firefox verwendet standardmäßig jquery ui datepicker. Andernfalls wird HTML5 Datepicker verwendet. Wenn FF jemals HTML5 type = "date" unterstützt, ist das Skript einfach redundant. Vergessen Sie nicht, dass die drei Abhängigkeiten im Head-Tag benötigt werden.

<script>
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
    <label for="date" class="col-sm-2 col-form-label"Date</label>
    <div class="col-sm-10">          
       <input type="date" class="form-control" name="date" id="date" placeholder="date">
    </div>
</div>

<!--if the user is using FireFox it          
autoconverts type='date' into type='text'. If the type is text the 
script below will assign the jquery ui datepicker with options-->
<script>
$(function() 
{
  var elem = document.createElement('input');
  elem.setAttribute('type', 'date');

  if ( elem.type === 'text' ) 
  {
    $('#date').datepicker();
    $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );     
  }
});
Jimshot
quelle
0

Sie sollten data-date-format="yyyy-mm-dd"in Ihrem Eingabefeld HTML und die anfängliche Datenauswahl in JQuery wie einfach verwenden

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});
SK Entwickler
quelle
0

Sie können Folgendes hinzufügen und ausprobieren:

HTML- Datei:

<p><input type="text" id="demoDatepicker" /></p>

JavaScript- Datei:

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});
Ashraf.Shk786
quelle
0

Das hat bei mir funktioniert:

$.fn.datepicker.defaults.format = 'yy-mm-dd'
LalienX
quelle
0

Also kämpfte ich damit und dachte, ich würde verrückt werden. Die Sache ist, dass der Bootstrap-Datepicker implementiert wurde, nicht jQuery, also waren die Optionen unterschiedlich.

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})
Tristanisginger
quelle