Change date that appears on a datepicker

Question

I have the following datepicker:

var dataIni = document.querySelector("#calendarioIni");
var dataFim = document.querySelector("#calendarioFim");

function checaVazio(){
  var botao = document.querySelector("form input[type='submit']");
  botao.style.display = dataIni.value && dataFim.value ? "inline" : "none";
}

var start = new Date(1998, 00, 01);
var end = new Date(1998, 11, 31) ;

$(document).ready(function() 
{
    $('#calendarioIni').datepicker({
        format: 'dd/mm/yyyy',
        startDate: '01/01/1998', // 1 de Janeiro de 1998
        endDate: '31/12/1998', // 31 de Janeiro de 1998,
        defaultViewDate: { year: 1998, month: 0, day: 1 },
        onSelect: checaVazio
    });
});

$(document).ready(function() 
{
    $('#calendarioFim').datepicker({
        defaultViewDate: new Date(1998, 0, 1),
        endDate: end,
        startDate: start,
        onSelect: checaVazio
    });
});

I would like to change the month that appears when I open the calendar (currently when I click opens in December, I wanted to change to January), I tried to do this with "startView" but it didn’t work. So I use it:

<form method="post" action="">
      Início do período:
      <input type="text" id="calendarioIni" name="dataInicio">
      Fim do período:
      <input type="text" id="calendarioFim" name="dataFim"> 
      <input style="display: none;" type="submit" value="Consultar" />                                    
      <br><br><br>

      <?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']))
      {
            $dataIni = $_POST['dataInicio'];
            $dataFim = $_POST['dataFim'];
            echo $dataIni."<br>";//Teste para verificar o valor nas variáveis que recebem a data via POST
            echo $dataFim."<br>";
            } 
     ?>                                    
</form>

Answer 1

Date class

The class Date of Javascript accepts several parameters that will be used in your constructor. One of the problems is that the parameter referring to months uses an interval of 0-11, being 0 January and 11 the month of December.

So when you start that way: var start = new Date(1997, 12, 01); will generate an unexpected date and using the console.log(start); will result in: 1998-01-01T02:00:00.000Z, that is to say, 01/01/1998 and not 01/12/1997.

You can instantiate the class object Date in various ways, for example:

let data = new Date('January 1, 2018'); // 1 de Janeiro de 2018

Or:

let data = new Date('2018-01-01'); // 1 de Janeiro de 2018

Read more about the class Date in the w3schools: Javascript Dates

---

Datepicker

Already in the Datepicker, the correct option to set the start date is the defaultDate.

Read more about the plugin Datepicker of jQuery: Datepicker Widget

---

EDIT:

Try to do it that way:

$(function () {
  $('#calendarioIni').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '01/01/1998', // 1 de Janeiro de 1998
    endDate: '31/12/1998', // 31 de Dezembro de 1998,
    defaultViewDate: { year: 1998, month: 0, day: 1 } // Coloca o foco em 1 de Janeiro de 1998
  });
});

<link type="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<form>
  Início do período:
  <input type="text" name="dataInicio" id="calendarioIni">
</form>