Skip to content

Commit

Permalink
Merge 1a8bb86 into bf28bca
Browse files Browse the repository at this point in the history
  • Loading branch information
@justb3a
justb3a committed Nov 2, 2018
2 parents bf28bca + 1a8bb86 commit b4b2ad1
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 32 deletions.
61 changes: 31 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,36 +99,37 @@ Inline always open version
```
## Available props

| Prop | Type | Default | Description |
|-------------------------------|-----------------|-------------|------------------------------------------|
| value | Date\|String | | Date value of the datepicker |
| name | String | | Input name property |
| id | String | | Input id |
| format | String\|Function| dd MMM yyyy | Date formatting string or function |
| full-month-name | Boolean | false | To show the full month name |
| language | Object | en | Translation for days and months |
| disabled-dates | Object | | See below for configuration |
| placeholder | String | | Input placeholder text |
| inline | Boolean | | To show the datepicker always open |
| calendar-class | String\|Object | | CSS class applied to the calendar el |
| input-class | String\|Object | | CSS class applied to the input el |
| wrapper-class | String\|Object | | CSS class applied to the outer div |
| monday-first | Boolean | false | To start the week on Monday |
| clear-button | Boolean | false | Show an icon for clearing the date |
| clear-button-icon | String | | Use icon for button (ex: fa fa-times) |
| calendar-button | Boolean | false | Show an icon that that can be clicked |
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
| calendar-button-icon-content | String | | Use for material-icons (ex: event) |
| day-cell-content | Function | | Use to render custom content in day cell |
| bootstrap-styling | Boolean | false | Output bootstrap v4 styling classes. |
| initial-view | String | minimumView | If set, open on that view |
| disabled | Boolean | false | If true, disable Datepicker on screen |
| required | Boolean | false | Sets html required attribute on input |
| typeable | Boolean | false | If true, allow the user to type the date |
| use-utc | Boolean | false | use UTC for time calculations |
| open-date | Date\|String | | If set, open on that date |
| minimum-view | String | 'day' | If set, lower-level views won't show |
| maximum-view | String | 'year' | If set, higher-level views won't show |
| Prop | Type | Default | Description |
|--------------------------------------|------------------|-------------|---------------------------------------------------------------------|
| value | Date\|String | | Date value of the datepicker |
| name | String | | Input name property |
| id | String | | Input id |
| format | String\|Function | dd MMM yyyy | Date formatting string or function |
| full-month-name | Boolean | false | To show the full month name |
| language | Object | en | Translation for days and months |
| disabled-dates | Object | | See below for configuration |
| placeholder | String | | Input placeholder text |
| inline | Boolean | | To show the datepicker always open |
| calendar-class | String\|Object | | CSS class applied to the calendar el |
| input-class | String\|Object | | CSS class applied to the input el |
| wrapper-class | String\|Object | | CSS class applied to the outer div |
| monday-first | Boolean | false | To start the week on Monday |
| clear-button | Boolean | false | Show an icon for clearing the date |
| clear-button-icon | String | | Use icon for button (ex: fa fa-times) |
| calendar-button | Boolean | false | Show an icon that that can be clicked |
| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) |
| calendar-button-icon-content | String | | Use for material-icons (ex: event) |
| calendar-button-icon-content-as-html | Boolean | false | Render `calendar-button-icon-content` as html (ex: `<svg>..</svg>`) |
| day-cell-content | Function | | Use to render custom content in day cell |
| bootstrap-styling | Boolean | false | Output bootstrap v4 styling classes. |
| initial-view | String | minimumView | If set, open on that view |
| disabled | Boolean | false | If true, disable Datepicker on screen |
| required | Boolean | false | Sets html required attribute on input |
| typeable | Boolean | false | If true, allow the user to type the date |
| use-utc | Boolean | false | use UTC for time calculations |
| open-date | Date\|String | | If set, open on that date |
| minimum-view | String | 'day' | If set, lower-level views won't show |
| maximum-view | String | 'year' | If set, higher-level views won't show |


## Events
Expand Down
6 changes: 4 additions & 2 deletions src/components/DateInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<template>
<div :class="{'input-group' : bootstrapStyling}">
<div class="vdp-datepicker__calendar-wrapper" :class="{'input-group' : bootstrapStyling}">
<!-- Calendar Button -->
<span v-if="calendarButton" class="vdp-datepicker__calendar-button" :class="{'input-group-prepend' : bootstrapStyling}" @click="showCalendar" v-bind:style="{'cursor:not-allowed;' : disabled}">
<span :class="{'input-group-text' : bootstrapStyling}">
<i :class="calendarButtonIcon">
{{ calendarButtonIconContent }}
<template v-if="!calendarButtonIconContentAsHtml">{{ calendarButtonIconContent }}</template>
<span v-else v-html="calendarButtonIconContent"></span>
<span v-if="!calendarButtonIcon">&hellip;</span>
</i>
</span>
Expand Down Expand Up @@ -58,6 +59,7 @@ export default {
calendarButton: Boolean,
calendarButtonIcon: String,
calendarButtonIconContent: String,
calendarButtonIconContentAsHtml: Boolean,
disabled: Boolean,
required: Boolean,
typeable: Boolean,
Expand Down
2 changes: 2 additions & 0 deletions src/components/Datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
:calendarButton="calendarButton"
:calendarButtonIcon="calendarButtonIcon"
:calendarButtonIconContent="calendarButtonIconContent"
:calendarButtonIconContentAsHtml="calendarButtonIconContentAsHtml"
:disabled="disabled"
:required="required"
:bootstrapStyling="bootstrapStyling"
Expand Down Expand Up @@ -140,6 +141,7 @@ export default {
calendarButton: Boolean,
calendarButtonIcon: String,
calendarButtonIconContent: String,
calendarButtonIconContentAsHtml: Boolean,
bootstrapStyling: Boolean,
initialView: String,
disabled: Boolean,
Expand Down

0 comments on commit b4b2ad1

Please sign in to comment.