How to get datepicker to show only years on datatables date filter

Question

By using datatables, I am trying to get my two date pickers to let the user only select years, not months or days.

I've tried something like this, but it doesn't seem to work properly:

var minDate, maxDate;

    // Custom filtering function which will search data in column four between two values
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = minDate.val();
            var max = maxDate.val();
            var date = new Date(data[13]);

            if (
                (min === null && max === null) ||
                (min === null && date <= max) ||
                (min <= date && max === null) ||
                (min <= date && date <= max)
            ) {
                return true;
            }
            return false;
        }
    );

    $(document).ready(function () {
        minDate = new DateTime($('#min'), {
            format: 'YYYY'
        });
        maxDate = new DateTime($('#max'), {
            format: 'YYYY'
        });

        $.noConflict();

        var table = $('.table').DataTable({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            autoWidth: false,
            ordering: false
        });

        $('#filterDates').on('click', function () {
            table.draw();
        });
    });

Here are my datepickers:

<div>
From: <input type="text" class="form-horizontal" id="min" name="min" />
&nbsp;To: <input type="text" class="form-horizontal" id="max" name="max" />
&nbsp;<button class="btn btn-dark" type="button" id="filterDates">Filter Dates</button>
</div>

That sounds like a HTML question about `` and maybe not a DataTables question. What datepicker are you actually using? — andrewJames, Aug 03 '22 at 21:57
Take a look at [Can I use an HTML input type "date" to collect only a year?](https://stackoverflow.com/q/34676752/12567365) - maybe you just need a 4-digit integer, not a date picker? — andrewJames, Aug 03 '22 at 21:58
I'm using DateTime datepickers from Datatables, one of them as an id of "min", and the other "max". — Young A, Aug 04 '22 at 01:34
(To be clear, I am talking about the date pickers where the users enter their data. The HTML.) — andrewJames, Aug 04 '22 at 01:45
Thank you. So, you are not actually using any date pickers. You are using text input fields. You can use the question I linked to, above, to display only year values. Then you don't need to use `DateTime` in your JavaScript. You just need to extract the year portion of your table's date values, for the comparison logic. — andrewJames, Aug 04 '22 at 12:39
This is what your question is asking for: "_to only show years_" and "_to let the user only select years_". It doesn't matter whether the year is then handled as a string or an integer in JavaScript. You can compare two strings **each containing exactly 4 digits** in the same way as you can compare two integers. — andrewJames, Aug 04 '22 at 13:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247034/discussion-between-young-a-and-andrewjames). — Young A, Aug 04 '22 at 13:43
Nice! You are welcome to [answer your own question](https://stackoverflow.com/help/self-answer). — andrewJames, Aug 04 '22 at 15:41

score 0 · Accepted Answer · answered Aug 05 '22 at 18:18

Turns out that I need number inputs fields instead of date pickers.

$.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = parseInt($('#min').val());
            var max = parseInt($('#max').val());
            var date = parseInt(data[13]) || 0;

            if (
                (isNaN(min) && isNaN(max)) ||
                (isNaN(min) && date <= max) ||
                (min <= date && isNaN(max)) ||
                (min <= date && date <= max)
            ) {
                return true;
            }
            return false;
        }
    );

    $(document).ready(function () {
        $.noConflict();

        var table = $('.table').DataTable({
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            autoWidth: false,
            ordering: false
        });

        $('#min, #max').on('click', function () {
            table.draw();
        });
    });

How to get datepicker to show only years on datatables date filter

1 Answers1