incrementing date range selection buttons,

[lucasdu4rte]

Hello guys,

I've been in a constant struggle with flatpickr for the last few days as I'm trying to push custom buttons on your body.

I know the right thing would be to create a plugin for Flatpickr (I confess I tried), but because of my level of experience and a lack of documentation for this kind of development, I ended up going to the HARDCODE side.

However, I was able to do something visual of what I want to do, but it is not working, see what I did:

<Flatpickr
  data-mode='range'
  data-allow-input='true'
  options={{
    altInput: true, 
    altFormat: this.state.format, 
    onOpen: (selectedDates, dateStr, instance) => {                      
      if(!document.getElementById('selectRanges')) {
        
        let _elem = document.getElementsByClassName(instance.calendarContainer.classList.value)[0]
        let elemClone = _elem.cloneNode(true)
        
        function createMarkup() {
          return {__html: elemClone.innerHTML};
        }
        const ElemFinal = (props) => (
          <Fragment >
            <div dangerouslySetInnerHTML={createMarkup()}></div>
            <div id='selectRanges'>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastYear')}>Last Year</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastMonth')}>Last Month</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('lastWeek')}>Last Week</Button>
              <Button color='link' size='sm' onClick={e => this.rangeDates('today')}>Today</Button>
            </div>
          </Fragment>
        )

        ReactDOM.render(<ElemFinal/>, document.getElementsByClassName(instance.calendarContainer.classList.value)[0])
      }
    },
  }}
  value={this.state.date}
  onChange={date => { this.getData(this.state.data, date) }}
  className='form-control'
  placeholder='Select a period'/>

VERY GOOD, visually perfect for me

But all of Flatpickr's own buttons (months prev and next, years, days) do not work, just my custom buttons.

Analyzing the problem, I noticed the generated HTML has a div like child, maybe it is it, or maybe not.

<div class="flatpickr-calendar rangeMode animate open arrowTop" tabindex="-1" style="top: 289px; left: 499.5px; right: auto;">
  <div>
    <div class="flatpickr-months">
      <span class="flatpickr-prev-month">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
          <g></g>
          <path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path>
        </svg>
      </span>
      <div class="flatpickr-month">
        <div class="flatpickr-current-month">
          <span class="cur-month" title="Scroll to increment">June </span>
          <div class="numInputWrapper"><input class="numInput cur-year" type="text" pattern="\d*" tabindex="-1" title="Scroll to increment" aria-label="Year"><span class="arrowUp"></span><span class="arrowDown"></span></div>
        </div>
      </div>
      <span class="flatpickr-next-month">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
          <g></g>
          <path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path>
        </svg>
      </span>
    </div>
    <div class="flatpickr-innerContainer">
      <div class="flatpickr-rContainer">
        <div class="flatpickr-weekdays">
          <div class="flatpickr-weekdaycontainer">
            <span class="flatpickr-weekday">
            Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
            </span>
          </div>
        </div>
        <div class="flatpickr-days" tabindex="-1">
          <div class="dayContainer"><span class="flatpickr-day prevMonthDay" aria-label="May 27, 2018" tabindex="-1">27</span><span class="flatpickr-day prevMonthDay" aria-label="May 28, 2018" tabindex="-1">28</span><span class="flatpickr-day prevMonthDay" aria-label="May 29, 2018" tabindex="-1">29</span><span class="flatpickr-day prevMonthDay" aria-label="May 30, 2018" tabindex="-1">30</span><span class="flatpickr-day prevMonthDay" aria-label="May 31, 2018" tabindex="-1">31</span><span class="flatpickr-day " aria-label="June 1, 2018" tabindex="-1">1</span><span class="flatpickr-day " aria-label="June 2, 2018" tabindex="-1">2</span><span class="flatpickr-day " aria-label="June 3, 2018" tabindex="-1">3</span><span class="flatpickr-day " aria-label="June 4, 2018" tabindex="-1">4</span><span class="flatpickr-day today" aria-label="June 5, 2018" aria-current="date" tabindex="-1">5</span><span class="flatpickr-day " aria-label="June 6, 2018" tabindex="-1">6</span><span class="flatpickr-day " aria-label="June 7, 2018" tabindex="-1">7</span><span class="flatpickr-day " aria-label="June 8, 2018" tabindex="-1">8</span><span class="flatpickr-day " aria-label="June 9, 2018" tabindex="-1">9</span><span class="flatpickr-day " aria-label="June 10, 2018" tabindex="-1">10</span><span class="flatpickr-day " aria-label="June 11, 2018" tabindex="-1">11</span><span class="flatpickr-day " aria-label="June 12, 2018" tabindex="-1">12</span><span class="flatpickr-day " aria-label="June 13, 2018" tabindex="-1">13</span><span class="flatpickr-day " aria-label="June 14, 2018" tabindex="-1">14</span><span class="flatpickr-day " aria-label="June 15, 2018" tabindex="-1">15</span><span class="flatpickr-day " aria-label="June 16, 2018" tabindex="-1">16</span><span class="flatpickr-day " aria-label="June 17, 2018" tabindex="-1">17</span><span class="flatpickr-day " aria-label="June 18, 2018" tabindex="-1">18</span><span class="flatpickr-day " aria-label="June 19, 2018" tabindex="-1">19</span><span class="flatpickr-day " aria-label="June 20, 2018" tabindex="-1">20</span><span class="flatpickr-day " aria-label="June 21, 2018" tabindex="-1">21</span><span class="flatpickr-day " aria-label="June 22, 2018" tabindex="-1">22</span><span class="flatpickr-day " aria-label="June 23, 2018" tabindex="-1">23</span><span class="flatpickr-day " aria-label="June 24, 2018" tabindex="-1">24</span><span class="flatpickr-day " aria-label="June 25, 2018" tabindex="-1">25</span><span class="flatpickr-day " aria-label="June 26, 2018" tabindex="-1">26</span><span class="flatpickr-day " aria-label="June 27, 2018" tabindex="-1">27</span><span class="flatpickr-day " aria-label="June 28, 2018" tabindex="-1">28</span><span class="flatpickr-day " aria-label="June 29, 2018" tabindex="-1">29</span><span class="flatpickr-day " aria-label="June 30, 2018" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="July 1, 2018" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="July 2, 2018" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="July 3, 2018" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="July 4, 2018" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="July 5, 2018" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="July 6, 2018" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="July 7, 2018" tabindex="-1">7</span></div>
        </div>
      </div>
    </div>
  </div>
  <div id="selectRanges"><button type="button" class="btn btn-link btn-sm">Last Year</button><button type="button" class="btn btn-link btn-sm">Last Month</button><button type="button" class="btn btn-link btn-sm">Last Week</button><button type="button" class="btn btn-link btn-sm">Today</button></div>
</div>

Code in: https://codesandbox.io/s/ol4y35z26y

I would like to know someone's opinion on how I can solve this problem, in any way, either by improving this same code, or by putting together a plugin.

Regards