Quando si utilizza jquery datepicker, qual è il modo corretto di gestire le persone digitando date in formati diversi?

Question

Ho il seguente codice:

$('#MilestoneStartDate').datepicker({ 
    dateFormat: 'dd M yy' 
}); 

e tutto funziona bene se si utilizza il mouse per fare clic su una data nel popup per inserire una data, ma se una tipi di persona in una data o paste in una data nel box con un formato diverso da quello sopra (ad esempio "2016/01/01"), quando ho questo codice:

var startDate = $('#MilestoneStartDate').datepicker("getDate"); 

startDate spettacoli variabili come data corrente (anche se ovviamente è 2016/01/01 non la data corrente)

qual è il modo migliore per gestire queste situazioni? Devo impedire alle persone di digitare e incollare in date o c'è un modo per fare una conversione di formato?

Answer 1

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

È necessario formattare il valore restituito su una stringa utilizzando il formato della data. Utilizzare la funzione di FormatoData datepicker:

var startDate = $('#MilestoneStartDate').datepicker('getDate'); 
$.datepicker.formatDate('dd M yy', startDate); 

L'elenco completo degli identificatori di formato è available here.

EDIT

$('#MilestoneStartDate').datepicker("getDate"); 

sempre dare la data corretta se la data è selezionata per mouse per fare clic su una data a finestra, ma se qualcuno scrivere manualmente o la data di pasta in diversi formati questo ti dà la data corrente.

Per gestire questa situazione, utilizzare il codice seguente.

$(function(){  
    $('#MilestoneStartDate').datepicker({ 
     dateFormat: 'dd M yy' 
    });  
}); 

var strSelectedDate = new Date($('#MilestoneStartDate').val()); 
var formatedDate = $.datepicker.formatDate('dd M yy', strSelectedDate); 
alert(formatedDate); 

Working Demo

Come per @Boris Serebrov commento

La chiave è new Date ($ ('# MilestoneStartDate') val()). - si cerca in realtà di "indovinare" il formato, quindi cose come "2 mar 2016", "2 marzo 2016" o "2016, 2 marzo" verranno analizzate correttamente.

Passo dopo passo:

Caso 1:

Qui strSelectedDate ti danno la data in formato standard permette di dire se seleziono 02 Mar 2016 dalla data di comparsa è dare

Mer 2 marzo 2016 00:00:00 GMT + 0530

Ora

$.datepicker.formatDate('dd M yy', strSelectedDate); 

darvi la data del formato come muggito

02 Mar 2016

Caso: 2

Come si menziona nella sua domanda se l'utente inserire manualmente data come 1/1/2016 strSelectedDate fornire la data standard come muggito

Ven 1 Gennaio 2016 00:00:00 GMT + 0530

Poi

$.datepicker.formatDate('dd M yy', strSelectedDate); 

darvi la data formattato

01 gen 2016

Qual è la data corretta come previsto.

Caso 3:

Ora, se utenti Scrivi una certa data non valida manualmente come 112016 poi strSelectedDate rendimenti Invalid Date ecco è possibile attuare alcune validazione lato client all'utente di inserire la data corretta.

Spero che questo ti aiuti.

Answer 2

È possibile disattivare la casella di testo dalle persone da modificare e posizionare un'icona accanto. Le persone devono fare clic sull'icona e inserire la data. Quindi copia incolla non funzionerà qui.

Answer 3

Risposta breve: consente all'utente di correggere i suoi errori (è possibile consentire di incollare, non è un problema). Basta attenersi a un semplice meccanismo di convalida.

Risposta lunga:

Credo che si dovrebbe consentire agli utenti di incollare il testo, ma non ha senso per convalidare il modulo fino a quando tutti i comandi sono validi.

Quindi se l'utente incolla una data errata nel controllo della data, quando fa clic sul pulsante di invio, l'interfaccia utente dovrebbe visualizzare un messaggio di errore che dice qualcosa come: "la data non ha il formato corretto. è dd M yy ".

Si noti che l'utente può realmente incollare qualsiasi cosa, anche una stringa come "izeoif zoi"; quindi hai bisogno di validazione comunque.

Quando l'utente è il colpevole, deve correggere i suoi errori (credo).

È molto comune dire all'utente che un controllo è errato: ad esempio, suppongo che tu conosca il messaggio di errore: "Il nome è obbligatorio". Questa è la stessa idea qui.

Come ha sottolineato @Eric Guan, è possibile utilizzare suggerimenti per aiutare l'utente a ottenere l'idea del formato della data in primo luogo (prima che lei digiti/incolla qualcosa).

Answer 4

La convalida è una buona idea. Inoltre si potrebbe scrivere il proprio plugin per cambiare formati di data o di guardare a questo: https://plugins.jquery.com/formatDateTime/

Answer 5

La cosa giusta da fare, sarebbe quello di dire all'utente che cosa formato della data è previsto e sarebbe valido all'ingresso.

Questo è considerato buono UX, ed è così comunemente usato che la maggior parte degli utenti si aspetterebbe.

Inoltre, non si può forse analizzare tutti i tipi di date immessi, ad esempio, alcuni paesi utilizzano MM/DD/YYYY mentre altri usano DD/MM/YYYY, e chi può dire se 01/07/2015 è il settimo di gennaio o il primo di luglio, non c'è proprio nessun modo per dire senza conoscere il formato.

Come stai usando jQuery UI, ecco un modo veloce per convalidare il DatePicker utilizzando il costruito nel widget di Descrizione comando

$('#MilestoneStartDate').datepicker({ 
 
    dateFormat: 'dd M yy' 
 
}).on({ 
 
\t change : function() { 
 
     if (!this.checkValidity()) { 
 
     \t $(this).tooltip({ 
 
\t \t \t \t close: function(event, ui) { ui.tooltip.stop() } 
 
\t \t \t }); 
 
      setTimeout(function(x) { $(x).tooltip('open') }, 0, this); 
 
     } else { 
 
     \t $(this).tooltip('destroy'); 
 
     } 
 
    } 
 
}).datepicker('setDate', new Date());

.ui-datepicker{ z-index: 999999999!important;} 
 
.ui-tooltip-content {font-size: 14px;}

<link href="https://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 
<p>Type an invalid date</p> 
 
<input id="MilestoneStartDate" pattern="[0-9]{2}\s[a-zA-Z]{3}\s[0-9]{4}" title='valid format is : "10 Mar 2015"' >

Nota che il modello per convalidare contro viene aggiunto direttamente al l'input, così è il contenuto del tooltip.
Esistono molti altri modi per farlo, se si utilizza un invio normale del modulo, la convalida HTML5 sarebbe un'opzione, ecc. Ma alla fine della giornata, richiedendo che l'utente immetta una data valida in base al modello specificato, è meglio che cercare di gestire tutti i tipi di formati di data.

Answer 6

È meglio impedire all'utente di digitare o incollare le date. Rendi la tua casella di testo della data in sola lettura con readonly='readonly'