web-dev-qa-db-fra.com

obtenir la valeur de daterangepicker bootstrap

Bonjour, j’ai découvert javascript et rencontré un problème lors de l’utilisation de daterangepicker bootstrap. Je parviens à mettre en œuvre cette démo que j’ai obtenue, mais je ne peux pas obtenir la valeur de la date de début et de la date de fin à partir du javascript.

C'est le javascript

<script type="text/javascript">
$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
 });
</script>

C'est le bouton qui va gérer la méthode onclick 

<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

'début' et 'fin' contiendraient les valeurs des dates. Si je veux que ces valeurs servent d'entrées pour une utilisation ultérieure du codage dans mon projet, par exemple. enregistrer dans la base de données, comment puis-je les appeler? 

javascriptjqueryjspdatepickerdaterangepicker
23
user2541163

Donnez à votre bouton un identifiant

<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Ajoutez les variables startDate et endDate à votre script

var startDate;
var endDate;

Définir ces variables dans le rappel daterangepicker

startDate = start;
endDate = end;

Câblez l'événement clic pour ce bouton dans votre fonction $(document).ready

$('#saveBtn').click(function(){
    console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});

Le javascript complet

<script type="text/javascript">
var startDate;
var endDate;

$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
        startDate = start;
         endDate = end;    

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));

    $('#saveBtn').click(function(){
        console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
    });

 });
</script>
31
Jacques Snyman
$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;
53
Razan Paul

Vous devez récupérer l'objet de données:

var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;

Remarquez la requête _d à la fin pour obtenir l’objet date JavaScript réel.

De même, si l'objet data est toujours undefined, il peut alors résulter de la ré-instanciation de bootstrap.js. Cela m'est arrivé sur une page MVC où j'ai oublié d'encercler mes scripts avec:

@region scripts {

}
16
Chad Kuehn
var endDate=  $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');

ou d'autres formats;

.endDate.format('YYYY-MM-DD'); 

.endDate.format('D MM YYYY');

.endDate.format('D MMMM YYYY');
14
Erdogan

Simple, obtenez directement la plage d'entrées:

$(document).ready(function(){

    $('#reportrange span').bind('DOMSubtreeModified', function(e){
        alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
    });

})
0
Gabriel Glauber

Je sais que ce n'est pas élégant du tout. Partage quand même.

Tout d’abord, nous obtenons la valeur de la zone de saisie daterangepicker:

var date_range = $('#date_range').val();

Maintenant, si nous configurons pour afficher les dates entre un '-', divisons avec:

var dates = date_range.split(" - ");

pour obtenir les dates sous forme de chaînes:

var start = dates[0];
var end = dates[1];

pour obtenir les dates en tant qu'objets Moment au format 'D MMMM YY': 

var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');
0
emrey