DateQuicker jQuery com entrada de texto que não permite a entrada do usuário

140

Como usar o jQuery Datepicker com uma entrada da caixa de texto:

$("#my_txtbox").datepicker({
  // options
});

isso não permite que o usuário insira texto aleatório na caixa de texto. Quero que o Datepicker apareça quando a caixa de texto ganhar foco ou o usuário clicar nela, mas quero que a caixa de texto ignore qualquer entrada do usuário usando o teclado (copiar e colar ou qualquer outra). Quero preencher a caixa de texto exclusivamente do calendário do Datepicker.

Isso é possível?

jQuery 1.2.6
Datepicker 1.5.2

Elliot Vargas
fonte

Respostas:

269

Você deve poder usar o atributo readonly na entrada de texto, e o jQuery ainda poderá editar seu conteúdo.

<input type='text' id='foo' readonly='true'>
Adam Bellaire
fonte
30
Para pessoas com o Javascript desativado, deixaria o campo de entrada sozinho no HTML e o jQuery colocaria o atributo readonly na página load $ (document) .ready (function () {$ ("# my_txtbox"). Attr 'readOnly', 'true'); }); Que os usuários de vias com JS desligado ainda pode escolher uma data
SimonGates
6
isso é ótimo .. No entanto, o padrão de estilo que Chrome (e possivelmente outros navegadores) acrescenta atributos somente leitura é realmente desagradável, portanto certifique-se de substituí-lo
Damon
1
@FooBar Você propôs uma solução prática; apenas uma nota que a maneira preferida atual (como algum tempo se passou desde o seu comentário) para definir o atributo somente leitura é através do método prop ():$("#my_txtbox").prop('readonly', true)
Werner
2
Conforme especificação WC3 HTML, sua única <input somente leitura> ou <input readonly = "readonly"> sem verdadeiro / falso w3.org/TR/html5/forms.html#the-readonly-attribute
Ankit Sharma
5
Eu usaria um ponteiro cursor para torná-la clicável<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Benjamin Lucidarme
61

Com base na minha experiência, eu recomendaria a solução sugerida por Adhip Gupta:

$("#my_txtbox").attr( 'readOnly' , 'true' );

O código a seguir não vai deixar o tipo de usuário novos personagens, mas irá permitir-lhes caracteres de exclusão:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Além disso, isso tornará o formulário inútil para aqueles que têm o JavaScript desativado:

<input type="text" readonly="true" />
2046
fonte
3
O OP deve considerar marcar isso como a resposta devido ao cenário de desativação do JavaScript.
CeejeeB
7
em que universo paralelo as pessoas usam sites regulares com javascript desativado?
d.raev
Como essa resposta do JAVASCRIPT ajudaria se o JavaScript estivesse desativado?
PW Kad
1
Ao adicionar o readonlyatributo ao campo via JS, o @PWKad garante que, se o JavaScript estiver desativado (e, portanto, não for possível usar o datepicker), eles ainda poderão usar o formulário através da entrada manual padrão.
Jonathan Bender
2
No momento da escrita, esta é a forma preferida de definir o atributo somente leitura usando jQuery: $("#my_txtbox").prop('readonly', true);
Werner
13

experimentar

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Brad8118
fonte
Eu usei isso com asp.net com sucesso, uma vez que não jogar bonito ao definir o <asp: textbox> atributo somente leitura para "true"
Russ Cam
2
Isso não impede que alguém cole um valor na caixa de texto para referência futura.
Erik Philips
10

Se você estiver reutilizando o selecionador de data em vários locais, poderá modificar a caixa de texto também via JavaScript usando algo como:

$("#my_txtbox").attr( 'readOnly' , 'true' );

logo após / antes do local onde você inicializou o datepicker.

Adhip Gupta
fonte
6
<input type="text" readonly="true" />

faz com que a caixa de texto perca seu valor após a postagem.

Você prefere usar a sugestão de Brad8118, que está funcionando perfeitamente.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

EDIT: para fazê-lo funcionar no IE, use 'keydown' em vez de 'keypress'


fonte
4
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

adicione o atributo somente leitura no jquery.

Chenthil
fonte
4

Você tem duas opções para fazer isso. (Até onde sei)

  1. Opção A: Faça seu campo de texto somente leitura. Isso pode ser feito da seguinte maneira.

  2. Opção B: Altere o cursor no foco. Defina ti para desfocar. isso pode ser feito configurando o atributo onfocus="this.blur()"no campo de texto do seletor de datas.

Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

user2182143
fonte
2
o hack do blur foi meio incrível. O campo não precisava ser somente leitura, o que confunde alguns usuários quando o STOP vermelho gigante aparece em um campo no Chrome ... evita recortar e colar, exclusões, digitações, etc. ... e o jquery datepicker ainda funciona perfeitamente ...
David C
4

