vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
一、下載bootstrap-datetimepicker時(shí)間選擇器js,css文件。
1. github地址:bootstrap-datetimepicker
2. 官方網(wǎng)站地址:官網(wǎng)bootstrap-datetimepicker地址,有具體的例子與解釋
二、在vue項(xiàng)目文件中引入
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() + ":"; //取小時(shí)
s += d.getMinutes() + ":"; //取分
s += d.getSeconds(); //取秒
self.time = s;
$('.form_datetime').datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd hh:ii:ss',
//startDate: s, 默認(rèn)開始時(shí)間
weekStart: 0, //一周從那一天開始,默認(rèn)值為:0,范圍:0-6
todayBtn: 1, //默認(rèn)值:false,為true時(shí),底部顯示today,不選中,為linked時(shí)當(dāng)天日期被選中
autoclose: 1, //選擇一個(gè)日期后是否立即關(guān)閉此選擇框
todayHighlight: 1, //高亮當(dāng)前日期
startView: 2, // 日期時(shí)間選擇器打開之后首先顯示的視圖,默認(rèn)值為:2,0:hour,1:day,2:mouth,3:year,4:decade
forceParse: 0, //強(qiáng)制解析文本框的值
showMeridian: 1
});
$('#form_datetime').datetimepicker()
.on('hide', function (ev) {
var value = $("#form_datetime").val();
self.time = value;
});
}
},
mounted() {
//必須在組件渲染之后調(diào)用
this.dateDefault();
}
}
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實(shí)例todoList項(xiàng)目
本篇文章主要介紹了vue.js實(shí)例todoList項(xiàng)目,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
利用FetchEventSource在大模型流式輸出的應(yīng)用方式
這篇文章主要介紹了利用FetchEventSource在大模型流式輸出的應(yīng)用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
vue addRoutes實(shí)現(xiàn)動態(tài)權(quán)限路由菜單的示例
本篇文章主要介紹了vue addRoutes實(shí)現(xiàn)動態(tài)權(quán)限路由菜單的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
詳解vue項(xiàng)目優(yōu)化之按需加載組件-使用webpack require.ensure
本篇文章主要介紹了詳解vue項(xiàng)目優(yōu)化之按需加載組件-使用webpack require.ensure,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
談一談vue請求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請求數(shù)據(jù)放在created好還是mounted里好的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中的基礎(chǔ)過渡動畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動畫原理解析,需要的朋友可以參考下2018-12-12

