jQuery UI DatePicker - Cambia il formato della data

13 Answers

all'interno del codice dello script jQuery è sufficiente incollare il codice.

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

questo dovrebbe funzionare

jquery jquery-ui date jquery-ui-datepicker

Sto usando UI DatePicker dall'interfaccia utente di jQuery come selettore autonomo. Ho questo codice:

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

E il seguente JS:

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

Quando provo a restituire il valore con questo codice:

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

Sono restituito questo:

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

Che è totalmente il formato sbagliato. C'è un modo per ottenerlo restituito nel formato DD-MM-YYYY ?




Qui il codice completo per la selezione della data con formato data (aa / mm / gg).

Copia il link sottostante e incolla il tag 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>

Copia qui sotto il codice e incollalo tra tag del corpo:

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

Se si desidera inserire due (2) tipi di testo di testo come Start Date e End Date utilizzare questo script e modificare il formato della data.

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

Due testi di input come:

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



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

Il formato per le date analizzate e visualizzate. Questo attributo è uno degli attributi di regionalizzazione. Per un elenco completo dei possibili formati, vedere la funzione formatDate.

Esempi di codice Inizializza un datepicker con l'opzione dateFormat specificata.

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

Ottieni o imposta l'opzione dateFormat, dopo init.

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



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



puoi semplicemente usare questo formato nella tua funzione proprio come

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

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



Anche questo funziona:

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



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



Se si imposta un Datepicker su un elemento input[type="text"] potrebbe non essere possibile ottenere una data formattata in modo coerente, in particolare quando l'utente non segue il formato della data per l'immissione dei dati.

Ad esempio, quando imposti dateFormat come dd-mm-yy e l'utente digita 1-1-1 . Il datepicker convertirà internamente questo al Jan 01, 2001 ma chiamando val() sull'oggetto datepicker restituirà la stringa "1-1-1" - esattamente ciò che è nel campo di testo.

Ciò implica che è necessario convalidare l'input dell'utente per garantire che la data inserita sia nel formato previsto o non consenta all'utente di inserire date di forma libera (preferendo invece il selettore di calendario). Anche così è possibile forzare il codice datepicker per darti una stringa formattata come ti aspetti:

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"

Si noti tuttavia che mentre il metodo getDate() di datepicker restituisce una data, può fare così tanto con l'input dell'utente che non corrisponde esattamente al formato della data. Ciò significa che in assenza di convalida è possibile ottenere una data diversa da quella che l'utente si aspetta. Caveat emptor .




Finalmente ho ottenuto la risposta per il metodo di modifica della data di datepicker:

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



Sotto il codice potrebbe aiutare a verificare se il modulo ha ottenuto più di 1 campo data:

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



Penso che il modo corretto per farlo sarebbe qualcosa del genere:

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

In questo modo ci si assicura che la stringa di formato sia definita una sola volta e si usi lo stesso formattatore per tradurre la stringa di formato nella data formattata.




Puoi aggiungere e provare in questo modo:

File HTML :

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

File JavaScript :

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



Funziona perfettamente. Prova questo.

Incolla questi link nella tua sezione principale.

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

Di seguito è riportata la codifica 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>


Related