Custom date time picker

components.date-time-adjuster.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import { not } from '@ember/object/computed';
import moment from 'moment';

function validatedMoment(value, format) {
  return value ? moment(value, format, true) : moment.invalid();
}

export default Ember.Component.extend({
  tagName: '',
  
  dateFormat: 'MM/DD/YYYY',
  timeFormat: 'hh:mm',
  
  isAM: not('isPM'),
  
  isPM: computed('date', function() {
    if (!this.date) return null;
    return moment(this.date).hour() >= 12;
  }),
  
  datePortion: computed('{date,dateFormat}', function() {
    if (!this.date) return null;
    return moment(this.date).format(this.dateFormat);
  }),
  
  timePortion: computed('{date,timeFormat}', function() {
    if (!this.date) return null;
    return moment(this.date).format(this.timeFormat);    
  }),

  actions: {
    updateDate(date) {
      let newDate = validatedMoment(date, this.dateFormat);
      if (!newDate.isValid()) return;
      if (this.date) {
        let time = moment(this.date);
        newDate
          .set('hours', time.get('hours'))
          .set('minutes', time.get('minutes'));
      }
      this.update(newDate.toDate());
    },
    
    updateTime(time) {
      let newTime = validatedMoment(time, this.timeFormat);
      if (!newTime.isValid()) return;
      if (this.date) {
        let date = moment(this.date);
        newTime
          .set('years', date.get('years'))
          .set('months', date.get('months'))
          .set('days', date.get('days'));
      }
      this.update(newTime.toDate());
    },
    
    updateMeridien(meridien) {
      if (!this.date) return;
      if (this.isAm && meridien === 'am') return;
      if (this.isPm && meridien === 'pm') return;
      let offset = meridien === 'am' ? -12 : 12;
      let newTime = moment(this.date).clone();
      newTime.set('hours', newTime.get('hours') + offset); 
      this.update(newTime.toDate());
    }
  }
});

controllers.application.js

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  queryParams: ['date'],
  date: new Date()
});

routes.application.js

import Route from '@ember/routing/route';
import moment from 'moment';

export default Route.extend({
  queryParams: {
    date: { type: 'date' }
  },
  
  serializeQueryParam(value, key, type) {
    switch (type) {
      case 'date': return value ? new Date(value).toISOString() : '';
      default: return this._super(...arguments);
    }
  },
  
  deserializeQueryParam(value, key, type) {
    switch (type) {
      case 'date': return value ? new Date(value) : null;
      default: return this._super(...arguments);
    }
  }
});

styles.app.css

button.active {
  font-weight: bold;
}

templates.application.hbs

<DateTimeAdjuster
  @dateFormat="YYYY-MM-DD"
  @date={{this.date}}
  @update={{action (mut this.date)}}
  as |adjuster|
>
  <input
    type="date"
    value={{adjuster.datePortion}}
    oninput={{action adjuster.updateDate value="target.value"}}
  >
  
  <input
    type="text"
    value={{adjuster.timePortion}}
    oninput={{action adjuster.updateTime value="target.value"}}
  >
  
  <button
    class={{if adjuster.isAM "active"}}
    {{action adjuster.updateMeridien "am"}}
  >
    AM
  </button>
  
  <button
    class={{if adjuster.isPM "active"}}
    {{action adjuster.updateMeridien "pm"}}
  >
    PM
  </button>
</DateTimeAdjuster>

<hr>

<time datetime={{moment-format (utc this.date)}}>
  {{moment-format this.date}}
</time>

templates.components.date-time-adjuster.hbs

{{yield (hash
  dateFormat=this.dateFormat
  timeFormat=this.timeFormat
  isAM=this.isAM
  isPM=this.isPM
  datePortion=this.datePortion
  timePortion=this.timePortion
  updateDate=(action "updateDate")
  updateTime=(action "updateTime")
  updateMeridien=(action "updateMeridien")
)}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-moment": "7.8.1"
  }
}