Using modules not components for associated functionalities, with state management left to application space

.js

import {ordinals, defaultRange, rangeFromOrdinal, Calendar} from './DateRange.js'

const state = {
  ...rangeFromOrdinal('Today'),
  showCalendar : false,
}

m.mount(document.body, {
  view: () => [
    m('form',
      m('h1', 'When are you going on holiday?'),
      
      m('select', {
        onchange(e){
          const ordinal = e.target.selectedOptions[0]
          
          Object.assign(state, rangeFromOrdinal(ordinal))
        },
        
        ...(state.showCalendar && {disabled : true}),
      },
        ordinals.map(ordinal => m('option', ordinal)),
      ),
      
      m('label', 
        m('input[type=checkbox]', {
          checked: state.showCalendar,
          onchange(e){
            showCalendar = e.target.checked
          },
        }),
      ),
      
      state.showCalendar && 
        m(Calendar, {
          selectedRange: [state.startDate, state.endDate],
          onchange({startDate, endDate}){
            Object.assign(state, {startDate, endDate})
          },
        }),
    ),
  ]
})

DateRange.js

import moment from 'moment'

export const ordinals = Object.freeze(['Today', 'Yesterday', 'Last 7 days'])

export const defaultRange = Object.freeze({startDate: x, endDate: y})

export function rangeFromOrdinal(ordinal){
  return {startDate: x, endDate: y}
}

export function Calendar(){
  return {
    view: () => 
      m('h1', '(A calendar UI)')
  }
}