it-swarm.com.de

jQuery UI DatePicker - Datumsformat ändern

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

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

Und das 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 das völlig falsche Format. Gibt es eine Möglichkeit, wie ich es im Format DD-MM-YYYY zurückerhalten kann?

524
tarnfeld

Hier ist eines speziell für Ihren Code:

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

Weitere allgemeine Informationen finden Sie hier:

920
AvatarKava

fügen Sie den Code einfach in den jQuery-Skriptcode ein.

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

das sollte funktionieren.

95
sampath

Die Methode getDate von datepicker gibt einen Datumstyp und keine Zeichenfolge zurück.

Sie müssen den zurückgegebenen Wert unter Verwendung Ihres Datumsformats in eine Zeichenfolge formatieren. Verwenden Sie die Funktion formatDate von datepicker:

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

Die vollständige Liste der Formatbezeichner hier verfügbar .

59
kcsoft

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

Kopiere den unten stehenden Link und füge ihn in 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 den Body-Tag ein:

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

Wenn Sie zwei (2) Eingabetypen wie Start Date und End Date möchten, verwenden Sie dieses Skript und ändern Sie das 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"/>
33
Nasirali

getDate Funktion 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 Utility-Funktion, die in Datepicker integriert ist:

$.datepicker.formatDate( format, date, settings ) - Formatiert ein Datum in einen Zeichenfolgenwert mit einem angegebenen Format.

Die vollständige Liste der Formatbezeichner hier verfügbar .

18
Salman A

dateFormat

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

Holen oder setzen Sie die Option dateFormat nach init.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
17
user369661
<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>
9
Muddasir Abbas

$("#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
9
Catalin

Versuchen Sie das zu benutzen

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

und es gibt viele Optionen für die Datumsauswahl finden Sie hier

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

So nennen wir den Datepicker mit dem Parameter

$(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 
             }
      });
});
8
Ritesh d joshi

sie können dieses Format einfach in Ihrer Funktion genauso verwenden

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

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

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 https://jqueryui.com/datepicker/#date-formats

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

$("#datepicker").datepicker({ dateFormat: "d M,y" });
5
Kgn-web

Das funktioniert auch:

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

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>
3
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
3
sad

Das 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>
2
Dulith De Costa

Ich benutze 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>
2
Sinsil Mathew

Wenn Sie eine Datumsauswahl 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 befolgt.

Wenn Sie beispielsweise das Datumsformat auf dd-mm-yy setzen und der Benutzer 1-1-1 eingibt. Der Datepicker konvertiert dies intern in Jan 01, 2001, aber der Aufruf von val() für das Datepicker-Objekt gibt die Zeichenfolge "1-1-1" zurück - genau das, was sich im Textfeld befindet.

Dies bedeutet, dass Sie entweder die Benutzereingabe validieren sollten, um sicherzustellen, dass das eingegebene Datum das von Ihnen erwartete Format hat, oder dass der Benutzer keine Daten in Freiform eingeben kann (stattdessen die Kalenderauswahl bevorzugen). Trotzdem ist es is möglich, den Datepicker-Code zu zwingen, Ihnen eine Zeichenfolge zu geben, die so formatiert ist, wie Sie es erwarten:

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 Datumswählers 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. Vorbehaltsklausel.

2
par

Endlich die Antwort für die Datumsänderungsmethode:

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

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>
1
user6703538

Ich benutze das:

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

Dies gibt ein Datum im Format "20120118" für Jan 18, 2012 zurück.

1
Daniel Morin

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>
1
Chakry

Ich denke, der richtige Weg, dies zu tun, wäre etwa 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 Sie verwenden denselben Formatierer, um die Formatzeichenfolge in das formatierte Datum zu übersetzen.

0
naktinis

Das hat bei mir funktioniert:

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

sie sollten data-date-format="yyyy-mm-dd" in Ihrem Eingabefeld html und der anfänglichen Datenauswahl in JQuery genau so einfach verwenden

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

Sie können Folgendes hinzufügen und versuchen:

HTML Datei:

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

JavaScript Datei:

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

Hier ist ein vorgefertigtes, zukunftssicheres Datumsausschnitt. Firefox fragt standardmäßig ui datepicker ab. Andernfalls wird der 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' );     
  }
});
0
jimshot