How can I leave a bootstrap datepicker functional but readonly

Question

How can I leave a bootstrap datepicker functional but readonly

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

I have an input defined as follows:

<input type="text" name="fecha" id="datepicker" pattern="[_0-9]{2}/[_0-9]{2}/[_0-9]{4}" class="form-control" required>

With the following script on the same page

<script>
$('#datepicker').datepicker({
    format: "dd/mm/yyyy",
    language: "es",
    autoclose: true,
    startView: 2,
    endDate: "+Infinity"
});
</script>

What I need is that you can not use the keyboard to enter the date, but simply choose it from the datepicker. The disable switch off the component directly.

Thanks

javascript html bootstrap datepicker

asked by Carlos Cristoforone 29.06.2016 в 15:05

source

2 answers

0

Stop the default event ( e.preventDefault() ) and propagation ( e.stopPropagation() ) in the event click of .day of the datepicker.

$('#fecha-nac').datepicker({
    format: 'dd/mm/yyyy'
  }).on('show', (e) => {
    $('.day').click((e) => {
        e.preventDefault();
        e.stopPropagation();
    });
});

.group {
  align-items: flex-end;
  display: inline-flex;
  justify-content: space-between;
  width: 300px;
}
label {
  width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>

<!-- css -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css" />

<div class="group">
<label for="fecha-nac">Fecha Nac.</label> <input type="text" id="fecha-nac" class="form-control" value="29/06/2016"  readonly="readonly"/>
</div>

answered by 29.06.2016 в 15:43

align bootstrap form Ignore files in commits already made and pushed

score 3 · Accepted Answer

Place the readonly attribute on the input so that it remains in read-only mode.

$('#datepicker').datepicker({
    format: "dd/mm/yyyy",
    language: "es",
    autoclose: true,
    startView: 2,
    endDate: "+Infinity"
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<form action="#">
<input type="text" name="fecha" id="datepicker" pattern="[_0-9]{2}/[_0-9]{2}/[_0-9]{4}" class="form-control" required readonly>
<input type="submit">
</form>