web-dev-qa-db-fra.com

Comment définir de manière dynamique la valeur de date bootstrap-datepicker?

J'utilise bootstrap datepicker avec un graphique en ligne.

Je veux que la datepicker date à mettre à jour lorsque le graphique est zoomé. Une fois que cet événement se déclenche, je mets à jour les valeurs du sélecteur de date. Les valeurs sont mises à jour correctement, mais lorsque l'utilisateur clique sur le calendrier, la date du calendrier en incrustation reste l'ancienne.

Voici mon datepicker:

<div class="input-append date pull-right" id="dpStartDate" data-date="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy">
    <input class="span2" id="startDateText" size="16" type="text" value="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" readonly="">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

J'ai juste essayé de mettre à jour les valeurs en utilisant ce code:

$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);

qui met à jour les dates bien mais ne définit pas le calendrier.

J'ai également essayé de déclencher l'événement onChange, qui met également à jour les dates mais pas le calendrier:

$('#dpStartDate').trigger('changeDate', startDate);

$('#dpStartDate').datepicker()
    .on('show', function (ev) {
        ev.stopPropagation();
    })
    .on('changeDate', function (ev, date) {
        var startDate = new Date();
        if (date != undefined) {
            startDate = date;
            $('#dpStartDate').attr('data-date', startDate);
            $('#startDateText').attr('value', startDate);
        }
        else {
            startDate = ev.date;
            $('#dpStartDate').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
            $('#startDateText').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
        }
        $('#dpStartDate').datepicker('hide');
        ev.stopPropagation();
    });

Est-ce que quelqu'un sait s'il est même possible de mettre à jour le calendrier comme ça?

Merci

jquerydatepickertwitter-bootstrap
62
corina mcintosh

Ça marche pour moi

$(".datepicker").datepicker("update", new Date());
61
Imran Rashid
var startDate = new Date();

$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);

autrement

$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');
  1. définir la date du calendrier sur la propriété data-date
  2. mise à jour requise)
  3. définissez la valeur d'entrée (souvenez-vous que l'entrée est l'enfant de datepicker).

de cette façon, vous définissez la date sur '2012-08-08'

32
MG_
$("#datepicker").datepicker("setDate", new Date);
25
Nikhil

Essayez ce code,

$(".endDate").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true
}).datepicker("update", "10/10/2016");

cela mettra à jour la date et appliquera également le format dd/mm/yyyy.

9
user6433435

Ça marche pour moi

$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));
9
jayapal d

Mieux vaut utiliser: 

$("#datepicker").datepicker("setDate", new Date);

au lieu de 

$("#datepicker").datepicker("update", new Date);

Si vous utilisez update, l'événement changeDate n'est pas déclenché. 

7
Camille Muller

Je devais faire 'setValue' et 'update' afin de le faire fonctionner complètement

$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');
3
SomethingOn

Ça marche vraiment.

Simple, 

Facile à comprendre,

Méthode unique pour définir et mettre à jour le plugin qui a fonctionné pour moi.

$(".datepicker").datepicker("update", new Date());

Autres moyens de mise à jour

$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');

N'oubliez pas d'appeler update manuellement. 

3
Clayton

Pour les datetimepickers, utilisez ce travail pour moi

$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');
2
Sanuja Lavindika

Cela fonctionne pour moi:

$('#dpStartDate').data("date", startDate);
1
N036

Lorsque vous utilisez les méthodes d’autres réponses, les options configurées sont perdues. Pour la corriger, vous pouvez utiliser une configuration globale:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Maintenant, vous pouvez utiliser la méthode de mise à jour sans perdre les options:

$(".datepicker").datepicker("update", new Date("30/11/2018"));
1
track3r

Pour Bootstrap 4

Si vous utilisez un groupe d'entrées dans Bootstrap, vous devez associer la nouvelle date au parent de la zone de texte, sinon, si vous cliquez sur l'icône du calendrier et cliquez en dehors de la date, la date sera effacée.

<div class="input-group date" id="my-date-component">
   <input type="text" />
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-calendar"></i></span>
    </div>
</div>

Vous devez définir la date sur input-group.date.

$('#my-date-component').datepicker("update", new Date("01/10/2014"));

Vérifiez également datepicker update method

1
kiranvj
$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')
0
Hardik

@Imran answer fonctionne pour les zones de texte

pour appliquer le datepicker à une div, utilisez ceci:

$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");

virgule-délimiter plusieurs dates:

$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');
0
Drytin

Si vous vous référez à https://github.com/smalot/bootstrap-datetimepicker Vous devez définir la valeur de date par: .setDate (nouvelle Date (valeur));

0
winbill

Vous pouvez utiliser cette méthode simple comme:

qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');
0
Jayesh Sorathia

Vous pouvez faire aussi de cette façon:

  $("#startDateText").datepicker({
                toValue: function (date, format, language) {
                    var d = new Date(date);
                    d.setDate(d.getDate());
                    return new Date(d);
                },
                autoclose: true
            });

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format

0
Sandeep Shekhawat

Si vous utilisez Bootstrap DatePicker version 4+

Remarque Toutes les fonctions sont accessibles via l'attribut de données, par exemple, . $ ('# datetimepicker'). data ("DateTimePicker"). FUNCTION ()

Pour définir la valeur de la date, vos codes doivent ressembler à

$("#datetimepicker").data("DateTimePicker").date(new Date());
0
Cataclysm

Simple comme ça (une ligne)

$('#startDateText').val(startDate).datepicker("update");
0
lnwMaN

Utilisez le code:

var startDate = "2019-03-12"; //Date Format YYYY-MM-DD

$('#datepicker').val(startDate).datepicker("update");

Explication:

Datepicker (champ de saisie) Selector #datepicker.

Mettre à jour le champ de saisie.

Appelez Datepicker avec l'option update.

0
Saurabh Srivastava