Ik gebruik bootstrap datepicker samen met een line highchart.
Ik wil dat de datumkiezerdatum wordt bijgewerkt wanneer de kaart wordt ingezoomd. Zodra die gebeurtenis wordt geactiveerd, werk ik de waarden van de datepicker bij. De waarden worden prima bijgewerkt, maar wanneer op de kalender wordt geklikt, is de datum in de pop-upkalender nog steeds de oude datum.
Hier is mijn 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>
Ik heb geprobeerd de waarden bij te werken met deze code:
$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);
die de datums prima bijwerkt, maar de kalender niet instelt.
Ik heb ook geprobeerd de onChange-gebeurtenis te activeren, die ook de datums bijwerkt, maar niet de kalender:
$('#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();
});
Weet iemand of het zelfs mogelijk is om de kalender zo bij te werken?
Bedankt
Antwoord 1, autoriteit 100%
Dit werkt voor mij
$(".datepicker").datepicker("update", new Date());
Antwoord 2, autoriteit 57%
var startDate = new Date();
$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);
op een andere manier
$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');
- stel de kalenderdatum in op eigenschap data-date
- bijwerken (vereist)
- stel de invoerwaarde in (onthoud dat de invoer onderliggend is aan datepicker).
op deze manier stel je de datum in op ’08-08-2012′
Antwoord 3, autoriteit 40%
$("#datepicker").datepicker("setDate", new Date);
Antwoord 4, autoriteit 20%
Probeer deze code,
$(".endDate").datepicker({
format: 'dd/mm/yyyy',
autoclose: true
}).datepicker("update", "10/10/2016");
hiermee wordt de datum bijgewerkt en wordt de indeling dd/mm/yyyyook toegepast.
Antwoord 5, autoriteit 16%
Beter te gebruiken:
$("#datepicker").datepicker("setDate", new Date);
in plaats van
$("#datepicker").datepicker("update", new Date);
Als je update gebruikt, wordt event changeDate niet geactiveerd.
Antwoord 6, autoriteit 15%
Dit werkt voor mij,
$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));
Antwoord 7, autoriteit 5%
Ik moest ‘setValue’ en ‘update’ doen om het volledig te laten werken
$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');
Antwoord 8, autoriteit 5%
Als u de methoden van andere antwoorden gebruikt, gaan de geconfigureerde opties verloren, om dit te corrigeren, kunt u een globale configuratie gebruiken:
$('.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;
Je kunt nu de updatemethode gebruiken zonder de opties te verliezen:
$(".datepicker").datepicker("update", new Date("30/11/2018"));
Antwoord 9, autoriteit 4%
Dat werkt echt.
Eenvoudig,
Eenvoudig te begrijpen,
Enkele methode om plug-in in te stellen en bij te werken die voor mij werkte.
$(".datepicker").datepicker("update", new Date());
Andere manieren om te updaten
$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');
Vergeet niet om updatehandmatig aan te roepen.
Antwoord 10, autoriteit 4%
Voor Bootstrap 4
Als u de invoergroep in Bootstrap gebruikt, moet u de nieuwe datum toevoegen aan het bovenliggende tekstvak, anders wordt de datum gewist als u op het kalenderpictogram klikt en buiten de datum klikt.
<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>
Je moet de datum instellen op input-group.date.
$('#my-date-component').datepicker("update", new Date("01/10/2014"));
Controleer ook de datepicker update-methode
Antwoord 11, autoriteit 4%
Gebruik code:
var startDate = "2019-03-12"; //Date Format YYYY-MM-DD
$('#datepicker').val(startDate).datepicker("update");
Uitleg:
Datepicker(invoerveld) Selector #datepicker.
Invoerveld bijwerken.
Bel datepicker met optie-update.
Antwoord 12, autoriteit 3%
Voor datetimepickers gebruik dit dit werk voor mij
$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');
Antwoord 13, autoriteit 3%
Houd er rekening mee dat als u een datumkiezer start met een aangepast formaat, u de eenvoudige tekenreeksdatum als het tweede argument kunt doorgeven. Dit scheelt een paar regels.
$('.selector').datepicker({
format:'dd/mm/yyyy',
});
$('.selector').datepicker('update', '13/09/2019');
Antwoord 14, autoriteit 3%
$('#DateDepenseInput').val("2020-12-28")
het formaat zou moeten zijn zoals Jaar-Maand-Dag
Het werkte goed voor mij …
Antwoord 15
Als je Bootstrap DatePicker versie 4+
gebruikt
Opmerking Alle functies zijn toegankelijk via het data-attribuut, b.v.
$(‘#datetimepicker’).data(“DateTimePicker”).FUNCTION()
Om de datumwaarde in te stellen, moeten uw codes zijn als
$("#datetimepicker").data("DateTimePicker").date(new Date());
Antwoord 16
Eenvoudige manier zoals deze (één regel)
$('#startDateText').val(startDate).datepicker("update");
Antwoord 17
Dit werkt voor mij:
$('#dpStartDate').data("date", startDate);
Antwoord 18
Je kunt het ook op deze manier doen:
$("#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/ nieuwste/options.html#format
Antwoord 19
U kunt deze eenvoudige methode gebruiken zoals:
qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');
Antwoord 20
@Imran antwoord werkt voor tekstvakken
gebruik dit om de datepicker op een div toe te passen:
$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");
komma-delim meerdere datums:
$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');
Antwoord 21
$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')
Antwoord 22
Als je verwijst naar https://github.com/smalot/bootstrap-datetimepicker
U moet de datumwaarde instellen door:
$(‘#datetimepicker1’).data(‘datetimepicker’).setDate(new Date(value));
Antwoord 23
Probeer
$("#datepicker").datepicker('setDate','25-05-2020').datepicker('fill');
Dit werkt voor mij wanneer setDatede waarde van het tekstveld van de datumkiezer in de browser niet bijwerkt. ” De aanvullende .datepicker('fill');” vult de bootstrap datepickeropnieuw in voor een nieuwe datum die is ingesteld met de setDate-methode.
Antwoord 24
Op pagina laden als je de changeDate-gebeurtenis niet wilt activeren, wat ik niet heb gedaan
$('#calendarDatePicker').data("date", new Date());
$('#calendarDatePicker').datapicker();
Antwoord 25
Dit werkt perfect voor mij. Zet gewoon de volgende.
$('.className').datepicker('setDate', 'now');