Após inicializar o seletor de datas:

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);
umutesen
fonte
Ou em uma única etapa$(".project-date").datepicker().keydown(false);
Christian Lescuyer
3

Para selecionar a data para aparecer no foco de ganho:

$(".selector").datepicker({ showOn: 'both' })

Se você não deseja entrada do usuário, adicione-o ao campo de entrada

<input type="text" name="date" readonly="readonly" />
Eduardo Molteni
fonte
3

Acabei de me deparar com isso, então estou compartilhando aqui. Aqui está a opção

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Aqui está o código.

HTML

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

JS

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

Aqui está o violino:

http://jsfiddle.net/matbaric/wh1cb6cy/

Minha versão do bootstrap-datetimepicker.js é 4.17.45

Matija
fonte
1

Essa demonstração faz isso colocando o calendário sobre o campo de texto para que você não possa digitá-lo. Você também pode definir o campo de entrada como somente leitura no HTML para ter certeza.

<input type="text" readonly="true" />
Zach
fonte
1

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
kayz1
fonte
1

Eu sei que esse segmento é antigo, mas para outros que encontram o mesmo problema, que implementam a solução @ Brad8118 (que eu prefiro, porque se você optar por fazer a entrada somente leitura, o usuário não poderá excluir o valor da data inserido no datepicker se ele escolher) e também precisar impedir que o usuário cole um valor (como @ErikPhilips sugeriu ser necessário), deixei esta adição aqui, que funcionou para mim: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });daqui https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-jquery-javascript e todo o script específico usado por mim (usando o plugin fengyuanchen / datepicker):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;
Mariana Marica
fonte
0

Descobri que o plug-in jQuery Calendar, pelo menos para mim, geralmente funciona melhor para selecionar datas.

James Curran
fonte
0
$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});
LithiumD
fonte
0

Aqui está sua resposta, que é uma maneira de resolver. Você não deseja usar o jquery quando restringiu a entrada do usuário no controle da caixa de texto.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>
johnkhadka
fonte
0

$ ("# my_txtbox"). prop ('somente leitura', true)

funcionou como um encanto ..

Prakash Singh
fonte
0

Em vez de usar a caixa de texto, você pode usar o botão também. Funciona melhor para mim, onde não quero que os usuários escrevam a data manualmente.

insira a descrição da imagem aqui

Ajjay Arora
fonte
0

Eu sei que esta pergunta já foi respondida e a mais sugerida é usar readonlyatributos.
Eu só quero compartilhar meu cenário e responder.

Depois de adicionar o readonlyatributo ao meu elemento HTML , enfrentei o problema de não conseguir criar esse atributo tão requireddinamicamente.
Mesmo tentei definir como ambos readonlyerequired no momento da criação do HTML.

Então, vou sugerir não usar readonlyse você quiser configurá-lo como requiredtambém.

Em vez disso, use

$("#my_txtbox").datepicker({
    // options
});

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

Isso permite pressionar tabapenas a tecla.
Você pode adicionar mais códigos de chave que deseja ignorar.

Eu abaixo do código desde que adicionei os dois readonlye requiredele ainda envia o formulário.
Depois de removê- readonlylo, funciona corretamente.

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() {
  $('#id-checkbox').change( function(){
  	$('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

Shantaram Tupe
fonte
0

substitua o ID do selecionador de horário: IDofDatetimePicker pelo seu ID.

Isso impedirá que o usuário insira mais entradas do teclado, mas ainda assim poderá acessar o pop-up de tempo.

$ ("# my_txtbox"). keypress (function (event) {event.preventDefault ();});

Tente esta fonte: https://github.com/jonthornton/jquery-timepicker/issues/109

Mohan
fonte
0

Esta pergunta tem muitas respostas antigas e somente leitura parece ser a solução geralmente aceita. Acredito que a melhor abordagem nos navegadores modernos é usar a inputmode="none"tag de entrada HTML:

<input type="text" ... inputmode="none" />

ou, se você preferir fazê-lo no script:

$(selector).attr('inputmode', 'none');

Não testei extensivamente, mas está funcionando bem nas configurações do Android com as quais eu o usei.

Peter Bowers
fonte
Eu estava codificando esse projeto principalmente para dispositivos móveis Android. Ymmv com outras plataformas.
Peter Bowers
-1

Ou você pode, por exemplo, usar um campo oculto para armazenar o valor ...

        <asp:HiddenField ID="hfDay" runat="server" />

e no $ ("# my_txtbox"). datepicker ({options:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
Steinwolfe
fonte
-1

Se você deseja que o usuário selecione uma data no selecionador de datas, mas não deseja que ele digite dentro da caixa de texto, use o seguinte código:

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});

Shabbir.A.Hussain
fonte