Change date that appears in a datepicker

Question

Change date that appears in a datepicker

Navigation

#1 by (1 votes)

0

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 open in December, I want to change to January), I tried doing this with "startView" but it did not work. As soon as 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>

javascript html5

asked by anonymous 13.12.2017 / 15:26

1 answer

Error removing table in PostgreSQL Calculate the elapsed time after creating a record

score 1 · Accepted Answer

Date Class

The% class of JavaScript accepts several parameters that will be used in your constructor. One of the problems is that the month parameter uses a range of Date , being 0-11 January and 0 the month of December.

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

You can instantiate the object of class 01/12/1997 in several 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 Date class in w3schools : JavaScript Dates

Datepicker

In Datepicker , the correct option to set the start date is Date .

Read more about the Datepicker jQuery plugin: Datepicker Widget

EDIT:

Try to do this:

$(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><scripttype="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script><form>Iníciodoperíodo:<inputtype="text" name="dataInicio" id="calendarioIni">
</form>