Thursday, March 18, 2021

Edward Lance Lorilla

Edward Lance Lorilla

【FLUTTER ANDROID STUDIO and IOS】transform widget

Posted: 18 Mar 2021 04:23 AM PDT

【Vuejs】time typeahead

Posted: 18 Mar 2021 03:31 AM PDT

<div id="app">
<div class="hour-input__container">
<div>
<input type="text" v-model="hourinput" class="hour-input__input" placeholder="placeholder">
<div class="hour-input_search-icon"><i class="fa fa-clock-o"></i></div>
</div>
<ul class="hour-input__list" v-if="suggestedHours.length">
<li v-on:click="select(hour)" v-for="hour in suggestedHours" class="hour-input__item">{{hour}}</li>
</ul>
</div>
</div>
view raw index.html hosted with ❤ by GitHub
new Vue({
data(){
return{
placeholder: 'placeholder',
hourinput: ''
}
},
computed: {
suggestedHours: function () {
if (!isNaN(this.hourinput) && this.hourinput && this.hourinput <= 23){
const inputHour = ("0" + this.hourinput).slice(-2);
let req = [];
const range = ['00','15','30','45'];
_.each(range, (r) => {
let str = '';
str = str.concat(inputHour, ':',r,':00');
req.push(str)
});
return req;
} else {
return [];
}
}
},
methods: {
select: function(hour){
this.hourinput = hour;
}
},
watch: {
hourinput: function (){
this.$dispatch('hour-output', this.suggestedHours);
}
}
}).$mount('#app')
view raw script.js hosted with ❤ by GitHub
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
view raw scripts hosted with ❤ by GitHub
.hour-input__container{
position: relative;
}
.hour-input__item{
list-style: none;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
border-radius: 3px;
}
.hour-input__item:hover{
background-color: #36d7b7;
color: #fff;
}
.hour-input__list{
margin: 0;
position: absolute;
width: 100%;
background-color: #fff;
padding: 0 10px;
z-index: 9999;
border: 1px solid #f2f2f2;
}
.hour-input__input{
width: 100%;
height: 38px;
padding-left: 13px;
overflow: hidden;
border-radius: 3px;
}
.hour-input_search-icon{
position: absolute;
right: 13px;
top: 0;
bottom: 0;
margin: auto;
height: 50%;
}
view raw style.css hosted with ❤ by GitHub
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
view raw styles hosted with ❤ by GitHub
view raw vuejs-time-typeahead.markdown hosted with ❤ by GitHub

【LARAVEL VUEJS】 redelivery system

Posted: 18 Mar 2021 02:43 AM PDT

【FLUTTER ANDROID STUDIO and IOS】video player and chewie

Posted: 17 Mar 2021 09:44 PM PDT

【FLUTTER ANDROID STUDIO and IOS】tutorial coach mark

Posted: 17 Mar 2021 08:41 PM PDT

【PYTHON OPENCV】ORB descriptors and Brute-Force (BF) matcher

Posted: 17 Mar 2021 08:43 PM PDT

【PYTHON OPENCV】Feature detection with ORB keypoint detector

Posted: 17 Mar 2021 07:14 AM PDT
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)