JetSmartFilters' Date Range picker for touch devices by preventing the virtual keyboard from displaying on mobile and tablet screens

gistfile1.txt

Paste this code to your snippet plugins. Create a new snippet and select js, javascript, and paste in this code and save it.

This script optimizes JetSmartFilters' Date Range picker for touch devices by preventing the virtual keyboard from displaying
on mobile and tablet screens. It sets Date Range fields to readonly, allowing users to select dates through the touch-friendly
picker without keyboard interference. Ideal for enhancing user experience in JetSmartFilters implementations, 
it ensures smooth and focused date selection on touch-enabled devices.
________________________________________________________________



document.addEventListener("DOMContentLoaded", function() {
    // Dynamically insert the viewport meta tag
    var metaViewport = document.createElement('meta');
    metaViewport.name = "viewport";
    metaViewport.content = "width=device-width, user-scalable=no";
    document.getElementsByTagName('head')[0].appendChild(metaViewport);

    // Check if the device is touch-capable
    function isTouchDevice() {
        return (('ontouchstart' in window) ||
                (navigator.maxTouchPoints > 0) ||
                (navigator.msMaxTouchPoints > 0));
    }

    if (isTouchDevice()) {
        // Query all relevant date input fields
        var dateInputs = document.querySelectorAll('.jet-smart-filters-date-range.jet-filter input[type="text"], .jet-date-range__from.jet-date-range__control.hasDatepicker');

        dateInputs.forEach(function(input) {
            // Ensure input field does not bring up the keyboard on touch devices
            input.setAttribute('readonly', true);

            // Set current date in d/m/Y format
            var currentDate = new Date();
            var formattedDate = currentDate.getDate() + '/' + (currentDate.getMonth() + 1) + '/' + currentDate.getFullYear();
            input.value = formattedDate; // Set the current date as the input's value

            // Focus on the input field to potentially trigger the date picker
            input.addEventListener('click', function() {
                this.blur(); // Ensure input is blurred to prevent keyboard from showing
                this.removeAttribute('readonly');
                this.click(); // Attempt to trigger the date picker programmatically
                this.setAttribute('readonly', true); // Reapply readonly attribute
            }, false);
        });
    }
});