Problem with TempusDominus DateTimePicker bootstrap 4

Question

Problem with TempusDominus DateTimePicker bootstrap 4

Navigation

#1 by (1 votes)

0

Hello, I am using the TempusDominus DateTimePicker component in my project, and I have a problem with it. I have an input and what I need is that when I click on it, the component with the years will be shown, and when selecting a year, the component will be shown and closed. The problem is that when selecting the year the component is not closed and what it does is visualize the months of that year, and after that the days of the selected month. At the end the input shows me the whole format instead of just showing me the year that is what I need. I attach images to better visualize what happens to me.

What I want is that after this first image do not leave the other options of the component, that the input stays with the selected year. If anyone knows of any other datetimepicker component compatible with bootstrap 4 I would also appreciate if you send me a link to download it.

bootstrap-4 datetimepicker

asked by Jesús Soto Mitjans 24.07.2018 в 14:49

source

1 answer

Form html will not let me upload data to bdd in phoMyAdmin Problem with ngIf and subscribe in Angular

score 1 · Accepted Answer

You can achieve it in the following way:

$('#fecha').datetimepicker({
    viewMode: 'years',
    format: 'YYYY'
});

Example

$(document).ready(function(){
  $('#datetimepicker1').datetimepicker({
    viewMode: 'years',
    format: 'YYYY'
  });
});

.container{
  margin-top:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>



<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
          <span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>