Bootstrap datepicker is not working after ajax call.
On First time load page its working properly but after ajax call I am just updaing 'data-date-start-date' and 'data-date-end-date' attribute value by knockout js.
Also there is no any error display on inspect element of browser.
Here is my code:
function MEI() {
var self = this;
self.TranDate = ko.observable();
self.StartDate = ko.observable();
self.EndDate = ko.observable();
self.StartDate("04/01/2016");
self.EndDate("04/30/2016");
self.TranDate("04/22/2016")
self.ChangeDate = function()
{
var date = new Date();
var firstDay = new Date(date.getFullYear(), 3 - 1, 1);
var lastDay = new Date(date.getFullYear(), 3, 0);
var sd = ((firstDay.getMonth() + 1) + '/' + firstDay.getDate() + '/' + firstDay.getFullYear());
var ed = ((lastDay.getMonth() + 1) + '/' + lastDay.getDate() + '/' + lastDay.getFullYear());
$.ajax({
url: '@Url.Action("Test", "Home")',
cache: false,
type: 'GET',
data: '',
success: function (result) {
self.TranDate("");
self.StartDate(sd);
self.EndDate(ed);
//$(".test").attr('data-date-start-date',sd);
//$(".test").attr('data-date-end-date',ed);
},
error: function (errorThrown) {
}
});
}
}
$(document).ready(function () {
ko.applyBindings(new MEI());
});
<tbody>
<tr>
<td>
<input id="test" type="text" class="form-control form-control-inline input-medium date-picker test" data-bind="value:TranDate, attr:{'data-date-start-date':StartDate ,'data-date-end-date':EndDate}" data-date-format="mm/dd/yyyy" readonly />
</td>
<td>
<button type="submit" data-bind="click:ChangeDate">Click</button>
</td>
</tr>
</tbody>