anyone managed to implement this successfully as vue js component?

[manik005]

I`m trying to implement it as vuejs component like below.

Vue.component('semantic-date-picker', {
 template: '<input type="text" :value="value"/>',`
  props: ['value'],
  mounted: function() {
    console.log('init the calendar');
    var t = this;
    $(t.$el).calendar({
    onChange: function (date, text, mode) {
                t.$emit('input', date);
    }
});
  }
});

Any idea on what `m doing wrong here?

[ndamjan]

Hi, I implemented a vue component for my use case with some customizations, predefined translations and options (so not a generic implementation like you are trying to do...).

You can have a look at the options I set, some are customizations and some are workarounds for issues I encountered. Hopefully you will find it helpful :)

<template>
  <span class="ui calendar field">
    <label>
      <slot>Datum :</slot>
    </label>
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Datum" :class="{wideCalendar: showTime}">
    </div>
  </span>
</template>

<script>
import $ from 'jquery'
import moment from 'moment'

moment.locale('hr')

export default {
  name: 'calendar',
  props: ['value', 'specialDays', 'inline', 'showField', 'showTime'],
  mounted () {
    $(this.$el).calendar({
      specialDays: this.specialDays,
      type: this.showTime ? 'datetime' : 'date',     // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
      firstDayOfWeek: 1,    // day for first day column (0 = Sunday)
      constantHeight: true, // add rows to shorter months to keep day calendar height consistent (6 rows)
      today: true,         // show a 'today/now' button at the bottom of the calendar
      inline: this.inline,        // create the calendar inline instead of inside a popup
      disableYear: true,   // disable year selection mode
      multiMonth: 1,        // show multiple months when in 'day' mode
      text: {
        days: ['N', 'P', 'U', 'S', 'Č', 'P', 'S'],
        months: ['Siječanj', 'Veljača', 'Ožujak', 'Travanj', 'Svibanj', 'Lipanj', 'Srpanj', 'Kolovoz', 'Rujan', 'Listopad', 'Studeni', 'Prosinac'],
        monthsShort: ['Sij', 'Velj', 'Ožu', 'Tra', 'Svi', 'Lip', 'Srp', 'Kol', 'Ruj', 'Lis', 'Stu', 'Pro'],
        today: 'Danas',
        now: 'Sada',
        am: 'AM',
        pm: 'PM'
      },
      ampm: false,           // show am/pm in time mode
      // callback when date changes, return false to cancel the change
      onChange: (date, text, mode) => {
        // console.log('chnge:' + date)
        this.$emit('input', date)
        this.$emit('change')
      },
      parser: {
        date: function (text, settings) {
          // return a date parsed from 'text'
          return moment(text).toDate()
        }
      }
    })
    if (this.value) {
      // console.log('mount:' + this.value)
      $(this.$el).calendar('set date', this.value)
      $(this.$el).calendar('refresh')
    }
  },
  destroyed () {
    $(this.$el).off()
  }
}
</script>

<style>
.wideCalendar {
  min-width: 250px;
}
</style>

Please note, that I used also some custom options (i.e. specialDays) which are processed elsewhere...

[ploissken]

@ndamjan could you show how did you import the module to your vue project?

When I try

  mounted () {
    $(this.$el).calendar({

I get an 'calendar is not a function' error, no matter what :(

[ndamjan]

@ploissken Here is what I can find in the project where it's used...

• add in the dependencies (package.json):

  "semantic-ui-calendar": "^0.0.8"

• set alias for calendar module in webpack config:

  { resolve: ... , 
  alias: { 
    ...,
    'semantic-calendar': path.join(__dirname, '../node_modules/semantic-ui-calendar/dist/calendar.js'), 
    'semantic-calendar-css': path.join(__dirname, '../node_modules/semantic-ui-calendar/dist/calendar.css'), 
     ...

• main.js: imported my own component and the calendar css and js:

  import 'semantic-calendar-css'
  import 'semantic-calendar'

Please be aware that this was from a project which uses older webpack version (1.14.0) so config will probably look a bit different now.

Hope this helps!