Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Sabbir345's avatar

Multiple date selecte in single input field and how to store separately?

I want to be a create date picker calender . Which having option to select multiple dates with single input field . Please help me if someone have do before.

0 likes
2 replies
madsem's avatar
madsem
Best Answer
Level 4

I'm doing this atm also, I'm using this library: https://github.com/dangrossman/daterangepicker

It's pretty good and does exactly what you need.

initialize the field

$(function () {
            $('input[name="datetime"]').daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                startDate: moment().startOf('day'),
                endDate: moment().startOf('day').add(24, 'hours'),
                locale: {
                    format: 'MM/DD/YYYY HH:mm'
                }
            });
        });

To save it in the database you can simply explode the from / to date strings

$fromDateTime = trim(explode('-', $request->get('datetime'))[0]);
$toDateTime = trim(explode('-', $request->get('datetime'))[1]);

And then query like

->whereDate('table_name.updated_at', '>=', Carbon::parse($fromDateTime))
->whereDate('table_name.updated_at', '<=', Carbon::parse($toDateTime))
dleroari's avatar

I am using this one by Amsul pickdate.js. Similar to what @madsem have shown above, but I've also made it possible to format the inputs so that I can easily capture what I need without doing any formatting in Laravel.

$(#idName).pickadate({
    formatSubmit: 'dd.mm.yyyy', 
    firstDay: 1, // Starts on Monday
    disable: [7] // Prevent user from selecting Sunday
});

And then when user submits

$request->input('nameOfTheInputField'); 

There are many more options, for instance change the name of the dates to your preferable language, limit what days are available. Similar to date, they also include picktime() for hours. For instance, user can select what time of the day he is at work. In addition, you can limit the time only from 08:00 AM to 15:00 PM and so forth.

The documentation is also well written, click here.

Btw, it provides two themes, I use classic.

1 like

Please or to participate in this conversation.