jQuery DatePicker com input de texto que não permite input do usuário

Como eu uso o jQuery DatePicker com uma input de checkbox de texto:

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

Isso não permite que o usuário insira texto random na checkbox de texto. Eu quero que o DatePicker apareça quando a checkbox de texto ganhar foco ou o usuário clicar nela, mas eu quero que a checkbox de texto ignore qualquer input do usuário usando o teclado (copiar e colar, ou qualquer outro). Eu quero preencher a checkbox de texto exclusivamente do calendar do DatePicker.

Isso é possível?

jQuery 1.2.6
Datepicker 1.5.2

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

  

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 permite que o usuário digite novos caracteres, mas permitirá que eles excluam caracteres:

 $("#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:

  

experimentar

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

Se você está reutilizando o selecionador de data em vários lugares, então seria possível modificar a checkbox de texto também via JavaScript usando algo como:

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

logo após / antes do local onde você inicializa seu datepicker.

  

faz com que a checkbox de texto perca seu valor após o postback.

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

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

EDIT: para fazê-lo funcionar para o uso do IE ‘keydown’ em vez de ‘keypress’

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

adicione o atributo readonly no jquery.

Depois de inicializar o selecionador de data:

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

Para dar um momento ao pop-up no foco de ganho:

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

Se você não quiser a input do usuário, inclua isto no campo de input

  

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

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

  2. Opção B: Altere o onfocus do cursor. Defina ti para desfocar. Isso pode ser feito configurando o atributo onfocus="this.blur()" para o campo de texto do selecionador de data.

Exemplo:

Acabei de encontrar isso, então estou compartilhando aqui. Aqui é a opção

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

Aqui está o código.

HTML

 

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

Essa demonstração faz isso colocando o calendar no campo de texto para que você não possa digitá-lo. Você também pode definir o campo de input para ler somente no HTML para ter certeza.

  

HTML

  

CSS

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

Eu descobri que o plugin jQuery Calendar, para mim, pelo menos, em geral, funciona melhor para selecionar datas.

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

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

    

$ (“# my_txtbox”). prop (‘somente leitura’, true)

funcionou como um encanto ..

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

insira a descrição da imagem aqui

Eu sei que esta pergunta já foi respondida, e a maioria sugeriu usar readonly .
Eu só quero compartilhar meu cenário e responder.

Depois de adicionar o atributo readonly ao meu elemento HTML , enfrentei um problema que não é possível fazer esse atributo conforme required dinamicamente.
Mesmo tentei definir como readonly e required no momento da criação de HTML.

Então, sugiro que não use readonly se você quiser configurá-lo conforme required també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 apenas a tecla tab .
Você pode adicionar mais códigos de tecla que você deseja ignorar.

Eu abaixo código desde que eu adicionei tanto readonly e required que ainda envia o formulário.
Depois de remover o readonly ele 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 ); }); }); 
    
Name: Required

substitua o ID do selecionador de tempo: IDofDatetimePicker para seu id.

Isso impedirá que o usuário insira inputs de teclado adicionais, mas ainda assim, o usuário poderá acessar a janela de tempo.

$ (“# my_txtbox”). keypress (function (evento) {event.preventDefault ();});

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

Ou você poderia, por exemplo, usar um campo oculto para armazenar o valor …

   

e no $ (“# my_txtbox”). datepicker ({opções:

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

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