DateTime range with two inputs

[mgibbs189]

JSFiddle: https://jsfiddle.net/8q7h7tff/

Expected Behavior

After selecting a date range (start + end), I should be able to somehow edit the start time.

Current Behavior

After selecting the range, one cannot edit the start time without resetting the range.

Possible Solution

Perhaps we need separate time fields, or a way to distinguish between START time and END time.

See http://element.eleme.io/#/en-US/component/datetime-picker

Your Environment

• Version used: 2.3.5
• Browser Name and version: Chrome 55
• Operating System and version (desktop or mobile): macOS

[chmln]

Hello Michael,

I agree that a single input is not sufficient for user-friendly datetime range selection.

After selecting a date range (start + end), I should be able to somehow edit the start time.

allowInput: true

However note that flatpickr doesn't require vue.js and thus implementing multi-input ranges without bloating the source code is much harder.

Ideally, we could have nicer datetime range selections via plugins.

I'll get back to this after new docs are released.

[alteredstudio]

Can this mimic Airbnb's datepicker style with start and end calendars that show at the same time?

[fboucquez]

Hi guys, same problem here. I know it's a lot to ask, but any timeframe?

Maybe you could put 2 time pickers one next to the other taking 50% of the space each

[chmln]

@alteredstudio yes @fboucquez 3-4 weeks

https://github.com/chmln/flatpickr/issues/678#issuecomment-287193867

I'm planning to make a plugin to enable Airbnb-style range picking. Might take a few weeks due to me being incredibly busy with midterms and exams.

[amnesia7]

What if minDate/maxDate could work with function as well as String and Date?

If that was the case, start and end date instances could be set to look at the opposite date field's value. i.e. the developer could set a maxDate function for start date field to be based on the value for end date if necessary and a minDate function for the end date field could be based on the value for the start date field value.

It might also be worth updating/setting the min/max attributes on the mobile/noCalendar fields themselves which wouldn't have any effect on text fields but would on date fields.

[chmln]

Almost ready :tada:

[amnesia7]

Not wanting to be awkward but is it possible that it could allow for "To" being optional?

[chmln]

@amnesia7 this is a plugin, and plugins are optional by definition.

[fboucquez]

Great work! How does the time picker work with the 2 fields?

[amnesia7]

@chmln what I was actually meaning was that it allowed the user to select either just From or From & To rather than forcing them to select a range. I suspect that it might make more sense to the user in this case though if they were separate fields.

[abriginets]

@chmln this is exactly what i wanted. Well done!

[loveorigami]

Very need this plugin! Thanks!

[MartinMuzatko]

can't wait for this.

[foxdog05000]

Hello, is it possible to manage start and end times with this plugin? Otherwise how to do?

[marijohannessen]

Hi! Any update on when this will be available? Can't wait!

[chmln]

@foxdog05000 Yes! @marijohannessen by the end of this weekend

[afabros]

I also need this :| Having unlinked instances will just require too many codes to check if end date is after start date, that goes the same for time -- date ranges with time two inputs without having to remove ' to ' is really the perfect solution. Kindly help us know if this plugin is already available. Thank you for the hard work on flatpickr^^

[chmln]

Hi all,

rangePlugin is now available at flatpickr@next.

Feel free to npm i flatpickr@next to try it out.

p.s. there are two breaking changes in v3:

• usage of new Flatpickr... deprecated in favor of flatpickr() or new flatpickr()
• the removal of the utc option.

[abriginets]

@chmln thank you very much for the work you have done! Flatpickr did one more step to become better and confirmed it's status as the best datetime picker 😃

[marijohannessen]

@chmln Thank you so much, really appreciate all the work you've done - you've saved me so much time! 🎉

[ajayenuke]

@chmln I need date range picker same as (https://github.com/chmln/flatpickr/issues/584#issuecomment-289295697). As you shown it on pictorial representation on previous comment. I need to use it as Vue js component. Please provide any documentation for the same.

[foxdog05000]

@chmln Nice job, thanks you so much !

[vangelis183]

@chmln Hi, is there an example for the usage of the rangePlugin with two input Fields as shown on your Image here: https://github.com/chmln/flatpickr/issues/584#issuecomment-289295697

[chmln]

@vangelis183 not yet, but it will be available this weekend as I update the documentation :+1:

[AlingChen]

@chmln Thank you so much, can't wait for it. By the way, is the example ready yet？ :)

[omartawba1]

@chmln Thanks for adding it, But I can't find example to make range picker with two inputs in the documentation!

[afabros]

@omartawba1 you can find @chmln 's example at https://github.com/chmln/flatpickr/issues/873... still have issue that with two input results though, "start_date_time" => "June 21, 2017 4:14 PM" "end_date_time" => "2017-06-14 16:14 to 2017-06-21 16:14"

[chmln]

Hey guys, sorry for the delays, I've just gotten back from a vacation.. The docs will be updated tonight and I'll add a link here as soon as they're ready.

Thank you for your patience

[pasairnav]

Any updates on this?

[mattmewton]

I too am looking for updates on this. @chmln have you had a chance to update the documentation for this new feature?

[javlc]

Hello Gregory, First of all, thank you for this awesome-looking date picker plugin. Eagerly awaiting for the docs on the date range using two inputs. Next Monday my dev team is to decide which date range picker plugin to use, and I am favoring this one, if I ever get the date range to work on two inputs. (I will be using the ember addon that wraps flatpickr). Cheers!

cc: @chmln

[chmln]

Here's a quick how-to while I upgrade the docs and release v3.1

HTML:

    <label>Date 1
      <input placeholder="Select Date..." />
    </label>

    <label>Date 2
      <input placeholder="Select Date..." id="input2" />
    </label>

JS:

flatpickr("input", {
    plugins: [new rangePlugin({ input: "#input2"})]
});

Plugin options:

interface Config {
  input?: string | HTMLInputElement;
}

[chmln]

https://chmln.github.io/flatpickr/plugins/#rangeplugin-beta

[nicovanzyl]

Would this be possible with two inline pickers?

[xcrap]

I've detecting some bugs in the rangePlugin. After you select a date, in the second selection when you change the year it don't update the date anymore.

[chmln]

@xcrap please open a new issue for this

[Kryptonit3-zz]

Any way for the value of input 1 to be 2018-05-09 instead of 2018-05-09 to 2018-05-11 ?

[Kryptonit3-zz]

guess I could do this

    flatpickr('#jobDateStart', {
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        minDate: new Date(),
        "plugins": [new rangePlugin({ input: "#jobDateEnd"})],
        onChange: [function(selectedDates){
            const dateArr = selectedDates.map(date => this.formatDate(date, "Y-m-d"));
            $('#jobDateStart').val(dateArr[0]);
        }]
    });

[lieunttuit]

@chmln Hi, Would this be possible with two inline picker?

[strarsis]

Has this been solved now?

[mahajan1217]

when we select startDate and same endDate it only shows startDate in mode range. any solution to this

[enes9103]

when we select startDate and same endDate it only shows startDate in mode range. any solution to this

I am also looking for a solution to the same problem.

[massimoghm]

I hope I can help. The second input need type text.

Best regards