Combination of vue2.0 and bootstrap datetimepicker instances and vuebootstrap

Combination of vue2.0 and bootstrap datetimepicker instances and vuebootstrap

1. in many projects, we use the date plug-in. When I use bootstrap datetimepicker in vue, I find that bidirectional binding does not work. The date modified by bootstrap datetimepicker is not synchronized to data, see my solution below:

<Template> <div id = "time"> <span class = "select-box-title"> select the sending time: </span> <input class = "form-control select-box-input" v-model = "time" type = "text" id = "messageSendTime"> </div> </div> </template> <script> import $ from 'jquery 'export default {name: 'time', data () {return {time: ''}, methods: {dateDefind () {var d, s; var self = this; d = new Date (); s = d. getFullYear () + "-"; // The year s = s + (d. getMonth () + 1) + "-"; // returns the month s + = d. getDate () + ""; // get date s + = d. getHours () + ":"; // The hour s + = d. getMinutes () + ":"; // minute + = d. getSeconds (); // The second self. time = s; // initialize $ ('# messagesendtime '). datetimepicker ({startDate: s, minView: "hour", // after the date is selected, it will not jump to select the time, Second language: 'zh-cn', format: 'yyyy-mm-dd hh: ii: ss', todayBtn: 1, autoclose: 1}); // when the selector is hidden, the lecture selection box only assigns time $ ('# messagesendtime') to the data '). datetimepicker (). on ('hide ', function (ev) {var value = $ ("# messageSendTime "). val (); self. time = value ;}) ;}}, mounted: function () {this. dateDefind () ;}</script> <style scoped> </style>

Conclusion: In fact, an event is added to the datetimepicker settings. When the selector hide is used, the value of the Selection box is assigned to the time in the data.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.