Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Overview

Litepie Datepicker

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.


Documentation

For full documentation, visit litepie.com.

Simple Usage

How it works,

<template>
  <div>
    <litepie-datepicker
      ref="myRef"
      :formatter="formatter"
      v-model="dateValue"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import LitepieDatepicker from 'litepie-datepicker';

export default {
  components: {
    LitepieDatepicker
  },
  setup() {
    const myRef = ref(null);
    const dateValue = ref([]);
    const formatter = ref({
      date: 'DD MMM YYYY',
      month: 'MMM'
    });

    return {
      myRef,
      dateValue,
      formatter
    };
  }
};
</script>

Theming options

  • Light mode

    Light mode

  • Dark mode

    Dark mode

Changelog

All notable changes to this project will be documented in this file, Read.

License

The MIT License. Please see for more information.

Thanks to

Comments
  • Tailwind 3 support

    Tailwind 3 support

    Hi,

    Thanks for the great package,

    It there a plan to support Tailwind 3 as i get this error while installing:

    npm ERR! While resolving: undefined@undefined
    npm ERR! Found: [email protected]
    npm ERR! node_modules/tailwindcss
    npm ERR!   dev tailwindcss@"^3.0.0" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer tailwindcss@"^2.0.3" from [email protected]
    npm ERR! node_modules/litepie-datepicker
    npm ERR!   litepie-datepicker@"*" from the root project
    
    

    Thanks.

    opened by ahmedkandel 14
  • Support Vue v2.x / Nuxt v2.x

    Support Vue v2.x / Nuxt v2.x

    I tried to install litepie-datepicker in my Nuxt 2.x project which has Vue v2.x under the hood and having some issues. Even though I was able to add litepie-datepicker as a plugin - it's throwing errors such as:

    litepie-datepicker.esm.js?8527:119 Uncaught TypeError: Object(...) is not a function
        at eval (litepie-datepicker.esm.js?8527:119)
        at Module../node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js (app.js:2133)
        at __webpack_require__ (runtime.js:854)
        at fn (runtime.js:151)
        at eval (litepie-datepicker.js?3366:1)
        at Module../plugins/litepie-datepicker.js (app.js:994)
        at __webpack_require__ (runtime.js:854)
        at fn (runtime.js:151)
        at eval (index.js:70)
        at Module../.nuxt/index.js (app.js:322)
    
    ./node_modules/litepie-datepicker/dist/litepie-datepicker.esm.js 217:86-94"export 'Fragment' was not found in 'vue'
    

    This is my Nuxt.js plugin file:

    import Vue from "vue"
    import LitepieDatepicker from "litepie-datepicker"
    
    Vue.use(LitepieDatepicker)
    
    opened by liyasthomas 13
  • tailwind is `base` utility is creating conflicts in existing project.

    tailwind is `base` utility is creating conflicts in existing project.

    As litepie-datepicker is rely on tailwind, after successful integration of tailwind, it's conflicting with existing CSS that causes lots of design issues.

    How can I integrate litepie without affecting existing design?

    opened by rut2 12
  • Trigger don't work in tailwind modal

    Trigger don't work in tailwind modal

    Hi, i have a strange situation. Datepicker works ok in a custom page, but when i try to show in a modal, trigger doesn't work and datepicker doesn't show.

    Captura de pantalla 2021-06-03 a las 10 54 34

    As you can see, display:none is the status of the class, even when i focused or used custom trigger.

    I tried without a modal and it's work ok...

    Thanks in advance.

    opened by nachiomdq 8
  • AutoApply on customShortcuts

    AutoApply on customShortcuts

    On mobile, when using customShortcuts, it's impossible to apply changes when autoApply is set to false.

    image

    It could be great to set dates directly and submitting it.

    Here is the code of my shortcuts, maybe I missed something :

    
          return [
            {
              label: '7 derniers jours',
              atClick: () => {
                const date = new Date()
                return [
                  new Date(date.setDate(date.getDate() - 7)),
                  new Date(),
                ]
              },
            },
    // ...
    
    opened by tbordinat 5
  • Datepicker alignment

    Datepicker alignment

    Hi,

    Thank you for your work !

    As you can see below, the right calendar isn't available, because it's the end of my screen. image

    It would be great to be able to define if the div under the label has to be on the left or on right side. Maybe something like this : image

    To do so, I simply added a right-0 here <div class="absolute z-50 inset-x-auto top-full sm:mt-2.5 right-0" and set the right-3 in the .litepie-datepicker::before class instead of the left-3.

    opened by tbordinat 5
  • I have some questions about Tailwind css.

    I have some questions about Tailwind css.

    1.Do I need to download all the Tailwind CSS to display this plugin UI properly?

    2.Don't you provide a small version of CSS to express the calendar UI?

    It is burdensome to use in projects that do not use Tailwind CSS.

    Plug-in is so good and I want to use it. Thank you for providing this plug-in.

    opened by JangCool 4
  • How can i call my function ?

    How can i call my function ?

    <litepie-datepicker as-single :formatter="formatter" v-model="values[key]" :placeholder="values[key] != '' && !values[na_key] ? values[key] : 'MM-DD-YYYY' " class="zI-1" readonly="readonly" @change="uncheckNa()" :key="!values[na_key] ? 1 : 0"

    Here, If I change date in Datepicker, need to call my js func. I use onChange, but it's not working.

    opened by ramkumar201 3
  • Disabling current date

    Disabling current date

    Hello, and awesome library!

    I believe there is a bug with disabling current date. If you use :disable-dateprop to try and disable today, it doesn't work, the date can still be picked.

    Example: I set :disable-date to disable 22.06.2021 (today), user can still select date.

    Looking forward to a response!

    enhancement 
    opened by MariusSpring 3
  • Shortcuts for single?

    Shortcuts for single?

    We can't we have shortcuts working together with as-single? I'd like to use a button, for example "7 days ahead" which selects 7 days from now, on single.

    opened by radoslawkoziol 3
  • Added dayjs customParseFormat plugin in order to correctly parse formatter dates

    Added dayjs customParseFormat plugin in order to correctly parse formatter dates

    The CustomParseFormat plugin is required to support custom formats passed by the formatter prop.

    Without this plugin the date format DD-MM-YYYY gets parsed as MM-DD-YYYY.

    Example: when selecting March 8th and re-opening the datepicker, the selected date will be August 3rd.

    Resolves #4

    opened by TomHuijer 3
  • Possibility of change startWeek

    Possibility of change startWeek

    These changes allows you to choose the first day of the week using the parameter start-week. The parameter accepts values from 0 to 6 Here an example with start-week=0:

    Screenshot 2022-12-29 alle 16 01 48

    While here an example with start-week=1:

    Screenshot 2022-12-29 alle 16 02 30
    opened by previdifr 0
  • Date picker runs vertically down the screen

    Date picker runs vertically down the screen

    I am working with nuxt3 and I added the date picker as plugin like so:

    import LitepieDatepicker from 'litepie-datepicker-tw3';
    
    export default defineNuxtPlugin((nuxtApp) => {
        nuxtApp.vueApp.use(LitepieDatepicker)
    })
    

    My datepicker.vue component looks like this:|

    <template>
      <div>
        <litepie-datepicker
          i18n="nl"
          placeholder="Laatste 28 dagen"
          :disable-date="dDate"
          :formatter="formatter"
          separator=" t/m "
          :modelValue="props.modelValue"
          @update:modelValue="emit('update:modelValue', $event)"
        />
      </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    
    const emit = defineEmits(['update:modelValue'])
    
    const props = defineProps({
      modelValue: Object,
    })
    
    const formatter = ref({
      date: 'DD MMM YYYY',
      month: 'MMM'
    });
    
    const dDate = (date) => {
      return date > new Date();
    }
    

    However, after importing the component I get the following result on a local build (npm run dev):

    image

    And this when clicking (uses entire screen):

    image

    I have tailwind version 3.2.1 and I added path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js') to my tailwind.config.js content.

    opened by mathijsfr 1
  • [need help] npm is too late than github, i try use postinstall resolve it but meet some problem

    [need help] npm is too late than github, i try use postinstall resolve it but meet some problem

    i forked this repository, and modify packages.json by add postinstall: npm i && npm run build:es, but it loading...

    image

    you can try pnpm add https://github.com/Valar103769/litepie-datepicker.git

    opened by Valar103769 0
  • Is it possible to show label instead of date range when clicked on label?

    Is it possible to show label instead of date range when clicked on label?

    I would like to show 'Last 15 days', when a user clicked on that shortcut instead of the date range. When a custom date range is chosen, I would like to show the date range. Is this possible?

    opened by mathijsfr 0
  • Datepicker obscured when display in table whitespace-nowrap and scroll X .

    Datepicker obscured when display in table whitespace-nowrap and scroll X .

    image image I have the problem as shown in the first picture. is there any way to make the datepicker display like 2nd picture. is there any solution for that ? Thank you!

    opened by bwv-sang-nv 0
Releases(v1.0.14)
Owner
Ken
Finished because it started
Ken
Vue3-daterange-picker - Date range picker component for vue made without jQuery dependency

vue3-daterange-picker A modified date range picker to run on Vue 3. The componen

ADEGBOYE JOSHUA 2 Aug 31, 2022
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

Krystal Campioni 769 Dec 29, 2022
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

小小鲁班 68 Nov 12, 2022
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

小小鲁班 68 Nov 12, 2022
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Jul 8, 2022
A vue component using Bootstrap 4 styles for date range selection

vue-date-range-picker A vue component using Bootstrap 4 styles for date range selection Live demo (jsfiddle) Features Date range selection Compare fea

Antoine Matyja 28 Nov 23, 2022
A simple datepicker component based Vue 2.x: https://dwqs.github.io/v2-datepicker/

中文 README v2-datepicker A simple datepicker component based Vue 2.x. Installation npm: npm i --save v2-datepicker or yarn yarn add v2-datepicker Ge

Pomy 90 Jul 21, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 4 Oct 30, 2022
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 498 Dec 4, 2022
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 38 Dec 15, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 86 Dec 1, 2022
Vue Nuxt Scroll Datepicker - Fast, powerful and easy to use component datetime picker for Nuxt Vue

Vue Nuxt Scroll Datepicker - Cashbac In this article, we’ll look at how date and time picker and a virtual scroll. Fast, powerful and easy to use comp

mohammad ichlas 2 Apr 25, 2022
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juárez 982 Dec 16, 2022
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 May 1, 2020
Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 Feb 7, 2019
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 56 Nov 16, 2022
Custom column type for RevoGrid component based on duetds-date-picker library

Custom column type for RevoGrid component based on duetds-date-picker library

Revolist 3 Apr 19, 2022