Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selected ?

Moderator: mindphp

Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selected ?

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

In my Joomla 5 custom component, I need to add a calendar input field so that the user can choose a date and search for events on that date. However, when I navigate to the previous or next month in the calendar input field, the form is submitted automatically. Currently, if I go to the next month, the date one month after today is selected (e.g., if today is November 13, it selects December 13) and submits the form automatically. I want the form to be submitted only when the user explicitly selects a date. How can I achieve this?

How to make default value not selected for previous month and next month and submit the form only if user selects a date ?


this is my xml file for filtering

โค้ด: เลือกทั้งหมด

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <fields name="filter">
        <field
            name="search"
            type="text"
            inputmode="search"
            class="js-select-submit-on-change"
            description="FILTER_SEARCH_LABEL"
            hint="JSEARCH_FILTER"
        />

        <field
            name="event_type"
            type="sql"
            label="Event Type "
            hint='SELECT_EVENT_TYPE'
            required="true"
            query="SELECT id AS value, event_type_name AS text FROM tools_calendar_event_types ORDER BY event_type_name ASC"
            key_field="value"
            class="js-select-submit-on-change"
            value_field="text"
        >
            <option value="">SELECT_EVENT_TYPE_WITH_DASH_SIGN</option>
            <option value="all">ALL</option>
        </field>

        <field
            name="start_date"
            type="calendar"
            hint="FILTER_START_DATE"
            onchange="this.form.submit();"
            format="%Y-%m-%d"
            class="inputbox"
        />

        <field
            name="end_date"
            type="calendar"
            hint="FILTER_END_DATE"
            onchange="this.form.submit();"
            format="%Y-%m-%d"
            class="inputbox"
        />
    </fields>
version: Joomla 5
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 23574
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

Please provide an illustration
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

tsukasaz เขียน: 13/11/2024 2:20 pm Please provide an illustration
testing video - https://drive.google.com/file/d/1teY5mm ... sp=sharing
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 23574
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

remove "onchange" from "start_date" and "end_date"

you might use JS to help validate data entry and submit the form.
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

I removed "onchange" from "start_date" and "end_date"
and added JS codes to check there is "start_date" , "end_date" value or not.
If there is "start_date" or "end_date" value, it will submit the form.

โค้ด: เลือกทั้งหมด

<field
            name="start_date"
            type="calendar"
            hint="FILTER_START_DATE"
            format="%Y-%m-%d"
            class="inputbox"
            id="start_date"
        />

        <field
            name="end_date"
            type="calendar"
            hint="FILTER_END_DATE"
            format="%Y-%m-%d"
            class="inputbox"
            id="end_date" 
        />
in "default.php" related to that xml file

โค้ด: เลือกทั้งหมด

