title: Bootstrap 3 DataTable export to Excel not exporting table data
body: <p>I am trying to export the contents of a table to MS Excel using this example: <a href="https://datatables.net/extensions/buttons/examples/styling/bootstrap.html" rel="nofollow noreferrer">https://datatables.net/extensions/buttons/examples/styling/bootstrap.html</a></p>
  
  <p>I have everything displaying correctly on the page; however, when I export I only get the title and column headings. I am generating the table contents in java.</p>
  
  <p>Page image:</p>
  
  <p>[![enter image description here][1]][1]</p>
  
  <p>Output:</p>
  
  <p>[![enter image description here][2]][2]</p>
  
  <p><strong>--------------------------------------------------------------------------</strong>
  <strong><em>Second Attempt</em></strong></p>
  
  <p>I have changed my approach and am now passing json. However, now the buttons are not displaying and the table is not formatted. No errors in the console log.</p>
  
  <p><strong>--------------------------------------------------------------------------</strong>
  <strong><em>Third Attempt</em></strong></p>
  
  <p>OK I have worked out how to pass the JSON and use AJAX to populate the table. However, the export to Excel still only exports the name and table headings.</p>
  
  <p><strong>--------------------------------------------------------------------------</strong>
  <strong><em>Fourth Attempt</em></strong></p>
  
  <p>I am trying: </p>
  
  <pre><code>$('#joinedTable').DataTable( {
     "ajax": responseJson1a,
  } );
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>$('#joinedTable').DataTable( {
     "ajax": JSON.stringify(responseJson1a),
  } );
  </code></pre>
  
  <p>And I have cleaned up the libraries.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Group Summary&lt;/title&gt;
          &lt;meta http-equiv=Content-Type content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content="A Scout award tracking application"&gt;
          &lt;meta name="author" content="Glyndwr (Wirrin) Bartlett"&gt;
  
          &lt;!-- JQuery --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Validate --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Bootstrap --&gt;
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Bootstrap Date Picker--&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"&gt;&lt;/script&gt;    
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- DataTables --&gt;
          &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  
          &lt;!-- Le styles --&gt;
          &lt;!-- Bootstrap --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
          &lt;!-- DataTables --&gt;
          &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css"&gt;
      &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="groupSummary"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');"&gt;
  
          &lt;div id="includedContent"&gt;&lt;/div&gt;
  
          &lt;form data-toggle="validator" role="form" id="showGroupSummaryForm"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
                          &lt;div class="jumbotron"&gt;
                              &lt;h3&gt;Group Summary&lt;/h3&gt;
  
                              &lt;div class="container"&gt;
  
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;div class="input-group date" id="datepicker1"&gt;
                                              &lt;input type="text" id="startDate" class="form-control" placeholder="Start Date"&gt;
                                              &lt;span class="input-group-addon"&gt;
                                                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;div class='input-group date' id='datepicker2'&gt;
                                              &lt;input type='text' id="endDate" class="form-control" placeholder="End Date"&gt;
                                              &lt;span class="input-group-addon"&gt;
                                                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;button id='submit' class='btn btn-primary btn-lg'&gt;Display Details&lt;/button&gt;
  
                              &lt;/div&gt;
                              &lt;div class="container" id=joined&gt;
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;table id="joinedTable" class="display" style="width:100%"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                &lt;th&gt;section&lt;/th&gt;
                                                &lt;th&gt;subSection&lt;/th&gt;
                                                &lt;th&gt;metric&lt;/th&gt;
                                                &lt;th&gt;metricTotal&lt;/th&gt;
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                      &lt;/table&gt;
                                      &lt;div style="text-align: center;"&gt;
                                          &lt;span id="ajaxGetUserServletResponse1" style="color: red;"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;&lt;!-- /container --&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /row --&gt;
          &lt;/form&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
  
  
      &lt;!-- Le javascript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/groupSummary-ajax.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code>$(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip(); 
  
  //  $('#joinedTable').DataTable( {
  //      "paging":   false,
  //        "ordering": false,
  //        "info":     false,
  //        "searching": false,
  //        dom: 'Bfrtip',
  //        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
  //    } );
  
  
  
      $("#showGroupSummaryForm").validate({
          //debug: true,
  
          rules: {
              startDate: {
                  required: true
              },
  
              endDate: {
                  required: true
              }
          },
  
          messages: {
              startDate: {
                  required: "Please select a start date."
              },
  
              endDate: {
                  required: "Please select an end date."
              }
          },
  
          submitHandler : function(showGroupSummaryForm) {
  
              $('#joinedTable tbody &gt; tr').remove();
              $('#ajaxGetUserServletResponse1').text('');
  
              var dataToBeSent  = {
                      ssAccountID : sessionStorage.getItem('ssAccountID'),
                      startDate : $("#startDate").val(),
                      endDate: $("#endDate").val()
              };
  
              //Joined
              $.ajax({
                  url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
                  data : dataToBeSent, 
                  type : 'POST',  
              })
              .fail (function(jqXHR, textStatus, errorThrown) {
                  //alert(jqXHR.responseText);
                  if(jqXHR.responseText.includes('No members joined in this date range')){
                      $('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
                  }else{
                      $('#ajaxGetUserServletResponse1').text('Error getting joined data.');
  
                  }
                  $("#datepicker1").focus();
              })
              .done(function(responseJson1a){
                  dataType: "json";
  //              alert(JSON.stringify(responseJson1a)); 
  //              Result of alert is:
  //                  [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
                  $('#joinedTable').DataTable( {
                      "ajax": responseJson1a,
                  } );
  
              })
          }
      })
  
  }); // end document.ready
  
  $(function(){
      $("#includedContent").load("Menu.html");
  
      $('#datepicker1').datepicker({
          format: 'dd/mm/yyyy',
              });
      $('#datepicker2').datepicker({
          useCurrent: false, //Important! See issue #1075
          format: 'dd/mm/yyyy',
      });
      $("#datepicker1").on("dp.change", function (e) {
          $('#datepicker2').data("DatePicker").minDate(e.date);
      });
      $("#datepicker2").on("dp.change", function (e) {
          $('#datepicker1').data("DatePicker").maxDate(e.date);
      });
  });
  </code></pre>
  
  <p>This gives me an error in the console:</p>
  
  <pre><code>Uncaught TypeError: $(...).DataTable is not a function
      at Object.&lt;anonymous&gt; (groupSummary-ajax.js:70)
      at i (eval at globalEval (jquery-2.2.4.min.js:2), &lt;anonymous&gt;:2:27449)
      at Object.fireWith [as resolveWith] (eval at globalEval (jquery-2.2.4.min.js:2), &lt;anonymous&gt;:2:28213)
      at y (eval at globalEval (jquery-2.2.4.min.js:2), &lt;anonymous&gt;:4:22721)
      at XMLHttpRequest.c (eval at globalEval (jquery-2.2.4.min.js:2), &lt;anonymous&gt;:4:26925)
  </code></pre>
  
  <p><strong>--------------------------------------------------------------------------</strong>
  <strong><em>Narrow down the error</em></strong></p>
  
  <p>The error is not due to the HTML table being populated from JSON. The "$('#joinedTable').DataTable();" being in the ".done(function(responseJson1a)" causes the error. The below works until the "$('#joinedTable').DataTable();" is un-commented. However, only the </p>
  
  <pre><code>&lt;tr&gt;
     &lt;td&gt;Cubs&lt;/td&gt;
     &lt;td&gt;3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Scouts&lt;/td&gt;
     &lt;td&gt;5&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>is exported. Not</p>
  
  <pre><code>&lt;tr&gt;
     &lt;td&gt;Cubs&lt;/td&gt;
     &lt;td&gt;9&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;Scouts&lt;/td&gt;
     &lt;td&gt;10&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Group Summary&lt;/title&gt;
          &lt;meta http-equiv=Content-Type content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content="A Scout award tracking application"&gt;
          &lt;meta name="author" content="Glyndwr (Wirrin) Bartlett"&gt;
  
          &lt;!-- JQuery --&gt;
          &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Validate --&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Bootstrap --&gt;
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- Bootstrap Date Picker--&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"&gt;&lt;/script&gt;    
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- DataTables --&gt;
          &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  
          &lt;!-- Le styles --&gt;
          &lt;!-- Bootstrap --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
          &lt;!-- DataTables --&gt;
          &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css"&gt;
      &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div id="groupSummary"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');"&gt;
  
          &lt;div id="includedContent"&gt;&lt;/div&gt;
  
          &lt;form data-toggle="validator" role="form" id="showGroupSummaryForm"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
                          &lt;div class="jumbotron"&gt;
                              &lt;h3&gt;Group Summary&lt;/h3&gt;
  
                              &lt;div class="container"&gt;
  
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;div class="input-group date" id="datepicker1"&gt;
                                              &lt;input type="text" id="startDate" class="form-control" placeholder="Start Date"&gt;
                                              &lt;span class="input-group-addon"&gt;
                                                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;div class='input-group date' id='datepicker2'&gt;
                                              &lt;input type='text' id="endDate" class="form-control" placeholder="End Date"&gt;
                                              &lt;span class="input-group-addon"&gt;
                                                  &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;button id='submit' class='btn btn-primary btn-lg'&gt;Display Details&lt;/button&gt;
  
                              &lt;/div&gt;
                              &lt;div class="container" id=joined&gt;
                                  &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                                      &lt;table class="table table-hover table-bordered" id="joinedTable"&gt;
                                          &lt;thead&gt;
                                              &lt;tr&gt;
                                                &lt;th&gt;Section&lt;/th&gt;
                                                &lt;th&gt;Joined&lt;/th&gt;
                                              &lt;/tr&gt;
                                          &lt;/thead&gt;
                                              &lt;tbody id="mytablebody"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td&gt;Cubs&lt;/td&gt;
                                                      &lt;td&gt;3&lt;/td&gt;
                                                    &lt;/tr&gt;
                                                    &lt;tr&gt;
                                                      &lt;td&gt;Scouts&lt;/td&gt;
                                                      &lt;td&gt;5&lt;/td&gt;
                                                    &lt;/tr&gt;
                                               &lt;/tbody&gt;
                                          &lt;!--&lt;tbody id="mytablebody"&gt;&lt;/tbody&gt; --&gt;
                                      &lt;/table&gt;
                                      &lt;div style="text-align: center;"&gt;
                                          &lt;span id="ajaxGetUserServletResponse1" style="color: red;"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;&lt;!-- /container --&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /row --&gt;
          &lt;/form&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
  
  
      &lt;!-- Le javascript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/DataTable.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>AJAX:</p>
  
  <pre><code>$(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip(); 
  
      $('#joinedTable').DataTable( {
          "paging":   false,
          "ordering": false,
          "info":     false,
          "searching": false,
          dom: 'Bfrtip',
          buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
      } );
  
  
  
      $("#showGroupSummaryForm").validate({
          //debug: true,
  
          rules: {
              startDate: {
                  required: true
              },
  
              endDate: {
                  required: true
              }
          },
  
          messages: {
              startDate: {
                  required: "Please select a start date."
              },
  
              endDate: {
                  required: "Please select an end date."
              }
          },
  
          submitHandler : function(showGroupSummaryForm) {
  
              $('#joinedTable tbody &gt; tr').remove();
              $('#ajaxGetUserServletResponse1').text('');
  
              var dataToBeSent  = {
                      ssAccountID : sessionStorage.getItem('ssAccountID'),
                      startDate : $("#startDate").val(),
                      endDate: $("#endDate").val()
              };
  
              //Joined
              $.ajax({
                  url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
                  data : dataToBeSent, 
                  type : 'POST',  
              })
              .fail (function(jqXHR, textStatus, errorThrown) {
                  //alert(jqXHR.responseText);
                  if(jqXHR.responseText.includes('No members joined in this date range')){
                      $('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
                  }else{
                      $('#ajaxGetUserServletResponse1').text('Error getting joined data.');
  
                  }
                  $("#datepicker1").focus();
              })
              .done(function(responseJson1a){
                  dataType: "json";
  
  //              alert(JSON.stringify(responseJson1a)); 
  //              Result of alert is:
  //                  [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
  
                   var tablebody2 = '          &lt;tr&gt;' + 
                      '&lt;td&gt;Cubs&lt;/td&gt;' +
                      '&lt;td&gt;9&lt;/td&gt;' +
                    '&lt;/tr&gt;' +
                    '&lt;tr&gt;' +
                      '&lt;td&gt;Scouts&lt;/td&gt;' +
                      '&lt;td&gt;10&lt;/td&gt;' +
                    '&lt;/tr&gt;';
  
                   $("#mytablebody").empty();
                   $("#mytablebody").append(tablebody2);
  //               $('#joinedTable').DataTable(); // Uncomment this and the error happens
              })
          }
      })
  
  }); // end document.ready
  
  $(function(){
      $("#includedContent").load("Menu.html");
  
      $('#datepicker1').datepicker({
          format: 'dd/mm/yyyy',
              });
      $('#datepicker2').datepicker({
          useCurrent: false, //Important! See issue #1075
          format: 'dd/mm/yyyy',
      });
      $("#datepicker1").on("dp.change", function (e) {
          $('#datepicker2').data("DatePicker").minDate(e.date);
      });
      $("#datepicker2").on("dp.change", function (e) {
          $('#datepicker1').data("DatePicker").maxDate(e.date);
      });
  });
  </code></pre>