GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects â†’ edisdev â†’ Vue Datepicker Ui

edisdev / Vue Datepicker Ui

Licence: mit
Datepicker Component For Vue

Labels

vuecomponentcalendardatepicker

Projects that are alternatives of or similar to Vue Datepicker Ui

Calendar
📆 calendar 日历
Stars: ✭ 119 (-52.78%)
Mutual labels:  component, calendar, datepicker
Things Calendar
Simple but elegant datepicker for the web — inspired by Things for mac
Stars: ✭ 165 (-34.52%)
Mutual labels:  component, calendar, datepicker
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+1419.05%)
Mutual labels:  component, calendar, datepicker
React Calendar
A React Native inspired date list renderer
Stars: ✭ 34 (-86.51%)
Mutual labels:  component, calendar, datepicker
Pg Calendar
📆 beautiful and eidetic date picker
Stars: ✭ 109 (-56.75%)
Mutual labels:  calendar, datepicker
Persiandatepicker
An Android DatePicker for Persian Calendar
Stars: ✭ 86 (-65.87%)
Mutual labels:  calendar, datepicker
React Numpad
A numpad for number, date and time, built with and for React.
Stars: ✭ 117 (-53.57%)
Mutual labels:  calendar, datepicker
React Calendar
React.js Calendar Component (npm install react-calendar-component) 📅
Stars: ✭ 142 (-43.65%)
Mutual labels:  calendar, datepicker
React Native Dates
React Native date / daterange picker and calendar
Stars: ✭ 145 (-42.46%)
Mutual labels:  calendar, datepicker
Air Datepicker
Lightweight, dependency-free JavaScript datepicker.
Stars: ✭ 1,913 (+659.13%)
Mutual labels:  calendar, datepicker
React Datepicker2
react datepicker component.(include persian jalaali calendar)
Stars: ✭ 191 (-24.21%)
Mutual labels:  calendar, datepicker
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-66.27%)
Mutual labels:  calendar, datepicker
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-68.65%)
Mutual labels:  calendar, datepicker
Horizontal Calendar
A material horizontal calendar view for Android based on RecyclerView
Stars: ✭ 1,155 (+358.33%)
Mutual labels:  calendar, datepicker
Vuetify Daterange Picker
The missing date range picker for Vuetify JS you have been looking for.
Stars: ✭ 192 (-23.81%)
Mutual labels:  component, datepicker
Hotel Datepicker
Date range picker for hotels
Stars: ✭ 202 (-19.84%)
Mutual labels:  calendar, datepicker
Laydate
layDate（日期与时间组件） 是 layui 独立维护的三大组件之一
Stars: ✭ 1,066 (+323.02%)
Mutual labels:  calendar, datepicker
Datepicker
Get a date with JavaScript! A datepicker with no dependencies.
Stars: ✭ 212 (-15.87%)
Mutual labels:  calendar, datepicker
React Dates
React date(range) inputs/pickers
Stars: ✭ 43 (-82.94%)
Mutual labels:  component, datepicker
React Datepicker
📅 React DatePicker Library (Flexible, Reusable)
Stars: ✭ 165 (-34.52%)
Mutual labels:  calendar, datepicker
View All Similar Projects âž”

Vue Datepicker Component

A Datepicker Component For VueJs (https://edisdev.github.io/vue-datepicker-ui)

Props

   <Calendar 
    v-model="" 
    :range="" 
    :lang="" 
    :firstDayOfWeek="" 
    :input-class="" 
    :position="" 
    :disabled-start-date="" 
    :disabled-end-date=""
    :text-format="" 
    :date-format=""
    :disabled=""
    :placeholder=""
    :circle=""/>
Prop Value
value (v-model) Date or Array for range
range Boolean - (default: false)
lang String / Supports all languages / iso code language / default: 'tr'
firstDayOfWeek monday or sunday (default: monday)
inputClass String / classname for input
position String / options = top, bottom, left, right / default: left
disabled-start-date Object . This object consists of the start and end information(from and to params). ( For single status and range status of startDate). Default: { from: null, to: null}
disabled-end-date Object . It has the same with disabled-start-end. (For range status of end Date. Ignored in single status.)
text-format String / Short And Long / Short and long formats of month and day names
date-format Object / This is the format in which the selected date will be displayed to the user. / default: { day: '2-digit', month: 'long', year: 'numeric' }
disabled Boolean / This parameter is the datepicker prevents opening / default: false
placeholder String / Input placeholder / default: 'Select Date'
circle Boolean / This is selected are circle or area

and customize style with css variables

element {
  --v-calendar-picker-color: #fff;
  --v-calendar-input-bg-color: #fff;
  --v-calendar-input-bg-disable-color:rgb(245, 245, 245);
  --v-calendar-input-text-disable-color:#b8b8b9;
  --v-calendar-select-bg-color: #fff;
  --v-calendar-border-color: #eaeaeb;
  --v-calendar-triangle-color: #eaeaeb;
  --v-calendar-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.2);
  --v-calendar-top-shadow: 3px -14px 30px 0px rgba(0, 0, 0, 0.2);
  --v-calendar-text-color: #7b8187;
  --v-calendar-action-color: #7b8187;
  --v-calendar-text-disabled-color: #b8b8b9;
  --v-calendar-view-button-color: #7b8187;
  --v-calendar-view-button-font-weight: 400;
  --v-calendar-view-button-font-size: 1rem;
  --v-calendar-datepicker-icon-color: #1bba67;
  --v-calendar-datepicker-icon-size: 1.1rem;
  --v-calendar-active-bg-color: #1bba67;
  --v-calendar-active-text-color: #fff;
  --v-calendar-range-bg-color: #edfff9;
  --v-calendar-range-text-color: #7b8187;
  --v-calendar-range-radius: 100%;
  --v-calendar-day-hover-bg-color: #eaeaeb;
  --v-calendar-day-width: 40px;
  --v-calendar-day-height: 40px;
  --v-calendar-day-font-size: 0.9rem;
  --v-calendar-day-font-weight: 400;
  --v-calendar-day-name-font-size: 0.9rem;
  --v-calendar-day-name-font-weight: 500;
  --v-calendar-day-name-color: #7b8187;
  --v-calendar-input-border: 1px solid #eaeaeb;
  --v-calendar-input-text-color: #7b8187;
  --v-calendar-input-font-size: 0.9rem;
  --v-calendar-input-font-weight: 400;
  --v-calendar-content-radius: 0px;
  --v-calendar-year-font-size: 1.1rem;
  --v-calendar-year-color: #7b8187;
  --v-calendar-year-font-weight: 400;
  --v-calendar-year-disabled-color: #b8b8b9;
  --v-calendar-year-disabled-bg-color: transparent;
  --v-calendar-year-padding: 10px;
  --v-calendar-year-border: none;
  --v-calendar-year-border-radius: none;
  --v-calendar-month-font-size: 1.1rem;
  --v-calendar-month-color: #7b8187;
  --v-calendar-month-font-weight: 400;
  --v-calendar-month-disabled-color: #b8b8b9;
  --v-calendar-month-disabled-bg-color: transparent;
  --v-calendar-month-padding: 8px;
  --v-calendar-month-border: none;
  --v-calendar-month-border-radius: none;
  }

DEMO (https://edisdev.github.io/vue-datepicker-ui)

note:

date-format object values is consists to toLocaleString in js. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].