<?php
$doc = Factory::getDocument();
$doc->addScriptDeclaration("
    document.addEventListener('DOMContentLoaded', function() {
        const startDateField = document.querySelector('[name=\"filter[start_date]\"]');
        const endDateField = document.querySelector('[name=\"filter[end_date]\"]'); 

        function submitFormOnDateChange(field) {
            if (field && field.value) {
                field.form.submit(); 
            }
        }

        if (startDateField) {
            startDateField.addEventListener('change', function() {
                submitFormOnDateChange(startDateField);
            });
        }

        if (endDateField) {
            endDateField.addEventListener('change', function() {
                submitFormOnDateChange(endDateField);
            });
        }

    });
");
?>
Now, it submit the form only when it has input data.
But it works only for current month, if I go to previous month or next month, it automatically retrieves the value and submit the form.

How can I check for previous month and next month fields ?
MindPHP Assistant

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selected ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

The issue you're facing is likely because the calendar input fields are triggering the `change` event when you navigate between months, as the fields might temporarily have a value set or lose focus. This can happen if the calendar widget you are using modifies the input field values during navigation.

To address this, you can modify the JavaScript to ensure that the form is only submitted when a valid date is selected, rather than when navigating months. You can do this by adding a check to make sure the value of the date field is indeed a valid date format, and optionally you can compare it against a default or empty state before submitting.

Here's a modified version of your JavaScript script, adding a check to only submit the form when the input value is a valid date:

โค้ด: เลือกทั้งหมด

javascript
document.addEventListener('DOMContentLoaded', function() {
    const startDateField = document.querySelector('[name="filter[start_date]"]');
    const endDateField = document.querySelector('[name="filter[end_date]"]');

    function isValidDate(dateString) {
        // Check if the date string is in the format YYYY-MM-DD and is a valid date
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (!dateRegex.test(dateString)) {
            return false;
        }
        
        const date = new Date(dateString);
        return date instanceof Date && !isNaN(date);
    }

    function submitFormOnValidDate(field) {
        if (field && isValidDate(field.value)) {
            field.form.submit();
        }
    }

    if (startDateField) {
        startDateField.addEventListener('change', function() {
            submitFormOnValidDate(startDateField);
        });
    }

    if (endDateField) {
        endDateField.addEventListener('change', function() {
            submitFormOnValidDate(endDateField);
        });
    }
});
### Key Points:

- **Regular Expression Check**: I added a regular expression to check if the input value matches the expected date format (`YYYY-MM-DD`). This helps ensure that only valid dates trigger the form submission.

- **Date Validity Check**: The script checks if the parsed date is a valid date object.

By using these checks, the form should only submit when a valid date is selected, not when navigating between months without selecting a date. This should prevent the form from submitting when the calendar widget temporarily changes the input value while you navigate.
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

MindPHP Assistant เขียน: 15/11/2024 10:03 am The issue you're facing is likely because the calendar input fields are triggering the `change` event when you navigate between months, as the fields might temporarily have a value set or lose focus. This can happen if the calendar widget you are using modifies the input field values during navigation.

To address this, you can modify the JavaScript to ensure that the form is only submitted when a valid date is selected, rather than when navigating months. You can do this by adding a check to make sure the value of the date field is indeed a valid date format, and optionally you can compare it against a default or empty state before submitting.

Here's a modified version of your JavaScript script, adding a check to only submit the form when the input value is a valid date:

โค้ด: เลือกทั้งหมด

javascript
document.addEventListener('DOMContentLoaded', function() {
    const startDateField = document.querySelector('[name="filter[start_date]"]');
    const endDateField = document.querySelector('[name="filter[end_date]"]');

    function isValidDate(dateString) {
        // Check if the date string is in the format YYYY-MM-DD and is a valid date
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (!dateRegex.test(dateString)) {
            return false;
        }
        
        const date = new Date(dateString);
        return date instanceof Date && !isNaN(date);
    }

    function submitFormOnValidDate(field) {
        if (field && isValidDate(field.value)) {
            field.form.submit();
        }
    }

    if (startDateField) {
        startDateField.addEventListener('change', function() {
            submitFormOnValidDate(startDateField);
        });
    }

    if (endDateField) {
        endDateField.addEventListener('change', function() {
            submitFormOnValidDate(endDateField);
        });
    }
});
### Key Points:

- **Regular Expression Check**: I added a regular expression to check if the input value matches the expected date format (`YYYY-MM-DD`). This helps ensure that only valid dates trigger the form submission.

- **Date Validity Check**: The script checks if the parsed date is a valid date object.

By using these checks, the form should only submit when a valid date is selected, not when navigating between months without selecting a date. This should prevent the form from submitting when the calendar widget temporarily changes the input value while you navigate.
Not working. still refresh and submit the form when go to previous month and next month. The problem is auto filling date field when go to previous month and next month

input field filter xml file

โค้ด: เลือกทั้งหมด

        <field
            name="start_date"
            type="calendar"
            hint="FILTER_START_DATE"
            format="%Y-%m-%d"
            class="inputbox"
            id="start_date"
        />

        <field
            name="end_date"
            type="calendar"
            hint="FILTER_END_DATE"
            format="%Y-%m-%d"
            class="inputbox"
            id="end_date" 
        />
MindPHP Assistant

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selected ?

โพสต์ที่ยังไม่ได้อ่าน โดย MindPHP Assistant »

It sounds like the problem is that the calendar widget is automatically filling the date fields when you navigate between months, and this is triggering the `change` event, causing the form to submit.

To address this issue, you'll need to modify the JavaScript to better handle when the form should actually be submitted. One approach is to debounce the change event or to only act on the event when it's a user confirmation, such as when the user explicitly selects a date.

Here's an alternative approach:

1. **Debounce the Change Event:** This will prevent rapid changes from triggering the form submission. You will only submit after a short period of user inactivity after a change.

2. **Check If the Date Is Truly Selected:** You can track whether the date was set by a user action (such as clicking a date) rather than just navigating months.

Here's how you might implement these ideas:

โค้ด: เลือกทั้งหมด

javascript
document.addEventListener('DOMContentLoaded', function() {
    const startDateField = document.querySelector('[name="filter[start_date]"]');
    const endDateField = document.querySelector('[name="filter[end_date]"]');
    
    let changeTimeout;

    function isValidDate(dateString) {
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (!dateRegex.test(dateString)) {
            return false;
        }
        
        const date = new Date(dateString);
        return date instanceof Date && !isNaN(date);
    }

    function submitFormOnValidDate(field) {
        if (field && isValidDate(field.value)) {
            field.form.submit();
        }
    }

    function handleChange(field) {
        clearTimeout(changeTimeout); // Clear the previous timeout
        changeTimeout = setTimeout(() => {
            submitFormOnValidDate(field);
        }, 500); // Adjust time as needed
    }

    if (startDateField) {
        startDateField.addEventListener('change', function() {
            handleChange(startDateField);
        });
    }

    if (endDateField) {
        endDateField.addEventListener('change', function() {
            handleChange(endDateField);
        });
    }
});
### Explanation:

- **Debounce Mechanism**: The `changeTimeout` variable is used to debounce the change event. This means the form will only be submitted if there is no other change event triggered within 500 milliseconds. Adjust this timing as needed to suit your use case.

- **User Interaction Tracking**: This basic script assumes that once a valid date is set after the debounce period, it is intended by the user. If your calendar widget supports user confirmation events (like `onSelect` or `onPick`), prefer using those over `change`.

If the calendar widget you're using doesn't fire distinct events for actual user selection versus navigation, you might need to look into its documentation or API to see if there's a more specific event you can listen for when a date is specifically selected, not just when the input value changes.
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 23574
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

Can the user select a date and then press search manually? We don't need to auto-submit the form.
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
Raja Pdl
PHP VIP Members
PHP VIP Members
โพสต์: 2241
ลงทะเบียนเมื่อ: 27/05/2024 9:50 am

Re: Q - How to Implement a Calendar Input Field in Joomla 5 Custom Component and Submit Form Only When a Date is Selecte

โพสต์ที่ยังไม่ได้อ่าน โดย Raja Pdl »

I searched the calendar layout file and added a search box after calendar icon. But I can add only in Joomla core files - "\layouts\joomla\form\field\calendar.php", and I can check if that seach button is clicked , the form will submit.

But the main problem is, it is in Joomla core files, and not included in my component files.
So, what can I do to when I install the component, this "calendar.php" file also update ?


flter start date.PNG
flter start date.PNG (30.77 KiB) Viewed 198 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 1