vue 日期前面加0_vue 移动端添加 时间日期选择器

效果：

index.vue

-----------------------时间选择器-----------------------

export default {

data () {

return {

}

},

components: {

},

methods:{

getTimestamp(stamp){

console.error(stamp)

}

},

activated () {

},

deactivated(){

}

}

datetimePicker.vue:

input{

line-height: .26rem;

border-radius: 5px;

padding: .03rem .05rem;

}

import '@/lib/js/jq.js'

import '@/lib/js/jquery.selector-px.js'

export default {

data () {

return {

}

},

props: {

height: {

type: String,

default: '.26rem',

},

width: {

type: String,

default: '34',

},

time: {

type: Boolean,

default: true,

},

},

watch:{

},

methods: {

time2str(t){

return t>9?t:'0'+t;

},

initCss(){

$(".sp-date").css({"height":this.height,"width":this.width+'%'});

}

},

mounted(){

let year = new Date().getFullYear();

let month = this.time2str(new Date().getMonth()+1);

let date = this.time2str(new Date().getDate());

let hours = this.time2str(new Date().getHours());

let mins = this.time2str(new Date().getMinutes());

this.initCss();

$('.sp-date').val(year + '-' + month + '-' + date + ' ' + hours + ':' + mins);

// 年月日 时分

$.dateSelector({

evEle: '.sp-date',

title:'日期和时间',

year: year,

month: month,

day: date,

hour: hours,

minute: mins,

startYear: year,

endYear: year+20,

timeBoo: this.time, //是否显示时分

afterAction: (d1, d2, d3, d4, d5)=>{

$('.sp-date').val(d1 + '-' + d2 + '-' + d3 + ' ' + d4 + ':' + d5);

this.$emit('getTimestamp',Date.parse(d1 + '/' + d2 + '/' + d3 + ' ' + d4 + ':' + d5) );

}

});

},

activated () {

},

}

jquery.selector-px.js

;(function($){

//如果有元素移除

$('.sel-boxs').remove();

$('body').append('

'.sel-boxs{display:none;}'+

'.sel-boxs .bg{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:998;}'+

'.sel-box{position:fixed;bottom:0;left:0;right:0;z-index:999;}'+

'.sel-box .btn{background:#fda626;overflow:hidden;}'+

'.sel-box .btn1{width:22px;height:22px;float:left;padding:11px 0px;margin: 0 10px}'+

'.sel-box .btn1 img{float:left;width:inherit;height:inherit;max-width: none;max-height: none}'+

'.sel-box .ok{float:right;}'+

'.sel-box .name{color:white;text-align:center;line-height:22px;font-size:18px;padding:11px 0;}'+

'.sel-con{background:white;}'+

'.sel-con .border{height:34px;border:solid 1px #fda626;border-width:1px 0;position:fixed;bottom:72px;left:0;right:0;pointer-events:none;}'+

'.sel-con .table{display:table;width:100%;table-layout:fixed;}'+

'.sel-con .cell{display:table-cell;vertical-align:middle;text-align:center;overflow:hidden;}'+

'.sel-con .scroll{-webkit-overflow-scrolling:touch;height:180px;overflow:auto;box-sizing:border-box;padding:72px 0;width:200%;padding-right:100%;}'+

'.sel-con .ele{font-size:16px;color:#b2b2b2;height:36px;line-height:36px;}'+

'@-webkit-keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}to {opacity: 1;-webkit-transform: none;transform: none;}}'+

'@keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} to {opacity: 1;-webkit-transform: none;transform: none;}}'+

'.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;}'+

'@-webkit-keyframes fadeInDown {from {opacity: 1;-webkit-transform: none;transform: none;}to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}}'+

'@keyframes fadeInDown {from {opacity: 1;-webkit-transform: none;transform: none;}to {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}}'+

'.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;}'+

'.animated {-webkit-animation-duration: .4s;animation-duration: .4s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}'+

''+

'

'+

'

'