CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatables
CSharpNewBee
CSharpNewBee

Reputation: 1981

Bootstrap Datepicker and DataTables fnDraw() issue

I have a Bootstrap datepicker range, which I call the setDate function as shown:

$('.input-daterange').datepicker({
                        format: "dd/mm/yyyy",
                        todayBtn: "linked",
                        calendarWeeks: true,
                        autoclose: true,
                        todayHighlight: true
                    });

$('#fromDate, #toDate').datepicker('setDate', new Date());

with the corresponding html being:

<table>
     <tr class="input-daterange input-group" id="datepicker">
       <td>
          <input id="fromDate" type="text" class="input-sm form-control" name="start"/>
          <span id="toDate" class="input-group-addon">to</span>
          <input type="text" class="input-sm form-control" name="end" /> 
       </td>                     
     </tr>
</table>

Now, I am also using DataTables which is using the fnDraw() method to redraw my tables data based on certain UI changes, one of them being listening to .change of my date ranges.

When I try and set the default date (of today) using the above JS code, then I get the following error:

JavaScript runtime error: Unable to get property 'fnDraw' of undefined or null reference

How can I prevent this from happening, or how can I set the default date, without using the setDate method?

Upvotes: 1

Views: 1223

Answers (1)

Subtletree
Subtletree

Reputation: 3329

Not sure what backend you're using but could you set the default dates server side by setting the input's value like so: E.g for rails you could use

<input value="<%= Date.today.strftime('%d/%m/%Y') %>" id="fromDate" type="text" class="input-sm form-control" name="start"/>
<span id="toDate" class="input-group-addon">to</span>
<input value="<%= Date.tomorrow.strftime('%d/%m/%Y') %>" type="text" class="input-sm form-control" name="end" />

I am using this method to set the default date for bootstrap-datepicker in an app of mine.

I guess you would also have to give your datatable default dates to work with too so it would show the correct data to begin with.

Upvotes: 1

Related Questions