bootstrap-datetimepicker with vue.js not working properly

Question

I am trying to use bootstrap-datepicker with Vue.js Trying to create a simple datepicker component. The problem is, when I write into input, component's data is updated. But when I use datepicker gui, it doesn't work. Data is not updated. Why? What is missing exactly?

Here is my code:

Vue.component('picker', {
  'props': {
    'date': {
      'twoWay': true
    }
  },
  'template': '\
      <div class="form-group">\
          <div class="input-group date datepicker">\
              <input type="text" class="form-control" v-bind:value="this.date">\
              <span class="input-group-addon">\
                  <span class="glyphicon glyphicon-calendar"></span>\
              </span>\
          </div>\
      </div>',
  'watch': {
    'date': function(value) {
      console.log('Updated!');
    }
  },
  'mounted': function() {
    $(this.$el.firstChild).datetimepicker();
  }
});

app = new Vue({
  'el': '#app',
  'data': {}
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- Transition ve Collapse -->
  <script src="collapse.js"></script>
  <script src="transition.js"></script>

  <!-- Moment JS -->
  <script src="moment-with-locales.min.js"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- Datetime picker -->
  <script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div class="container">
    <div id="app" class="row">
      <div class='col-sm-6'>
        <picker></picker>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  </script>
</body>
<script src="app.js"></script>

</html>

As I see the picker component accept prop date, but can't see it defined on <picker></picker> component in template — Belmin Bedak
– Belmin Bedak, Commented Jan 23, 2017 at 11:48
@BelminBedak I didn't give an initial value for date prop in the HTML part. @Saurabh It was a prop. So I don't need to define it in the Vue instance. Is that right? Updated code. — nejdetckenobi
– nejdetckenobi, Commented Jan 23, 2017 at 13:26
I get $(...).datetimepicker is not a function when running your snippet. — Roy J
– Roy J, Commented Jan 23, 2017 at 19:01
@RoyJ: yes. I got that error, too. I don't know why it responds like that but When I run it, it runs just fine. Thanks for your efforts anyway. — nejdetckenobi
– nejdetckenobi, Commented Jan 24, 2017 at 8:19

nejdetckenobi · Accepted Answer · 2017-01-23 14:45:58Z

I couldn't find a better way than losing focus (blur).

Here's my code:

Vue.component('picker', {
    'props': ['date'],
    'template': '\
        <div class="form-group">\
            <div class="input-group date datepicker">\
                <input type="text" class="form-control" :value="this.date" v-on:focus="datepick_dialog_open" v-on:blur="select_by_lose_focus">\
                <span class="input-group-addon">\
                    <span class="glyphicon glyphicon-calendar"></span>\
                </span>\
            </div>\
        </div>',
    'mounted': function() {
        $(this.$el.firstChild).datetimepicker();
    },
    'methods': {
        'datepick_dialog_open': function() {
            this.$el.firstChild.children[1].click();
        },
        'select_by_lose_focus': function() {
            console.log('AHOY!');
            this.date = this.$el.firstChild.firstChild.value;
        }
    }
});

app = new Vue({
    'el': '#app',
    'data': {}
});

The point is, you really can't use it if your element does not lose focus. It updates the data when input loses its focus. IDK any better way.

v-on:focus is irrelevant. It just opens the datetime picker UI when input gains focus.

The main job is done by select_by_lose_focus.

Olexandr Kravchenko · Accepted Answer · 2020-08-27 19:09:18Z

Add before vue object init:

    Vue.directive('vueinput', {
        twoWay: true,
        bind: function (el, binding, vnode) {
            $(el).on("change", (e) => {
                el.dispatchEvent(new Event('input', { target: e.target }));
            });
        },
    });

And then add v-vueinput="[uniqueString]" directive to your datetime input:

<div data-start-view="4" data-min-view="2" class="input-group date datetimepicker">
    <input type="text"
           v-model="payment.pay_date"
           v-vueinput="payment.pay_date">
    <div class="input-group-append">
        <button class="btn btn-primary"><i class="icon-th mdi mdi-calendar"></i></button>
    </div>
</div>

I recommend to put same value as v-model to this directive ('payment.pay_date' in my example)

You can use unlimited entities of inputs with this directives on one page.

tony19 · Accepted Answer · 2022-07-15 02:28:13Z

2

Another example using $emit and v-model on the component. This page describes why value and $emit are needed to support v-model. I needed a form element name and optional required class for validation.

https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

  <picker name="start_date_1_1" required="1" v-model="res.start_date"></picker>
  
  Vue.component('picker', {
    props: ['name', 'value', 'required'],
    template: '\
      <div class="form-group">\
          <div class="input-group date">\
              <input :name="name" type="text" class="form-control" v-bind:class="{required: required}"  v-bind:value="value">\
              <span class="input-group-addon">\
                  <span class="glyphicon glyphicon-calendar"></span>\
              </span>\
          </div>\
      </div>',
    mounted: function() {
      var self = this;
      var picker = $(this.$el.firstChild).datepicker({autoclose: true});
      picker.on('changeDate', function(e) {
        self.$emit('input', e.date.toLocaleDateString("en-US", {day: '2-digit', month: '2-digit', year: 'numeric'}));
      });
    }
  });

edited Jul 15, 2022 at 2:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 6, 2018 at 21:29

Dustin Butler

9177 silver badges23 bronze badges

1 Comment

Pasan Bhanu Guruge Over a year ago

mounted() { var self = this; var picker = $(".dtp").timepicker(); picker.on('changeTime.timepicker', function(e) { self.form[e.target.name] = e.time.value; }); },

Ben · Accepted Answer · 2018-03-22 15:04:39Z

Got it to work by dispatching the input Event upon changing the date.

$('.with-calendar').datetimepicker({
    weekStart: 1,
    language: 'de',
    bootcssVer: 3,
    format: "yyyy-mm-dd hh:ii:00",
    viewformat: "yyyy-mm-dd hh:ii:00",
    autoclose: true
}).on('changeDate', function (event) { // Communicate datetimepicker result to vue
    let inputFields = event.target.getElementsByTagName('input'); // depends on your html structure
    for (let i = 0; i < inputFields.length; i++) {
        inputFields[i].dispatchEvent(new Event('input', {'bubbles': true}));
    }
});

<template>
...
<div class="form-group">
    <label class="col-sm-3 control-label">Date and Time</label>
    <div class="col-sm-6">
        <div class="input-group date with-calendar">
            <input type="text" class="form-control" v-model="start_datetime"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
...
</template>

job · Accepted Answer · 2018-08-31 07:33:14Z

0

got this problem and got it to work by initializing the date-picker after initializing the vue. e.g:

var vm = new Vue({
    el: '#myForm',
    data: {
        field1: "",
        field2: ""
    }
});

$(".date-picker").datepicker({
    todayHighlight: true,
    autoclose: true,
    closeOnDateSelect: true
});

answered Aug 31, 2018 at 7:33

job

1

1 Comment

nejdetckenobi Over a year ago

that's not a nice way to initialize it. you can not use it as an object if you don't initialize it properly. however, the parameters you put in initializer is interesting.

tony19 · Accepted Answer · 2022-07-15 05:01:15Z

Thanks for the answer @nejdetckenobi, if picking date only, the blur approach works. However, if picking both date & time, I found that the blur approach didn't work so well.

Instead I followed the Vue.js wrapper component example. It makes use of on('change', function(){}) and $emit.

The code below that worked for me (in my setup) with date formatting, a key part is in mounted section of your vue component declaration.

Vue.component('datetime', {
  props: ['value'],
  template: '<input class="form-control" id="override-datetime-field"></input>',
  mounted: function () {
    var vm = this
    $(this.$el)
      .datetimepicker()
      .val(this.value === '' ? '' : moment(this.value).format('DD-MMM-YYYY, h:mm a'))
      .trigger('change')
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      $(this.$el).val(value).trigger('change');
    }
  }
}

The key part is here:

$(an-element).datetimepicker().trigger('change')
.on('change', function () {
  vm.$emit('input', this.value)
})

Original source example: https://v2.vuejs.org/v2/examples/select2.html

Collectives™ on Stack Overflow

bootstrap-datetimepicker with vue.js not working properly

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related