Create a calendar widget

[florentdestremau]

My try for now:

search.addWidget({
          getConfiguration: function () {
          },
          init: function (params) {
            var datepicker = $('.bootstrap-datepicker').datepicker({
              autoclose: true,
              format: 'dd/mm/yyyy',
              todayHighlight: true,
              weekStart: 1,
              language: 'fr',
              disableKeyboard: true,
              startDate: 'today'
            });
            var date = new Date();
            datepicker.datepicker('setDate', date);
            datepicker.on('change', function () {
              var date = $(this).datepicker('getDate');
              params.helper.removeNumericRefinement('timeStamp');
              params.helper.addNumericRefinement('timeStamp', '>=', moment(date).unix());
              params.helper.search();
            });

            params.helper.removeNumericRefinement('timeStamp');
            params.helper.addNumericRefinement('timeStamp', '>=', moment(date).unix());
          },
          render: function (params) {}
        });

It's working nicely since yesterday !

[vvo]

Awesome, congrats!!

[florentdestremau]

@vvo I wonder thought if there isn't a better way to handle the filter update in another way than remove + add ?

[chrisvidal]

@florentdestremau Did you release a calendar widget ?

[florentdestremau]

hi @chrisvidal, sorry but I never had the time to finish it properly so it's just the widget above for now.

[chrisvidal]

Alright, i will try to implement it, thanks In my scenario, we need to use 2 date pickers, i guess that would work by just adding another datepicker widget

[redox]

Hey guys, did you see that Airbnb recently released https://github.com/airbnb/react-dates? Looks like the ideal calendar library to used in instantsearch.js \o/

[FredHasselot]

Hi,

It's an old issue but...

params.helper.removeNumericRefinement('timeStamp'); params.helper.addNumericRefinement('timeStamp', '>=', moment(date).unix()); params.helper.search();

i'm using something similar with the helper method on a custom date selector widget :

helper.removeNumericRefinement(attr).addNumericRefinement(attr, "=", timestamp).search();

It's fine, it filter the hits but...

How i would createURL like : my_attr=timestamp ? i can't figure it out

🙏

[Haroenv]

there's a calendar widget example now https://github.com/algolia/instantsearch/tree/master/examples/js/calendar-widget which uses connectRange @FredHasselot

[FredHasselot]

Cool ! Thanks a lot.

After few tests, connectRange may do the trick, but is there a list displaying all connectors natively available ? When refine hits, i would ideally need somehting like : refine(my_attr = timestamp)

If not, connectRange will be fine.

Thx