Setting the startDate/minDate of the second date picker based on the value of the first one.

[AdamovicBoban]

Bug report

What I did

CRUD::field('pickup_date')
            ->label('Pick Up Date')
            ->type('date_picker')
            ->date_picker_options([
                'startDate' => '+1d',
                'autoclose' => true,
                'todayHighlight' => true,
                'clearBtn' => true,
                'format' => 'dd.mm.yyyy',
                'language' => 'en',
            ])
            ->allows_null(false);

        CRUD::field('pickup_date_return')
            ->label('Pick Up Date - Return')
            ->type('date_picker')
            ->date_picker_options([
                'startDate' => '+1d',
                'autoclose' => true,
                'todayHighlight' => true,
                'clearBtn' => true,
                'format' => 'dd.mm.yyyy',
                'language' => 'en',
            ]);

JavaScript

  function updateReturnDateMin() {
            const pickupDateEl = $("input[name='pickup_date']");
            const returnDateEl = $("input[name='pickup_date_return']");

            const pickupDateVal = pickupDateEl.val();

            if (pickupDateVal) {

                const parts = pickupDateVal.split(".");
                const pickupDate = new Date(parts[2], parts[1] - 1, parts[0]);

                returnDateEl.datepicker("setStartDate", pickupDate);

                const returnDateVal = returnDateEl.val();
                if (returnDateVal) {
                    const returnParts = returnDateVal.split(".");
                    const returnDate = new Date(returnParts[2], returnParts[1] - 1, returnParts[0]);

                    if (returnDate < pickupDate) {
                        returnDateEl.datepicker("setDate", pickupDate);
                    }
                }
            }
        }

        $(document).on("changeDate", "input[name='pickup_date']", updateReturnDateMin);
        $(document).on("change", "input[name='pickup_date']", updateReturnDateMin);

What I expected to happen

I expect the second date picker to have its start date/min date limited based on the date value from the first one.

What happened

Nothing!

What I've already tried to fix it

I tried a million different combinations I found on Google and the ones GPT suggested.

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

### PHP VERSION:
8.3.14

### PHP EXTENSIONS:
Core, bcmath, calendar, ctype, date, filter, hash, iconv, json, SPL, pcre, random, readline, Reflection, session, standard, mysqlnd, tokenizer, zlib, libxml, dom, PDO, openssl, SimpleXML, xml, xmlreader, xmlwriter, ldap, curl, com_dotnet, fileinfo, gd, gettext, gmp, intl, imap, mbstring, exif, mysqli, Phar, pdo_mysql, pdo_sqlite, soap, sockets, sqlite3, xsl, zip, Zend OPcache, xdebug

### LARAVEL VERSION:
12.5.0.0

### BACKPACK PACKAGE VERSIONS:
backpack/basset: 1.3.8
backpack/crud: 6.8.0
backpack/devtools: 3.1.7
backpack/editable-columns: 3.0.11
backpack/generators: v4.0.7
backpack/medialibrary-uploaders: 1.2.1
backpack/permissionmanager: 7.2.1
backpack/pro: 2.2.33
backpack/theme-tabler: 1.2.17

[backpack-ai-bot]

I can see you're having issues with date picker dependencies in Backpack. Based on the knowledge sources, there are a few issues with date pickers in Backpack that might be related to your problem.

The main issue appears to be that you're using .datepicker() in your JavaScript, but Backpack's date picker implementation might be using a different method. According to some of the issues in the knowledge sources, Backpack has had various changes to how date pickers work.

Here are a few suggestions to fix your issue:

1. Try using .bootstrapDP() instead of .datepicker() in your JavaScript. This was mentioned as a fix in one of the issues in this GitHub issue.

function updateReturnDateMin() {
    const pickupDateEl = $("input[name='pickup_date']");
    const returnDateEl = $("input[name='pickup_date_return']");
    const pickupDateVal = pickupDateEl.val();
    if (pickupDateVal) {
        const parts = pickupDateVal.split(".");
        const pickupDate = new Date(parts[2], parts[1] - 1, parts[0]);
        returnDateEl.bootstrapDP("setStartDate", pickupDate);
        const returnDateVal = returnDateEl.val();
        if (returnDateVal) {
            const returnParts = returnDateVal.split(".");
            const returnDate = new Date(returnParts[2], returnParts[1] - 1, returnParts[0]);
            if (returnDate < pickupDate) {
                returnDateEl.bootstrapDP("setDate", pickupDate);
            }
        }
    }
}

2. Make sure you're triggering the change event properly. According to this issue, there was a bug where the change event wasn't being fired correctly.

3. Another approach is to use Backpack's field API to set up dependencies between fields. In this issue, a contributor mentioned using request values to set field values:

CRUD::field('pickup_date_return')->value(request()->pickup_date);

4. If you're still having issues, you might need to check if there are any JavaScript errors in your console that could provide more clues.

Remember that Backpack's date picker implementation has changed over time, so solutions from older versions might not work in newer ones. The current version you're using (6.8.0) might have different requirements than what's documented in some of the older issues.

Let me know if any of these suggestions help or if you need further assistance!

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): Initial value of date picker can be a day off
Github Issue (closed): Wrong date in calendar operations new entry
Github Issue (closed): [Bug] field date_range select ranges invalid date
Github Issue (closed): defaultDate in datetime_picker overwrites existing value
Github Issue (closed): [BUG] Date_range start_name value always falls back to default
Github Issue (closed): [Bug] date_range field inside repeatable field doesn't work
Github Issue (closed): [BUG] datepicker field gives js error $(...).datepicker not defined
Github Issue (closed): CRUD field JS Does Not Play Nicely With Repeatable and Date Range
Github Issue (closed): addField datepicker not working properly
Github Issue (closed): Backpack DatePicker change event not fired on jquery
Github Issue (closed): laravel backpack and iis and sql server
Github Issue (closed): [Bug] Undefined array key "datetime_picker_options" using date_picker field
Github Issue (closed): [Bug] date_picker field is not working in incline create

[AdamovicBoban]

• Suggestion 1: bootstrapDP instead of datepicker – doesn't solve the problem.
• Suggestion 2: The onchange event is triggered.
• Suggestion 3: Doesn't solve the problem.
• Suggestion 4: No JavaScript errors in the console.

Where am I going wrong? Has anyone dealt with two date pickers and setting the startDate based on the first one? If so, could you share a snippet of code?

[jcastroa87]

Hello @AdamovicBoban

Why you don't use "Date Range"?

As our bot say the correct way to handle config is with "bootstrapDP", better check the resources/views/fields/date_picker.blade.php on deep to understand how this is handled.

Cheers.

[AdamovicBoban]

@jcastroa87 I'm not using a date range because I don't need it. These are dates for rides FROM and TO the airport, and they are completely separate. It can be just a pickup_date, or it can include a return trip with both pickup_date and pickup_date_return.