jQuery UI DatePicker - Zmień format daty

Używam UI DatePicker z jQuery UI jako samodzielnego selektora. Mam ten kod:

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

I następujący JS:

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

Kiedy próbuję zwrócić wartość z tym kodem:

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

Zwrócono mi to:

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

Który jest całkowicie niewłaściwy format. Czy istnieje sposób, aby go zwrócić w formacie DD-MM-YYYY?

Oto jeden konkretny kod:

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

Więcej ogólnych informacji dostępnych tutaj:

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

wewnątrz kodu skryptu jQuery po prostu wklej kod.

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

to powinno działać.

The getDateMetoda datepicker zwraca format daty, a nie ciąg.

Musisz sformatować zwróconą wartość w ciągu za pomocą formatu daty. Użyj formatDatefunkcji datepicker :

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

Pełna lista specyfikatorów formatu jest dostępna tutaj .

Tutaj należy wpisać kod selektora daty z formatem daty (rr / mm / dd).

Skopiuj poniższy link i wklej w tagu head:

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

Skopiuj poniższy kod i wklej między tagiem body:

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

Jeśli chcesz dwa (2) typy tekstu jak, Start Datea End Datenastępnie użyj tego skryptu i zmień format daty.

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

Dwa tekst wejściowy, taki jak:

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

format daty

Format parsowanych i wyświetlanych dat. Ten atrybut jest jednym z atrybutów regionalizacji. Pełna lista możliwych formatów znajduje się w funkcji formatDate.

Przykłady kodu Zainicjuj narzędzie datepicker z określoną opcją dateFormat.

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

Pobierz lub ustaw opcję dateFormat po inicjacji.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

getDatefunkcja zwraca datę JavaScript. Użyj następującego kodu, aby sformatować tę datę:

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

Korzysta z funkcji narzędzia wbudowanej w datepicker:

$.datepicker.formatDate( format, date, settings ) - Sformatuj datę na wartość ciągu o określonym formacie.

Pełna lista specyfikatorów formatu jest dostępna tutaj .

$("#datepicker").datepicker("getDate") zwraca obiekt daty, a nie ciąg znaków.

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>

Spróbuj użyć

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

i jest wiele opcji dostępnych dla datepicker'a można go znaleźć tutaj

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

W ten sposób nazywamy datepicker parametrem

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

możesz po prostu użyć tego formatu w tobie, tak jak działa

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

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

Jeśli potrzebujesz daty w formacie rr-mm-dd, możesz użyć tego: -

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

Wszystkie obsługiwane formaty można znaleźć https://jqueryui.com/datepicker/#date-formats

Potrzebowałem 06 grudnia 2015, zrobiłem to: -

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

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

Wystarczy uruchomić tę stronę HTML, możesz zobaczyć kilka formatów.

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

To też działa:

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

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

To działa płynnie. Spróbuj tego.

Wklej te linki w sekcji głównej.

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

Poniżej znajduje się kodowanie JS.

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

Jeśli ustawisz datepicker na input[type="text"]elemencie, możesz nie uzyskać spójnie sformatowanej daty, szczególnie gdy użytkownik nie stosuje formatu daty do wprowadzania danych.

Na przykład po ustawieniu dateFormat jako dd-mm-yyi typach użytkowników 1-1-1. Datepicker przekonwertuje to na Jan 01, 2001wewnętrznie, ale wywołanie val()obiektu datepicker zwróci ciąg "1-1-1"- dokładnie to, co jest w polu tekstowym.

Oznacza to, że powinieneś albo sprawdzać poprawność danych wprowadzanych przez użytkownika, aby upewnić się, że wprowadzona data jest w oczekiwanym formacie, albo nie zezwalać użytkownikowi na wprowadzanie dowolnych dat (preferując zamiast tego wybór kalendarza). Nawet tak, to jest możliwe, aby wymusić kod datepicker dać ciąg sformatowany jak można się spodziewać:

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"

Należy jednak pamiętać, że chociaż getDate()metoda datepicker zwróci datę, może to zrobić tylko tyle, ile dane wejściowe użytkownika nie pasują dokładnie do formatu daty. Oznacza to, że przy braku sprawdzania poprawności możliwe jest odzyskanie daty innej niż oczekiwana przez użytkownika. Zastrzegający emptor .

Używam jquery dla datepicker. Te jqueries są do tego używane

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

Następnie postępujesz zgodnie z tym kodem,

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

Moja opcja jest podana poniżej:

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

Wreszcie otrzymałem odpowiedź na metodę zmiany daty datepicker:

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

Używam tego:

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

Która zwraca datę formatu „ 20120118” dla Jan 18, 2012.

Poniższy kod może pomóc sprawdzić, czy formularz ma więcej niż 1 pole daty:

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

Myślę, że właściwym sposobem na zrobienie tego byłoby coś takiego:

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

W ten sposób upewniasz się, że ciąg formatu jest zdefiniowany tylko raz i używasz tego samego formatyzatora do przetłumaczenia ciągu formatu na sformatowaną datę.

Oto gotowy fragment daty przyszłej próby. Firefox domyślnie używa jperydowego interfejsu użytkownika datepicker. W przeciwnym razie używany jest datepicker HTML5. Jeśli FF kiedykolwiek będzie obsługiwać HTML5 type = "date", skrypt będzie po prostu zbędny. Nie zapomnij, że w tagu head potrzebne są trzy zależności.

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

powinieneś użyć data-date-format="yyyy-mm-dd"w swoim polu wejściowym HTML i początkowego selektora danych w JQuery tak samo prosto

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

Możesz dodać i wypróbować w ten sposób:

Plik HTML :

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

Plik JavaScript :

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

Oto, co zadziałało dla mnie:

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

Więc zmagałem się z tym i myślałem, że oszaleję, chodzi o to, że wdrażanie datepicker'a było wdrażane, a nie jQuery, więc opcje były różne;

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