web-dev-qa-db-fra.com

Comment mettre une date par défaut dans bootstrap datetimepicker

Je veux que ma datetimepicker ait une valeur par défaut qui correspond à la date du jour. Comment puis-je atteindre cet objectif? J'ai déjà lu la documentation mais je ne trouve rien pour y parvenir. Est-ce que quelqu'un peut m'aider? Je veux que le format de la valeur par défaut soit MM dd, yyyy.

 enter image description here

Voici mon code.

<div class="form-group">
  <label for="dtp_input2">Date</label>
  <div class="input-group date form_date col-md-3" data-date="" data-date-format="MM dd, yyyy">
    <input id="dtp_input2" name="date" class="form-control" size="10" type="text" value="" readonly>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-remove"></span>
    </span>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

$('.form_date').datetimepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});
javascriptjquerydatetimepicker
3
nethken

Il suffit de définir la valeur après avoir configuré le datetimepicker:

$('.form_date').datetimepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});
$('#dtp_input2').val(Date());
5
Matt Spinks

Cette solution utilise uniquement les méthodes fournies par le bootstrap datetimepicker.

Vous pouvez déclarer votre datetimepicker comme vous l'avez fait, puis procédez comme suit:

$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');

Ainsi, la date que vous avez définie dans setDate() sera sélectionnée et l’entrée restera vide. Si vous ne voulez pas que l’entrée soit vide, supprimez simplement les lignes suivantes:

$('#datepicker input').datepicker('update');
$('#datepicker input').val('');

Et si vous voulez jouer avec cette solution: Voici un jsFiddle 

$('#datepicker input').datepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});

$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>

<div id="datepicker">
    <input type="text" type="text" class="form-control" />
</div>

2
Gille Q.

Il semble que, à partir de documentation , vous puissiez définir une defaultDate lors de l’instanciation du datetimepicker.

$(function () {
    $('#datetimepicker5').datetimepicker({
        defaultDate: "11/1/2013",
        disabledDates: [
            moment("12/25/2013"),
            new Date(2013, 11 - 1, 21),
            "11/22/2013 00:53"
        ]
    });
});
1
Daniel

Vous pouvez également définir Date actuelle dans un champ de texte avec JS, comme suit:

var d = new Date();
document.getElementById("target").value = d.toDateString();
<input type="text" id="target">

1
Ambrish Pathak

Dans mon cas: Insérez ce code defaultDate: new Date() dans votre datetimepicker javascript.

<script type="text/javascript">
$(function () {
    $('#datetimepicker10').datetimepicker({
        defaultDate: new Date(),
        viewMode: 'years',
        format: 'MM/DD/YYYY'
    });
});

0
gustav