2013-07-02 13 views
23

Desidero che gli utenti siano in grado di modificare un valore DatePicker dell'interfaccia utente Kendo solo tramite il relativo pulsante e selezionando la data dal popup. Come posso impedire agli utenti di digitare nella casella di testo Datepicker? Posso disabilitare la casella di testo senza disabilitare l'intero controllo?Kendo UI Datepicker disabilita la digitazione

risposta

8

Trova il tuo elemento di input, e disabilitarlo

$('#datepicker').attr('disabled','disabled'); 

(provato sul kendo sito demo http://demos.kendoui.com/web/datepicker/index.html)

+1

questo funziona ma quando l'input ha un data-bind = "disabled: XXX" allora non funzionerà per qualche motivo – xinthose

+0

Ho avuto lo stesso problema, ed è stato in grado di farlo funzionare quando si utilizza un 'data- bind = "disabled: XXX" 'legandosi all'evento change del viewmodel, e in quella funzione associata l'impostazione dell'attributo disabilitato ogni volta che i dati del viewmodel cambiano. –

2

Se si vuole evitare che utenti fino ad oggi nel selettore data e unica data selezionare la digitazione dal pop -up provare questo codice

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly"); 
+0

questo è perfetto – a0z0ra

1

Naturalmente, il widget data e ora picker dovrebbe avere la possibilità di forzare solo ingresso con interfaccia utente e non da ke yboard ... Altrimenti è una ricetta per un vero DateTime che "forma" un incubo! Sono abbastanza sorpreso che il framework non fornisca nulla per questo ovvio caso d'uso.

Ho avuto la stessa necessità e ottenuto di lavorare utilizzando la seguente logica:

$("#date").kendoDatePicker({ 
    format: "dd MMMM yyyy" 
}); 
$("#date").attr("readonly","readonly"); 

In questo modo l'utente non può immettere un valore da tastiera e può solo inserire una data ben formattato utilizzando la finestra di selezione data di discesa .

43

Sul elemento di input aggiungere questo attributo e il valore ...

onkeydown="return false;" 

Questo disabiliterà input digitato e consentono ancora utilizzando l'ingresso controllo calendario.

+1

unica soluzione che ho trovato che funziona bene con l'integrazione di angularjs ...Grazie – simpleusr

4

lo si può fare in due modi

//disable kendo ui datapicker click event 
    $(".k-datepicker input").bind('click dblclick',function() { 
     return false; 
    }); 

    //make it readonly 
    $(".k-datepicker input").prop("readonly", true); 
+0

Penso che la prima opzione non impedirà all'utente di raggiungere il controllo premendo TAB. – Andrew

6

Utilizzare il controllo come sotto-

@(Html.Kendo().DatePicker() 
.Name("FromDate") 
.HtmlAttributes(onkeydown="javascript:return false;" }) 
    ) 

Sarà disabilitare digitazione della tastiera. Allo stesso modo possono essere gestite anche altre condizioni.

+5

Funziona bene anche se la sintassi dovrebbe essere: .HtmlAttributes (new {onkeydown = "javascript: return false;"}) – iandayman

+0

Soluzione eccellente: D grazie! –

0

Infatti, il widget non limita l'utente mentre digita l'input. La ragione di questo comportamento è spiegato qui: Why widget does not restrict typing

Insieme a tutte le altre soluzioni condivise in questa discussione, l'uno può creare un costume mascherato DatePicker, che limiterà l'utente in un formato data specifica. Controllare questo how-to demo per maggiori dettagli:

Create Date Masking

** Si noti che questo non è supportato da Kendo UI come un built-in funzione, quindi avrete bisogno di usarlo a proprio rischio. La buona notizia è che funziona piuttosto bene senza effetti collaterali noti.