How to change the Datepicker format dynamically?

Asked

Viewed 326 times

0

I wonder if there is any way to change the format of 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

  • I’m not a web expert, but I think you’re going to need something that implements the "Observable" data Pattern. I think angular, or ko has it

1 answer

1


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

Destroy

Arguments: none

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

Alias: remove

Source: https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html?highlight=reset#Destroy

$('#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>
<link href="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>
<link href="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>

<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>

Browser other questions tagged javascript jquery datepicker bootstrap-datepicker

You are not signed in. Login or sign up in order to post.