Maison > interface Web > js tutoriel > le corps du texte

Utiliser le plug-in time et obtenir la valeur de sélection dans mint-ui

亚连
Libérer: 2018-06-06 15:13:10
original
2120 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un article sur la façon d'utiliser le plug-in mint-ui time et d'obtenir la valeur de sélection. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

est le suivant :

<p > {{pickerValue}}</p>
<mt-datetime-picker
 ref="picker" 每一个都要填上这一条open
 type="time"
 @confirm="handleConfirm" 设置点击确定
 v-model="pickerValue">
</mt-datetime-picker>
data () {
 return {
 pickerValue:null, 定义
methods:{
openPicker() {
 this.$refs.picker.open();设置开始
 },
handleConfirm(){ console.log(this.pickerValue) ;获取值},

转换小时

formatDate(date) {
 const y = date.getFullYear()
 let m = date.getMonth() + 1
 m = m < 10 ? &#39;0&#39; + m : m
 let d = date.getDate()
 d = d < 10 ? (&#39;0&#39; + d) : d
 return y + &#39; &#39; + m + &#39; &#39; + d
},
handleConfirm(){
 let a = this.pickerValue
 // console.log(a.split(" ")) ;
 this.zheng=this.formatDate(this.$refs.picker.value)
 console.log(this.formatDate(this.$refs.picker.value))
 // console.log(this.value) ;
},

设置当前日期为初始日期

<mt-datetime-picker :startDate="startDate"</mt-datetime-picker>

data(){
 return{
  startDate: new Date(),
 }
}

设置默认值

this.zheng=new Date().getFullYear()+&#39;年&#39;+new Date().getMonth()+1+&#39;月&#39;+new Date().getDate()+&#39;日&#39;
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile dans le. avenir.

Articles associés :

Comment modifier le nom du projet via le projet vue-cli+webpack

Comment obtenir le débogage et l'indépendance via le fichier de configuration d'empaquetage du projet webpack (tutoriel détaillé)

Comment utiliser vue+webpack pour résoudre le problème des 404 pages blanches des fichiers d'empaquetage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal