wenzhixin / bootstrap-table

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
https://bootstrap-table.com/
MIT License
11.69k stars 4.44k forks source link

Date range picker when using filter control extension. #5337

Open minsis opened 3 years ago

minsis commented 3 years ago

Description
bootstrap-datepicker supports a date-range type. Since its not exactly a configuration option it doesn't work with filterDatepickerOptions. This would allow me to continue using filters on server side.

mschoettle commented 3 years ago

Does bootstrap-datepicker work with client side filtering in bootstrap-table? Do you happen to have an example?

xama commented 1 year ago

Hello, any news about using a datepicker range ?

thanks

xama commented 1 year ago

finally, i just make a custom filter for date range using the method filterBy :

const dateFrom = $(this.element).find("input[type=date][class*=creationDate-from]" ).val();

const dateTo = $(this.element).find("input[type=date][class*=creationDate-to]" ).val();            

table.bootstrapTable(
    'filterBy',
    {
        creationDateFrom: moment(dateFrom).format('DD/MM/YYYY'),
        creationDateTo: moment(dateTo).format('DD/MM/YYYY')
    },
    {
        'filterAlgorithm': (row, filters) => {
            return filters.creationDateFrom <= moment(row.creationDate, ['DD/MM/YYYY']).format('DD/MM/YYYY')
                && moment(row.creationDate, ['DD/MM/YYYY']).format('DD/MM/YYYY') <= filters.creationDateTo
        }
    }
)

until i find a better way..