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

Question

Como faço para usar o jQuery DatePicker com uma entrada de caixa de texto:

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

que não permitem que o usuário texto aleatório de entrada na caixa de texto. Eu quero o Datepicker a aparecer quando os ganhos de caixa de texto o foco ou o usuário clica sobre ele, mas eu quero a caixa de texto para ignorar qualquer entrada do usuário usando o teclado (copiar e colar, ou qualquer outro). Eu quero encher a caixa de texto exclusivamente a partir do calendário Datepicker.

Isso é possível?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

Você deve ser capaz de usar o somente leitura atributo na entrada de texto, e jQuery vai ainda ser capaz de editar o seu conteúdo.

<input type='text' id='foo' readonly='true'>

Answer 2

Com base na minha experiência que 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 que lhes permitam excluir caracteres:

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

Além disso, este irá processar a forma inútil para aqueles que têm JavaScript desabilitado:

<input type="text" readonly="true" />

Answer 3

try

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

Answer 4

Se você estiver reutilizando a data-picker em vários lugares, então ele estaria apto para modificar a caixa de texto também via JavaScript usando algo como:

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

logo após / antes do lugar onde você inicializar o datepicker.

Answer 5

<input type="text" readonly="true" />

faz com que a caixa de texto a perder o seu valor depois de postback.

Você sim deve usar a sugestão de Brad8118 que está funcionando perfeitamente.

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

EDIT: para fazê-lo funcionar para uso IE 'keyDown' em vez de 'keypress'

Answer 6

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

adicionar o atributo somente leitura no jQuery.

Answer 7

Depois de inicializar o selecionador de data:

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

        $(".project-date").keydown(false);

Answer 8

Para datepicker de pop-up no foco ganho:

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

Se você não quiser que a entrada do usuário, adicionar isso para o campo de entrada

<input type="text" name="date" readonly="readonly" />

Answer 9

Você tem duas opções para obter este feito. (Tanto quanto eu sei)

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

2. Opção B: Alterar o onfocus curser. Set ti a desfocagem. isso pode ser feito através da criação do onfocus="this.blur()" atributo para o seu campo de texto selecionador de data.

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

Answer 10

Eu deparei com isso, então eu estou compartilhando aqui. Aqui é 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 de bootstrap-datetimepicker.js é 4.17.45

Answer 11

Este demonstração espécie de faz isso colocando o calendário ao longo do campo de texto para que você não pode digitar nele. Você também pode definir o campo de entrada para ler apenas no HTML para ter certeza.

<input type="text" readonly="true" />

Answer 12

HTML

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

CSS

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

Answer 13

Eu sei que esta discussão é antiga, mas para os outros que se deparam com o mesmo problema, que implementam @ solução Brad8118 (que eu prefiro, porque se você optar por fazer a entrada somente de leitura, em seguida, o usuário não será capaz de excluir o valor de data inserido a partir datepicker se ele escolhe) e também precisa impedir que o usuário colando um valor (como @ErikPhilips sugeriu a ser necessário), eu deixo esta adição aqui, o 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-using-jquery-javascript eo script específico inteiro usado por mim (usando fengyuanchen / datepicker plugin de vez):

$('[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;

Answer 14

Eu descobri que o plugin jQuery Calendar, pelo menos para mim, em geral simplesmente funciona melhor para a seleção de datas.

Answer 15

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

Answer 16

Aqui está a sua resposta, que é maneira de solve.You não quero usar jquery quando você restringiu a entrada do usuário no controle caixa de texto.

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

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

Answer 17

$ ( "# my_txtbox"). Prop ( 'readonly', true)

funcionou como um encanto ..

Answer 18

Em vez de usar caixa de texto que você pode usar o botão também. Funciona melhor para mim, onde eu não quiser que os usuários até à data de gravação manualmente.

Answer 19

Eu sei que esta pergunta já foi respondida, e mais sugerido para uso readonly attribure.
Eu só quero compartilhar meu cenário e resposta.

Depois de adicionar readonly atributo para minha elementos HTML , eu problema enfrentado que não sou capaz de fazer este atributo como required dinamicamente.
definição ainda tentou tanto como readonly e required no momento da criação HTML.

Então, eu sugiro não usar readonly se você quiser defini-lo como required também.

Em vez disso use

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

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

Esta permitem prima tab tecla apenas.
Você pode adicionar mais keycodes que você deseja ignorar.

I abaixo código desde que eu tenha adicionado tanto readonly e required ainda envia o formulário.
Depois de remover 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 );
});
});

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

Answer 20

substituir o ID de selecionador de tempo: IDofDatetimePicker para o seu id.

Isso impedirá que o usuário inserir quaisquer entradas adicionais do teclado mas ainda assim, o usuário será capaz de acessar o pop-up tempo.

.

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

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

Answer 21

Esta questão tem um monte de respostas mais velhos e somente leitura parece ser a solução geralmente aceite. Eu acredito que a melhor abordagem em navegadores modernos é usar o inputmode="none" na marca de entrada HTML:

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

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

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

Eu não testei-lo extensivamente, mas está a trabalhar bem nas configurações do Android que tenho usado com ele.

Answer 22

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

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

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

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

Answer 23

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

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

});