Set up correctly the JQuery datepicker

Question

Set up correctly the JQuery datepicker

Navigation

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

0

What happens is that I am implementing a calendar in my application, for that I use JQuery, but at the time of the settings is where the problem arises and is that it does not let me select the full date, only the year and later this is hidden and I should not do it, I've already thought about it a lot but I can not configure the calendar correctly, so please help me see where the inconvenience is.

$('[data-toggle="datepicker"]').datepicker({
  inline: true,
  startView: 2
});

.calendar {
  border: 1px solid red;
  height: 30px;
}

.datepicker-container {
  margin-top: 40px;
}

<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet" />

<div class="datepicker">
  <span class="text">
  Selecciona una fecha
  </span>
  <div class="calendar" data-toggle="datepicker">
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>

jquery html jquery-datepicker datepicker

asked by Jhojan Guerrero 19.10.2018 в 15:46

source

2 answers

0

I leave a datepicker that I use in my application so you can see some of the available options:

  $('.mydatepickerclass').datepicker({
                dateFormat: "dd/mm/yy",
                minDate: new Date(2010, 3 - 1, 1),
                numberOfMonths: 1,
                showCurrentAtPos: 0,
                firstDay: 1,
                beforeShowDay: $.datepicker.noWeekends,
                changeMonth: true,
                changeYear: true,
                showAnim: 'slideDown'
            });

What questions do I think with the dateFormat: "dd / mm / yy" is enough

I hope it serves you.

answered by 19.10.2018 в 16:11

What am I doing wrong in this PHP MySQL exercise [closed] Recursive function to obtain vowels of a word (Scala)

score 1 · Accepted Answer

I would not let you select the year for an option you had that is startView, putting that option to 0 will let you select the day, here I leave you the link to the plugin documentation.

Also in your demo they use an input to perform the date picker action so change the div for an input and already works correctly, it does not automatically close and lets you change the date.

$('#date-picker').datepicker({
  inline: true,
  startView: 0,
  container: $('.datepicker')
});

.calendar {
  border: 1px solid red;
  height: 30px;
}

<link href="https://fengyuanchen.github.io/datepicker/css/datepicker.css" rel="stylesheet" />

<div class="datepicker">
  <span class="text">
  Selecciona una fecha
  </span>
  <br>
  <input id="date-picker" class="calendar" type="text">
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>