How to use Orchid DateTime component in blade?

[Muratcol]

Datetime has really cool UI and I'm looking for a form field something like this.

I wonder is it possible to use datetime field, into the blade component?

[tabuna]

You can use the usual Blade syntax:

{!! \Orchid\Screen\Fields\DateTimer::make('open')->title('Opening date') !!}

[Muratcol]

Yess, perfect. Thanks a lot @tabuna

But how can I get the date data from the component?

I was able to get a default selector component like this. But datetimer works differently

           $('#yearSelector').on('change', function() {
               const year = $(this).val(); // get selected year
               const accountId = $('#accountSelector').val(); // Get account ID from default selector
               if (year) { // require a URL
                   window.location= `/admin/statistics/publishEngineStatistics/chart/${year}/${accountId}`;
               }
               return false;
           });

And this is how I call the datetimer:

                <div class="second-content">
                    <p>Year: </p>
                    
                    <div name="year" class="selectors" style="width: 150px;" id="yearSelector">
                        {!! \Orchid\Screen\Fields\DateTimer::make('yearSelector')->format('Y') !!}
                    </div>
                </div>

[Muratcol]

@tabuna Do you have some advice, sir?

[tabuna]

There are a few things you should pay attention to in the above code:

<div name="year" class="selectors" style="width: 150px;" id="yearSelector">

The div has a unique id under the name yearSelector. Then you are trying to hang a value change event on that div.

1. But div doesn't matter
2. There are no triggers for this to happen

You should hang the event on the field itself, not on the div.

document.querySelector("[name='yearSelector']").addEventListener('change', () => {
   // code
});

[Muratcol]

Oh, thank you so much! I didn't know that I could reach the component with "[name='yearSelector']"