Datetime pickers in Ios didn't showed as it behave

[byan]

DateTime pickers in Ios didn’t show as the original behave but it shows nicely in Android. I’ve searched the problem but I cannot found it. the DateTime picker is written like this:
<q-datetime class=“full-width” v-model=“date” type=“date” ok-label=“OK” cancel-label=“キャンセル”></q-datetime>

and when the request is from IOS I set the CSS to be quasar.ios.css and whenever its android I set the CSS to be quasar.mat.css but seems it does not work in Ios. when I click the DateTime box it just pops up a model with not complete load of quasar.ios.css and really far away with the original DateTime picker in iPhone.

is there something that I’ve missed??

[rstoenescu]

What do you mean you set the CSS to be quasar.*.css? Are you manually doing this? Because depending on the command that you build your app with (quasar build mat / quasar build ios) the right CSS is automatically selected and injected. If you manually add Quasar CSS you may end up with duplicates or both themes loaded at the same time which will certainly mess everything up.

[byan]

@rstoenescu I’m using the if condition to use the quasar.*.css.
if it ios then, it will just using the quasar.ios.css and ignore the mat one and vice versa.

how to make it automatically selected the right CSS?
should I write both of the quasar.*.css links in the HTML or should I write another thing?

Sorry, I get lost ;(, please tell me how to make it works.
Thank you.

[jolyon]

@bian

In main.js…

// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
require(./themes/app.${__THEME}.styl)
// 2. or, use next line to activate DEFAULT QUASAR STYLE
// require(quasar/dist/quasar.${__THEME}.css)
// ==============================

Use //1 for your own custom styles
or //2 for default styles

Don’t set the css manually yourself if you can avoid it. It’s easier to use the framework the way Razvan intends.

To do custom styles you set the stylus variables listed on this page: http://quasar-framework.org/api/css-stylus-variables.html

Set them in src/themes/app.variables.styl for global styles
Set them in src/themes/app.ios.styl for ios styles
Set them in src/themes/app.mat.styl for android styles (mat = material design)

[byan]

@jolyon I think.I totally lost.;(
can you explain me from the beginning what source package that I should download first? and what kind of HTML that I should write first place.
Thank you

[jolyon]

@bian are you familiar with vuejs? I would suggest you start there. I did this whole guide to learn it: https://www.udemy.com/vuejs-2-the-complete-guide

Once you know vuejs read ALL of the quasar documentation in the order presented: guide, then components, then js&css. The documentation is excellent and once you get to the end you will understand how to use Quasar.

Then write your app

[byan]

@jolyon
not that familiar, I know just a lil bit.
yes, I think, I should learn it more, thanks for suggesting me the link.

Btw I already found my answer. how to fix it (with another way)

Thank you.

[rstoenescu]

@byan you shouldn’t need to write code yourself to require the right CSS. This is done automatically as you can see in the head of /src/main.js. Just leave uncommented the type of CSS you want to inject (default precompiled one OR the custom theme). Quasar takes care of the rest.