kenhyuwa / vue-tailwind-picker Goto Github PK
View Code? Open in Web Editor NEW:tada: Datepicker component for vue.js build with Tailwind CSS & dayjs date library
Home Page: https://vue-tailwind-picker.netlify.app/
:tada: Datepicker component for vue.js build with Tailwind CSS & dayjs date library
Home Page: https://vue-tailwind-picker.netlify.app/
I get the following error while trying to install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR! dev tailwindcss@"^2.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! vue-tailwind-picker@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR! peer tailwindcss@"^1.4.6" from [email protected]
npm ERR! node_modules/vue-tailwind-picker
npm ERR! vue-tailwind-picker@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
I am seeing this error on page load when used in Nuxt
ERROR [Vue warn]: Error in beforeCreate hook: "ReferenceError: btoa is not defined"
node_modules\vue-tailwind-picker\dist\vue-tailwind-picker.umd.js
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
Add website for live demo.
You can use Netlify or Github Pages for hosting the demo web
Hi, I want to know the way to set default date to empty value.
The default value always is the local day
Thank you
Add usage description of each props
Year can only be selected from the current year on-wards. Cannot select previous years!
Is there any option to set the z-index or "append to body" for this date picker? I can't find anything in the document,
Or anyone able to help me how to fix this issue?
Hey,
Would be great if you could add a date range picker mode and a clear date button (also, a nullable start-date)
I need to unlock past dates and month, how I can do this?
In live demo I did not find option for previous year, for example, to input Date of Birth.
You can see https://bundlephobia.com/[email protected], the dayjs is become part of your library.
This means people might have different dayjs version in their project.
For this case, dayjs should become peerDependencies
, not dependencies
. We let users install their own dayjs.
But this is just my opinion, you might have your own reasons for this decision.
Hi,
When the format is set DD-MM-YYYY or DD/MM/YYYY the component does not work.
<VueTailwindPicker :formatDate="'DD-MM-YYYY'" :formatDisplay="'DD-MM-YYYY'" @change="(v) => value = v"> <input v-model="value" placeholder="Example initial value"> </VueTailwindPicker>
I have a Nuxt app with vue-tailwind-picker, it's working fine in development mode, the date picker not rendering properly when I upload it to production. I have attached some screenshots to show my issue. Can anyone help me to solve the issue? I am pretty new to Vue and Nuxt community.
My nuxt.config.js
export default {
// Disable server side rendering (https://go.nuxtjs.dev/rendering-modes#client-side-rendering-only)
ssr: false,
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
...
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
// { src: '~/plugins/v-tailwind-picker', mode: "client" }
'~/plugins/v-tailwind-picker',
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
],
// Tailwind CSS options
tailwindcss: {
cssPath: '~/assets/css/tailwind.css',
},
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
// '@nuxtjs/pwa',
// Webfont module
'nuxt-webfontloader',
],
// Loading Nunio
webfontloader: {
google: {
families: ['Nunito:400,600,700,800'] //Loads Nunito with weights 400,600,700,800
}
},
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
}
}
My v.tailwind.picker.js plugin file:
import Vue from 'vue'
import VueTailwindPicker from 'vue-tailwind-picker'
Vue.use(VueTailwindPicker)
Also the rendered component
<VueTailWindPicker
:init="false"
:theme="{
background: '#1A202C',
text: 'text-white',
border: 'border-gray-700',
currentColor: 'text-gray-200',
navigation: {
background: 'bg-gray-800',
hover: 'hover:bg-gray-700',
focus: 'bg-gray-700',
},
picker: {
rounded: 'rounded-md',
selected: {
background: 'bg-teal-400',
border: 'border-teal-400',
hover: 'hover:border-teal-400',
},
holiday: 'text-red-400',
weekend: 'text-green-400',
event: 'bg-blue-500',
},
event: {
border: 'border-gray-700',
},
}"
@change="(v) => value = v">
<input v-model="value" placeholder="Select Date" class="form-textbox">
</VueTailWindPicker>
Currently dayjs
is a devDependency
, it should be moved to dependency
in the package.json file.
format-date and format-display is not working
the result like this
<VueTailWindPicker
:init="true"
:format-date="DD-MMMM-YYYY"
@change="(v) => {
searchString = v
performFiltering()
}"
>
<input
v-model="searchString"
list="faqList"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Cari berdasarkan tanggal"
@keyup.enter="performFiltering"
>
</VueTailWindPicker>
Based on #4 , dayjs
is now a peerDependency
. Due to this, users must install dayjs
themselves.
However, the documentation fails to address this requirement and states that only TailwindCSS is required.
Is there something I'm missing from the config? I have :init="false"
but my picker only lets me select today or any day after.
<VueTailWindPicker
style="position: absolute" :z-index="999"
:init="false"
@change="(v) => newTask.start_date = v">
<input v-model="newTask.start_date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-dark-slate-gray-200 focus:ring focus:ring-dark-slate-gray-200 focus:ring-opacity-50"
placeholder="Example initial value">
</VueTailWindPicker>
If I specify date format like YYYY.MM.DD, the datepicker works as expected, but if I switch placeholders and use format DD.MM.YYYY, component crashes with throwing next message in console: RangeError: Invalid array length
.
After an additional investigation I discovered that the same message pops up if format starts with anything but year.
While using this package I've noticed that when you use version 1.10.0 (currently latest release) of dayjs this package stops working. I've not put much thought into this and reverted back to using 1.9.7 after which my application started functioning again.
Command used to downgrade: npm install [email protected] --save
app.js:
import VueTailwindPicker from 'vue-tailwind-picker'
import 'dayjs/locale/nl-be';
EventCreate.vue:
<VueTailwindPicker :formatDate="'DD-MM-YYYY'"
:formatDisplay="'DD-MM-YYYY'"
:selectedDate="form.day"
:start-from-monday="true"
:startDate="$date().format('DD-MM-YYYY')"
class="z-50"
@change="(v) => form.day = v">
<jet-input id="day" v-model="form.day" class="mt-1 block w-full"
type="text"/>
</VueTailwindPicker>
First excellent work to this amazing component, It will be a +1 to have a time picker as well. At least disabled by default lets say
I know there is a closed issue on this, but I cannot still get it to work,
For what I can see, I also can't select any date before the current one.
It says it's fixed, I just can't find a way get it working. Any examples on this?
Thank you
This project looks really nice! Now that Vue 3 is in RC already, it would be nice to have support for it ๐
Add "selectedDate" props to display selected date
If "startDate" is earlier than "selectedDate", it enables the option to navigate between these dates without disabling.
<VueTailwindPicker
:start-date="startDate"
:selected-date="selectedDate"
@change="(v) => selectedDate = v"
data(){
return:{
startDate: "2020-01-01",
selectedDate: "2020-05-01",
}
}
I'm working on it to make a commit
Thanks for everything <3
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.