jQuery UI DatePicker - Datumsformat ändern

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?

Hier ist eine für Ihren Code spezifische:

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

Weitere allgemeine Informationen finden Sie hier:

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

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

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

das sollte funktionieren.

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 .

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"/>

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

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 .

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

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

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

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>

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

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

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>

Das funktioniert auch:

$("#datepicker").datepicker({
    dateFormat:'d-m-yy'
});

<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

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>

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 .

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>

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>

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

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

Ich benutze das:

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

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

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>

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.

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

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

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

Das hat bei mir funktioniert:

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

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