Skip to content

Instantly share code, notes, and snippets.

@mohitmayank
Created December 17, 2013 16:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohitmayank/8007958 to your computer and use it in GitHub Desktop.
Save mohitmayank/8007958 to your computer and use it in GitHub Desktop.
Bootstrap based Date picker formatter for tablesorter (https://github.com/Mottie/tablesorter) using https://github.com/tarruda/bootstrap-datetimepicker
var bootstrapDatepicker = function($cell) {
var $minDateField = $('<div class="input-prepend minDateFilterField"><span class="add-on"><i data-time-icon="icon-chevron-right" data-date-icon="icon-chevron-right"></i></span><input class="forceHide" type="text"></div>').appendTo($cell);
$minDateField.datetimepicker({
pickDate: true,
pickTime: false,
format : "dd-MM-yyyy"
});
var minDatePicker = $minDateField.find('input');
var $input = $('<input type="text" class="dateFilterField"/>').appendTo($cell);
var $maxDateField = $('<div class="input-append maxDateFilterField"><input class="forceHide" type="text"><span class="add-on"><i data-time-icon="icon-chevron-left" data-date-icon="icon-chevron-left"></i></span></div>').appendTo($cell);
$maxDateField.datetimepicker({
pickDate: true,
pickTime: false,
format : "dd-MM-yyyy"
});
var maxDatePicker = $maxDateField.find('input');
$minDateField.on('changeDate', function(){
if(maxDatePicker.val() !== '') {
$input.val(minDatePicker.val() + ' - ' + maxDatePicker.val());
} else {
$input.val('>= ' + minDatePicker.val());
}
$input.trigger('search');
});
$maxDateField.on('changeDate', function(){
if(minDatePicker.val() !== '') {
$input.val(minDatePicker.val() + ' - ' + maxDatePicker.val());
} else {
$input.val('<= ' + maxDatePicker.val());
}
$input.trigger('search');
});
$input.change(function(){
if($input.val() === '') {
minDatePicker.val('');
maxDatePicker.val('');
}
return false;
});
return $input;
};
@Mottie
Copy link

Mottie commented Mar 9, 2014

This demo shows how to use the filter with dangrossman/bootstrap-daterangepicker plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment