@rstoenescu
I just need a inline calendar that can select range date to binding with the model

@rstoenescu
v-go-back directive is the same as $router.back() or different? I don’t know what is different between them?

@rstoenescu
I just need a icon, click event to display inline date picker as the calendar and I can select range date to binding with the model, then I display the rang date as label with date format

It is 2 date picker for 2 input, I just want 1 calendar with date range selection for 2 readable input

Hi @rstoenescu
I need 1 date picker to select date range as from -> to or multi select. It is similar with this link http://tamble.github.io/jquery-ui-daterangepicker/
How to customize the date picker to select date range or multi select ? I found the external component have multi select but it is missing date range select https://github.com/hilongjw/vue-datepicker.

@rstoenescu
I cannot publish repo I create the component that wrap layout component to reuse, and then I use wrap layout to display the setting page, I just give the example as below:

<q-layout>
<!-- Header -->
<div slot=“header” class=“toolbar”>
<q-toolbar-title class=“uppercase”>
<div class=“float-left text-italic”>{{ $t(‘project.title’) }}</div>
<div class=“text-center”>{{ title }}</div>
</q-toolbar-title>
</div>
<top-bar></top-bar>

<!-- Content -->
<div class=“layout-view”>
<div class=“setting-container”>
<p class=“caption sub-title text-tertiary”>CAPTION 1 </p>
<div class=“setting-content”>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/abc.png"></span>
<span class=“auto text-tertiary”>abc</span>
<span class=“float-right”><q-toggle v-model=“settings.abc” ></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/123.png"></span>
<span class=“auto text-tertiary”>123</span>
<span class=“float-right”><q-toggle v-model=“settings.123” ></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/456.png"></span>
<span class=“auto text-tertiary”>456</span>
<span class=“float-right”><q-toggle v-model=“settings.456” ></q-toggle></span>
</div>
</div>
</div>
<div class=“setting-container”>
<p class=“caption sub-title text-tertiary”>CAPTION 2 </p>
<div class=“setting-content”>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/abc.png"></span>
<span class=“auto text-tertiary”>abc</span>
<span class=“float-right”><q-toggle v-model=“settings.abc” ></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/123.png"></span>
<span class=“auto text-tertiary”>123</span>
<span class=“float-right”><q-toggle v-model=“settings.123” ></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/456.png"></span>
<span class=“auto text-tertiary”>456</span>
<span class=“float-right”><q-toggle v-model=“settings.456” ></q-toggle></span>
</div>
</div>
</div>
…
…
<div class=“setting-container”>
<p class=“caption sub-title text-tertiary”>CAPTION B </p>
<div class=“setting-content”>
<div class=“row”>
<span class=“setting-icon”><img :src="’/statics/icon/aaa.png’"></span>
<span class=“auto”>
<input v-model.trim=“settings.aaa” class=“text-center” maxlength=“11”
@focus="$event.target.scrollIntoView(true)">
</span>
<span class=“float-right”><q-toggle v-model=“settings.aaa”></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”></span>
<span class=“auto text-tertiary”>Title yyy</span>
<span class=“float-right”><q-toggle v-model=“settings.yyy”></q-toggle></span>
</div>
</div>
</div>
<div class=“setting-container”>
<p class=“caption sub-title text-tertiary”>CAPTION LAST</p>
<div class=“setting-content”>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/eee.png"></span>
<span class=“auto text-tertiary”>eee</span>
<span class=“float-right”><q-toggle v-model=“settings.eee” ></q-toggle></span>
</div>
<div class=“row”>
<span class=“setting-icon”><img :src="/statics/icon/fff.png"></span>
<span class=“auto text-tertiary”>fff</span>
<span class=“float-right”><q-toggle v-model=“settings.fff” ></q-toggle></span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer-bar"/>
</q-layout>

Hi @rstoenescu ,
I create web app, try simulator is ok, but the problem occur when I try with mat style on chrome browser in Nexus 7"

Hi @rstoenescu
I have some issued with v-link/v-go-back directive. Please guide me some thing about them
How can I use v-go-back to back 1 step in the window histories ? We can do some action to call async to logout with v-go-back or not ? The v-link can apply active class for button or not ?

I have the input that is nearly the bottom screen, after I focus on the input then the virtual keyboard display overlap the input field. I already try to use scrollIntoView of input or reset scrollTop of container but the virtual keyboard continue overlap, any one have any idea ?

@rstoenescu : I think publishPath for static folder ? I have a slider with many image and i would like load image dynamic by webpack to optimize performance when display slider