How to change the Datepicker format dynamically?

Question

How to change the Datepicker format dynamically?

Navigation

#1 by (1 votes)

0

I would like to know if there is any way to change the format of the datepicker dynamically using radio buttons, but the way I'm trying is not working ...

HTML

<input id="periodo" name="periodo" type="text" placeholder="Período">

<input id="radioDDMM" type="radio" name="typePeriodo" checked data-type="dd/mm" />
<label for="radioDDMM">Dia/Mês</label>

<input id="radioMMYYYY" type="radio" name="typePeriodo" data-type="mm/yyyy" />
<label for="radioMMYYYY">Mês/Ano</label>

JQuery

$(document).ready(function () {

    $('#periodo').datepicker({
        format: "dd/mm",
        startView: "days",
        minViewMode: "days",
        language: 'pt-BR',
        endDate: '0m',
        orientation: 'bottom',
        autoclose: true
    });

    $("[name='typePeriodo']").on('change', function () {
        var type = $(this).attr('data-type');
        if (type == "dd/mm") {
            $('#periodo').datepicker({
                altFormat: "dd/mm",
                startView: "days",
                minViewMode: "days",
            })
        } else if (type == "mm/yyyy") {
            $('#periodo').datepicker({
                altFormat: "mm/yyyy",
                startView: "months",
                minViewMode: "months",
            })
        }
    });
});

javascript jquery datepicker bootstrap-datepicker

asked by anonymous 26.09.2018 / 15:18

1 answer

Calling a servlet in a popup JOIN of 3 tables (LEFT JOIN)

score 1 · Accepted Answer

In the radio change event use the destroy method to insert the new format.

destroy

Arguments: none

Remove the datepicker. Removes attached events, attached objects   internal and HTML elements added.

Alias: remove

Source: link

$('#periodo').datepicker({
  format: 'MM dd',
  startView: "days",
  minViewMode: "days",
});

$("[name='typePeriodo']").on('change', function() {
  var type = $(this).attr('data-type');
  $('#periodo').val("").datepicker("destroy");
  if (type == "dd/mm") {
    $('#periodo').datepicker({
      format: 'MM dd',
      startView: "days",
      minViewMode: "days",
    })
  } else if (type == "mm/yyyy") {
    $('#periodo').datepicker({
      format: "mm-yyyy",
      startView: "months",
      minViewMode: "months"
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script><inputid="periodo" name="periodo" type="text" placeholder="Período">

<input id="radioDDMM" type="radio" name="typePeriodo" checked data-type="dd/mm" />
<label for="radioDDMM">Dia/Mês</label>

<input id="radioMMYYYY" type="radio" name="typePeriodo" data-type="mm/yyyy" />
<label for="radioMMYYYY">Mês/Ano</label>