var date_field = $('#id_date');
            if (Modernizr.inputtypes.date && window.mobileCheck()) {
                date_field.attr('type', 'date');
                date_field.val("{{ date|date:'Y-m-d' }}");
            }
            else {
                date_field.val("{{ date|date:'d.m.Y' }}");
                date_field.datepicker();
            }
            date_field.on('change', function () {
                var obj = $(this);
                if (obj.val().length == 10)
                    $('#id_submit_filter_form_btn').click();
            });
            $('a', '.ui-datepicker-calendar').on('click', function () {
                var td_obj = $(this).closest('td');
                function reformat_date_element(el) {
                    if (parseInt(el) < 10)
                        return '0' + el;
                    return el;
                }
                var date = reformat_date_element($(this).html().trim()) + '.' + reformat_date_element(parseInt(td_obj.attr('data-month')) + 1) + '.' + td_obj.attr('data-year');
                $('#id_date').val(date);
                $('#id_submit_filter_form_btn').click();
            });

 <input type="text" name="date" id="id_date" pattern="([0-9][0-9])(\.)?([0-9][0-9])(\.)?([0-9][0-9][0-9][0-9])" required/>