jQuery UI DatePicker - Cambia il formato della data


Answers

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

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

questo dovrebbe funzionare

Question

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 ?




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



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



Ecco uno snippet di date a prova di futuro. Il valore predefinito di Firefox è jquery ui datepicker. In caso contrario, viene utilizzato il DatePicker HTML5. Se FF supporta mai HTML5 type = "date" lo script sarà semplicemente ridondante. Non dimenticare che le tre dipendenze sono necessarie nel tag head.

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



Sto usando jquery per datepicker. Queste jqueries sono usate per questo

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

Quindi segui questo codice,

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



Se hai bisogno della data nel formato aa-mm-gg, puoi usare questo: -

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

Puoi trovare tutti i formati supportati https://jqueryui.com/datepicker/#date-formats

Avevo bisogno di 06, dic 2015, l'ho fatto: -

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



dovresti usare data-date-format="yyyy-mm-dd" nel tuo campo di input html e il selettore di dati iniziale in J Query come se fosse semplice
$("#issue_date").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true });




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



Io uso questo:

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

Che restituisce una data di formato come " 20120118 " per il Jan 18, 2012 .




getDate funzione getDate restituisce una data JavaScript. Utilizzare il seguente codice per formattare questa data:

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

Usa una funzione di utilità che è incorporata in DatePicker:

$.datepicker.formatDate( format, date, settings ) - Formatta una data in un valore stringa con un formato specificato.

L'elenco completo degli specificatori di formato http://api.jqueryui.com/datepicker/#utility-formatDate .




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 .






Related