国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

vue與bootstrap實現時間選擇器的示例代碼

2019-11-19 15:40:01
字體:
來源:轉載
供稿:網友

一、下載bootstrap-datetimepicker時間選擇器js,css文件。

1. github地址:bootstrap-datetimepicker

2. 官方網站地址:官網bootstrap-datetimepicker地址,有具體的例子與解釋

二、在vue項目文件中引入

import './assets/css/bootstrap.min.css'import "./assets/css/bootstrap-datetimepicker.min.css"import './assets/js/bootstrap.min'import './assets/js/bootstrap-datetimepicker.min.js'

三、具體代碼如下:

<template><div class="container">  <form action="" class="form-horizontal" role="form">    <fieldset>      <legend>Test</legend>      <div class="form-group">        <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>        <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">          <input class="form-control" size="16" type="text" value="" readonly>          <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>          <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>        </div>        <input type="hidden" id="dtp_input1" value="" /><br/>      </div>    </fieldset>  </form></div></template><script> export default {  name: 'time',  data () {   return {    time: ''   }  },  methods: {    dateDefault(){      var d, s;      var self = this;          d = new Date();      s = d.getFullYear() + "-";       //取年份      s = s + (d.getMonth() + 1) + "-";   //取月份,date生成的月份為0-11      s += d.getDate() + " ";        //取日期      s += d.getHours() + ":";        //取小時      s += d.getMinutes() + ":";       //取分      s += d.getSeconds();          //取秒      self.time = s;      $('.form_datetime').datetimepicker({        language: 'zh-CN',        format: 'yyyy-mm-dd hh:ii:ss',        //startDate: s,    默認開始時間        weekStart: 0,    //一周從那一天開始,默認值為:0,范圍:0-6        todayBtn: 1,    //默認值:false,為true時,底部顯示today,不選中,為linked時當天日期被選中        autoclose: 1,    //選擇一個日期后是否立即關閉此選擇框        todayHighlight: 1,  //高亮當前日期        startView: 2,     // 日期時間選擇器打開之后首先顯示的視圖,默認值為:2,0:hour,1:day,2:mouth,3:year,4:decade        forceParse: 0,    //強制解析文本框的值        showMeridian: 1       });      $('#form_datetime').datetimepicker()         .on('hide', function (ev) {         var value = $("#form_datetime").val();         self.time = value;        });    }  },  mounted() {    //必須在組件渲染之后調用    this.dateDefault();  } }</script>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 丹东市| 阿克陶县| 泰来县| 海晏县| 白银市| 霞浦县| 房产| 石泉县| 中阳县| 乌鲁木齐市| 微博| 林口县| 建阳市| 呼伦贝尔市| 大新县| 河源市| 文登市| 泗洪县| 乌海市| 雷波县| 温州市| 泰来县| 临澧县| 琼结县| 巴里| 原阳县| 广南县| 乌审旗| 汝州市| 安义县| 南阳市| 通江县| 桂东县| 广饶县| 浦城县| 南宫市| 沅陵县| 红原县| 武隆县| 来宾市| 高邑县|