Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor datepicker to move calendar out #27

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Refactor datepicker to move calendar out #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4993c40
refactor(calendar): move calendar in own component
MrWook Aug 21, 2020
51b9790
feat(calendar): add props to add calendar to body
MrWook Aug 31, 2020
651bd2c
chore(popup): set fixed position for relativ position
MrWook Sep 19, 2020
847ddb1
chore(project): small fine tuning
MrWook Oct 5, 2020
139b71a
feat(position): make fixedPosition workable again
MrWook Oct 7, 2020
9dfa77b
fix(position): resolve position on right sided inputs
MrWook Oct 7, 2020
ea9bc22
docs(project): adjust docs for fixedPosition prop
MrWook Oct 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/.vuepress/components/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,40 @@
<datepicker :calendar-button="true" :show-calendar-on-button-click="true"></datepicker>
</code>
</div>

<div class="example overflow-scroll">
<h3>Append datepicker to body</h3>
<Datepicker
:append-to-body="true"
/>
<h3>Don't append datepicker to body</h3>
<Datepicker />
<code>
&lt;datepicker :append-to-body="true"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Fixed positions</h3>
<Datepicker
:fixed-position="fixedPosition"
/>
<code>
&lt;datepicker :fixed-position="fixedPosition"&gt;&lt;/datepicker&gt;
</code>
<div class="settings">
<h5>Settings</h5>
<select v-model="fixedPosition">
<option
v-for="(position) in fixedPositions"
:key="position"
:value="position"
>
{{ position }}
</option>
</select>
</div>
</div>
</div>
</template>

Expand All @@ -146,6 +180,15 @@ export default {
format: 'd MMMM yyyy',
openDate: null,
vModelExample: null,
fixedPositions: [
'bottom',
'bottom-left',
'bottom-right',
'top',
'top-left',
'top-right',
],
fixedPosition: 'bottom',
}
},
}
Expand Down
4 changes: 4 additions & 0 deletions docs/.vuepress/components/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,7 @@
.error {
color: red;
}

.overflow-scroll {
overflow:scroll
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting: overflow: scroll;

}
1 change: 1 addition & 0 deletions docs/guide/Props/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

| Prop | Type | Default | Description |
| ----------------------------- | -----------------| ----------- | ----------------------------------------------- |
| append-to-body | Boolean | false | Append datepicker calendar to body |
| autofocus | String | | Sets html `autofocus` attribute on input |
| bootstrap-styling | Boolean | false | Use bootstrap v4 styling classes. |
| calendar-button | Boolean | false | Show an icon that that can be clicked |
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,6 @@ If you use [SASS](https://sass-lang.com/) you can directly import the src file.

```vue
<style lang="scss">
@import '~@sumcumo/vue-datepicker/src/styles/style.scss';
@import '~@sum.cumo/vue-datepicker/src/styles/style.scss';
</style>
```
53 changes: 52 additions & 1 deletion example/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
<h1>Datepicker Examples</h1>
<div class="example">
<h3>Default datepicker...</h3>
<Datepicker placeholder="Select Date" />
<Datepicker
placeholder="Select Date"
:append-to-body="true"
/>
<code>
&lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
</code>
Expand Down Expand Up @@ -37,6 +40,7 @@
<Datepicker
v-model="vModelExample"
placeholder="Select Date"
:append-to-body="true"
/>
<code>
&lt;datepicker placeholder="Select Date" v-model="vmodelexample"&gt;&lt;/datepicker&gt;
Expand All @@ -45,6 +49,18 @@
<p>{{ vModelExample }}</p>
</div>

<div class="example overflow-scroll">
<h3>Append datepicker to body</h3>
<Datepicker
:append-to-body="true"
/>
<h3>Don't append datepicker to body</h3>
<Datepicker />
<code>
&lt;datepicker :append-to-body="true"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Format datepicker</h3>
<Datepicker :format="format" />
Expand Down Expand Up @@ -294,6 +310,29 @@
:initialView="'year'"&gt;&lt;/datepicker&gt;
</code>
</div>

<div class="example">
<h3>Fixed positions</h3>
<Datepicker
:fixed-position="fixedPosition"
:append-to-body="true"
/>
<code>
&lt;datepicker :fixed-position="fixedPosition"&gt;&lt;/datepicker&gt;
</code>
<div class="settings">
<h5>Settings</h5>
<select v-model="fixedPosition">
<option
v-for="(position) in fixedPositions"
:key="position"
:value="position"
>
{{ position }}
</option>
</select>
</div>
</div>
</div>
</template>

Expand Down Expand Up @@ -369,6 +408,15 @@ export default {
vModelExample: null,
languages: lang,
language: 'en',
fixedPositions: [
'bottom',
'bottom-left',
'bottom-right',
'top',
'top-left',
'top-right',
],
fixedPosition: 'bottom',
}
},
computed: {
Expand Down Expand Up @@ -499,4 +547,7 @@ h5 {
font-size: 80%;
display: block;
}
.overflow-scroll {
overflow:scroll
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting: overflow: scroll;

}
</style>
Loading