DatePicker dell'interfaccia utente jQuery: modifica il formato della data

Sto usando l'interfaccia utente 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 tornato questo:

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

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

Ecco uno specifico per il tuo codice:

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

Altre informazioni generali disponibili qui:

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

all'interno del codice dello script jQuery basta incollare il codice.

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

questo dovrebbe funzionare.

Il getDate metodo di datepicker restituisce un tipo di data, non una stringa.

È necessario formattare il valore restituito in una stringa utilizzando il formato della data. Usa la formatDatefunzione di datepicker :

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

L'elenco completo degli identificatori di formato è disponibile qui .

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

Copia il link seguente 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 sotto il codice e incolla tra tag body:

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

Se desideri due (2) tipi di testo di input come Start Datee End Datequindi 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"/>

formato data

Il formato per le date analizzate e visualizzate. Questo attributo è uno degli attributi di regionalizzazione. Per un elenco completo dei possibili formati consultare 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' );

getDateLa funzione 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);

Utilizza una funzione di utilità integrata in datepicker:

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

L'elenco completo degli identificatori di formato è disponibile qui .

$("#datepicker").datepicker("getDate") restituisce un oggetto data, non una stringa.

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>

Prova a usare il

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

e ci sono molte opzioni disponibili Per il datepicker puoi trovarlo qui

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

Questo è il modo in cui chiamiamo il datepicker con il parametro

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

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>

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

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

Puoi trovare tutto il formato supportato https://jqueryui.com/datepicker/#date-formats

Avevo bisogno di 06, dic 2015, ho fatto questo: -

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

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

Basta eseguire questa pagina HTML, è possibile visualizzare diversi formati.

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

Funziona anche questo:

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

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

Funziona senza problemi. Prova questo.

Incolla questi collegamenti nella 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 è riportato il codice 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>

Se si imposta un datepicker su un input[type="text"]elemento, è possibile che non si ottenga 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 si imposta dateFormat come dd-mm-yye i tipi utente 1-1-1. Il datepicker lo convertirà Jan 01, 2001internamente, ma chiamando val()l'oggetto datepicker restituirà la stringa"1-1-1" , esattamente ciò che è nel campo di testo.

Ciò implica che dovresti convalidare l'input dell'utente per assicurarti che la data inserita sia nel formato che ti aspetti o non consentire all'utente di inserire le date in forma libera (preferendo invece il selettore del calendario). Anche così è possibile forzare il codice datepicker a 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"

Tieni presente, tuttavia, che mentre il getDate()metodo del datepicker restituirà una data, può fare solo 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 di ritorno diversa da quella che l'utente si aspetta. Caveat emptor .

Sto usando jquery per datepicker. Questi jquery sono usati 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>

La mia opzione è indicata di seguito:

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

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

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

Io lo uso questo:

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

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

Il codice seguente 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 di fare questo sarebbe qualcosa del genere:

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

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

Ecco uno snippet di data out-of-box a prova di futuro. Per impostazione predefinita, Firefox utilizza jquery ui datepicker. Altrimenti viene utilizzato HTML Datepicker. Se FF mai supporta 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' );     
  }
});

dovresti usare data-date-format="yyyy-mm-dd"nel tuo campo di input html e selettore dati iniziale in JQuery proprio come semplice

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

Puoi aggiungere e provare in questo modo:

File HTML :

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

File JavaScript :

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

Questo è ciò che ha funzionato per me:

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

Quindi ho lottato con questo e ho pensato che stavo diventando matto, il fatto è che bootstrap datepicker era stato implementato non jQuery, quindi le opzioni erano diverse;

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