-
-
Save wellsmuker/df73393652d67349e99502327e88808a to your computer and use it in GitHub Desktop.
Date range picker stimulus example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Controller } from "stimulus" | |
| import moment from 'moment'; | |
| export default class extends Controller { | |
| static targets = [ "date_range" ] | |
| connect() { | |
| if(this.date_rangeTarget) { | |
| let selectedRange = false | |
| $(this.date_rangeTarget).daterangepicker({ | |
| showCustomRangeLabel: false, | |
| alwaysShowCalendars: true, | |
| autoApply: false, | |
| ranges: { | |
| 'Today': [moment(), moment()], | |
| 'Last 7 days': [moment().subtract(6, 'days'), moment()], | |
| 'Last 14 days': [moment().subtract(13, 'days'), moment()], | |
| 'Last 30 days': [moment().subtract(29, 'days'), moment()], | |
| 'This week': [moment().startOf('week'), moment().endOf('week')], | |
| 'This month': [moment().startOf('month'), moment().endOf('month')], | |
| 'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')], | |
| 'All time': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] | |
| } | |
| }).on('apply.daterangepicker', function(e, picker) { | |
| if(selectedRange) { | |
| picker.show(); | |
| selectedRange = false; | |
| } | |
| }); | |
| $(".ranges ul li").on("click", function() { | |
| selectedRange = $(this).text(); | |
| }); | |
| } | |
| } | |
| initialize() { | |
| } | |
| rangeSelected(e, picker) { | |
| } | |
| submit(e) { | |
| console.log("click") | |
| this.element.submit() | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment