I'm trying to implement new custom language in Vuetify, I want to translate vuetify datepicker months to my custom language. Is there a way to achieve this?
As clearly stated in the documentation
The date picker supports internationalization through the JavaScript Date object. Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop
Specifically it is using Intl.DateTimeFormat to get localized month/date names. So the list of locales is not limited to the list of Vuetify localisations specified here and depends on the browser.
If you need something really special, lets say Klingon, you can override methods used to format dates via props - specifically month-format, header-date-format and title-date-format
See both variants in the demo
Related
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?
I need to provide a language option (en/de) in just one of my components, currently for the captions in my app we use i18n and it works great, but this it content not captions. I am also aware of the option of lazy loading languages, the thing is that here I want the captions to remain in English but the content to have the option to be in German. What might be a good approach to achieving this?
To be clear, the German content will only be loaded later and it is only relevant for a single component and not the entire app, it also does not apply to captions.
With vue-i18n, you can provide a locale explicitly in your component in german:
https://kazupon.github.io/vue-i18n/api/#vue-injected-methods
$t('yourKey', 'de')
It also works with the directive: https://kazupon.github.io/vue-i18n/api/#v-t
You can load both languages, set english as the default language, and explicitly use german in your special component.
react-native Picker component doesn't seem like providing multiselect option https://facebook.github.io/react-native/docs/picker.html#enabled
But, I have com across some libraries which provides multiselect option like,
https://github.com/toystars/react-native-multiple-select
https://www.npmjs.com/package/react-native-multiple-select-list
But is there any way to select multiple values without going for package?
As #Adam Kipnis pointed out, you could always write your own.
You can store the values in an array and render from there.
Since the question was asked the developer team has deprecated the default Picker component. They provide a link for community packages.
https://reactnative.directory/?search=picker
In the skeleton-nav app.html, the nav-bar is imported like a custom element using the require statement and can by used like a custom element using tags , but according to the docs you also need to define it by importing customelement or by using CustomElement convention. However, the nav-bar.js does not use customelement or the convention but you can still use it as a custom tag in your html. What is the difference between the nav-bar template and one defined using the customelement syntax. By using require on any template does this mean that it is automatically a custom element, is this another convention?
I believe that the documentation is simply not up to date. Because in previous version i indeed needed to use the convention but as you said it is not necessary anymore. Just a camelcase name should be enough fir any custom element. But you still need the convention for the custom attribute I believe.