Monday, March 4, 2019

How do Vue JS - Bootstrap Datepicker ?

Vue JS - Bootstrap Datepicker

HTML

<div class="m-form__group m-form__group">
    <label class="m-label m-label--single">From Date:</label>
    <div class="input-group date">
   <input type="text" class="form-control  datepicker " v-model="form.from_date" id="from_date" />
        <div class="input-group-append">
         <span class="input-group-text">
            <i class="la la-calendar-check-o"></i>
         </span>
       </div>
     </div>
</div>

 JS
      mounted(){
            var _this = this;
            $(document).on("focus", ".datepicker", function () {
                $(this).datepicker({
                    format: 'dd/mm/yyyy',
                    todayHighlight: true,
                    clearBtn: true,
                }).on('changeDate', function (ev) {

                    $(this).datepicker('hide');
                    var dateField = $(this).attr('id');

                    if (ev.date == undefined) {
                        if (dateField == 'from_date') {
                            _this.form.from_date = '';
                        }
                    } else {
                        if (dateField == 'from_date') {
                            _this.form.from_date = moment(ev.date).format('YYYY-MM-DD');
                        }
                    }
                });
            });
        },

No comments:

Post a Comment

Ajax load lage with laravel.

 step-1:  HTML <div class="row">                     <div class="col-lg-12">                           <d...