Skip to content

Commit

Permalink
Merge pull request #9 from aShu-guo/feature/confirm
Browse files Browse the repository at this point in the history 
Feature/confirm
  • Loading branch information
@aShu-guo
aShu-guo committed Apr 2, 2024
2 parents 8ab325d + 226f14c commit 4d48cc4
Show file tree
Hide file tree
Showing 10 changed files with 279 additions and 202 deletions.
107 changes: 53 additions & 54 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<!-- ![datetime-picker-vue](./assets/logo_sticky.png) -->

> fork from [vue-ctk-date-time-picker](https://github.com/chronotruck/vue-ctk-date-time-picker),Due to the fact that `vue-ctk-date-time-picker` has not been updated for many years, in order to prevent such a good project from being deprecated, we have decided to continue maintaining the project. welcome issue.
> fork from [vue-ctk-date-time-picker](https://github.com/chronotruck/vue-ctk-date-time-picker), Due to the fact that `vue-ctk-date-time-picker` has not been updated for many years, in order to prevent such a good project from being deprecated, we have decided to continue maintaining the project. welcome issue.
# DatetimePickerVue

> A vue component for select dates (range mode available) & time
This documentation is for v2.\*. Find v1 documentation [here](./assets/doc-v1.md)

![datetime-picker-vue](./assets/illu-animated.gif)

## Dark mode
Expand Down Expand Up @@ -93,50 +91,51 @@ Vue.component('DatetimePickerVue', DatetimePickerVue);

# Props API

| Props | Type | Required | Default |
|-----------------------------| ----------------- | -------- |-----------------------------|
| v-model | String | yes | - |
| format | String | no | 'YYYY-MM-DD hh:mm a' |
| label | String | no | Select date & time |
| hint (1) | String | no | - |
| error (2) | Boolean | no | false |
| color (3) | String (hex) | no | dodgerblue |
| button-color (4) | String (hex) | no | #00C853 |
| position | String | no | null |
| locale (5) | String | no | [Browser Locale](https://github.com/moment/moment/tree/develop/locale) |
| persistent | Boolean | no | false |
| minute-interval | Integer | no | 1 |
| second-interval | Integer | no | 1 |
| output-format | String | no | null |
| only-time | Boolean | no | false |
| only-date | Boolean | no | false |
| no-label | Boolean | no | false |
| no-header | Boolean | no | false |
| no-value-to-custom-elem (6) | Boolean | no | false |
| min-date (7) | String | no | - |
| max-date (7) | String | no | - |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| inline | Boolean | no | false |
| overlay | Boolean | no | false |
| range | Boolean | no | false |
| dark | Boolean | no | false |
| no-shortcuts | Boolean | no | false |
| no-button | Boolean | no | false |
| input-size | String (sm or lg) | no | null |
| button-now-translation | String | no | 'Now' |
| no-button-now | Boolean | no | false |
| first-day-of-week | Int (0 to 7) | no | - |
| disabled-dates (8) | Array`<string>` | no | [] |
| disabled-hours (9) | Array`<string>` | no | - |
| shortcut | String | no | - |
| custom-shortcuts (10) | Array`<object>` | no | - |
| disabled-weekly (11) | Array`<integer>` | no | [] |
| no-keyboard (12) | Boolean | no | false |
| right (13) | Boolean | no | false |
| noClearButton | Boolean | no | false |
| behaviour | Object | no | [See behaviour](#Behaviour) |
| id (14) | String | no | undefined |
| Props | Type | Required | Default |
|-----------------------------| ----------------- | -------- |-----------------------------------------------------------------------|
| v-model | String | yes | - |
| format | String | no | 'YYYY-MM-DD hh:mm a' |
| label | String | no | Select date & time |
| hint (1) | String | no | - |
| error (2) | Boolean | no | false |
| color (3) | String (hex) | no | dodgerblue |
| button-color (4) | String (hex) | no | #00C853 |
| position | String | no | null |
| locale (5) | String | no | [Browser Locale](https://github.com/moment/moment/tree/develop/locale) |
| persistent | Boolean | no | false |
| minute-interval | Integer | no | 1 |
| second-interval | Integer | no | 1 |
| output-format | String | no | null |
| only-time | Boolean | no | false |
| only-date | Boolean | no | false |
| no-label | Boolean | no | false |
| no-header | Boolean | no | false |
| no-value-to-custom-elem (6) | Boolean | no | false |
| min-date (7) | String | no | - |
| max-date (7) | String | no | - |
| no-weekends-days | Boolean | no | false |
| auto-close | Boolean | no | false |
| inline | Boolean | no | false |
| overlay | Boolean | no | false |
| range | Boolean | no | false |
| dark | Boolean | no | false |
| no-shortcuts | Boolean | no | false |
| no-button | Boolean | no | false |
| input-size | String (sm or lg) | no | null |
| button-now-translation | String | no | 'Now' |
| button-confirm-translation | String | no | '✓' |
| no-button-now | Boolean | no | false |
| first-day-of-week | Int (0 to 7) | no | - |
| disabled-dates (8) | Array`<string>` | no | [] |
| disabled-hours (9) | Array`<string>` | no | - |
| shortcut | String | no | - |
| custom-shortcuts (10) | Array`<object>` | no | - |
| disabled-weekly (11) | Array`<integer>` | no | [] |
| no-keyboard (12) | Boolean | no | false |
| right (13) | Boolean | no | false |
| noClearButton | Boolean | no | false |
| behaviour | Object | no | [See behaviour](#Behaviour) |
| id (14) | String | no | undefined |

(1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)

Expand Down Expand Up @@ -245,13 +244,13 @@ To override those values, pass a new object with the values you want to override

# Events API

| Event | Return |
| --------------- | ------------------------------------------------- |
| input | value (formatted with 'format' props) |
| is-shown | Component is shown |
| is-hidden | Component is hidden |
| validate | Click on validate button (so component is closed) |
| destroy | Component is destroy |
| Event | Return |
|-----------|---------------------------------------------|
| input | value (formatted with 'format' props) |
| is-shown | Component is shown |
| is-hidden | Component is hidden |
| ok | Click on ok button (so component is closed) |
| destroy | Component is destroy |

# Keyboard Accessible

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "datetime-picker-vue",
"version": "0.0.3",
"version": "0.0.5",
"description": "A vue component for select date & time (by aShu-guo)",
"author": "aShu-guo <guochengli97@163.com>",
"scripts": {
Expand Down
115 changes: 62 additions & 53 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,6 @@
:only-time="demo.options.onlyTime"
:range="demo.options.range"
:format="demo.options.format"
:formatted="demo.options.formatted"
:output-format="demo.options.outputFormat"
:inline="demo.options.inline"
:color="demo.options.color"
Expand Down Expand Up @@ -212,6 +211,7 @@
:no-shortcuts="demo.options.noShortcuts"
:no-button="demo.options.noButton"
:button-now-translation="demo.options.buttonNowTranslation"
:button-confirm-translation="demo.options.buttonConfirmTranslation"
:no-button-now="demo.options.noButtonNow"
:locale="demo.options.locale"
:input-size="demo.options.inputSize"
Expand Down Expand Up @@ -260,8 +260,8 @@
'noKeyboard', 'right', 'noClearButton', 'noLabel'
],
stringOptions: [
'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',
'minDate', 'maxDate', 'inputSize', 'buttonNowTranslation', 'disabledWeekly'
'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'outputFormat',
'minDate', 'maxDate', 'inputSize', 'buttonNowTranslation', 'buttonConfirmTranslation', 'disabledWeekly'
],
optionsNotEditable: [
'customShortcuts', 'disabledDates', 'disabledHours', 'locale'
Expand All @@ -281,7 +281,9 @@
format: 'YYYY-MM-DD HH:mm:ss',
id: 'DateTimePicker',
minDate: '2018-04-05 12:20:30',
maxDate: '2018-04-24 8:13:20'
maxDate: '2018-04-24 8:13:20',
buttonConfirmTranslation: '确定',
buttonNowTranslation: '现在'
}
},
{
Expand All @@ -302,7 +304,6 @@
type: 'button'
},
range: true,
formatted: 'll',
format: 'YYYY-MM-DD',
color: 'purple',
label: 'Select date range',
Expand All @@ -312,7 +313,7 @@
{
id: '3',
title: 'Date Picker',
description: 'Date selector - right position - noLabel true - With large input (input-size="lg") - format: "MM-DD-YYYY" - formatted: "ll"',
description: 'Date selector - right position - noLabel true - With large input (input-size="lg") - format: "MM-DD-YYYY" ',
editOption: false,
initial: '14-01-2019',
value: '14-01-2019',
Expand All @@ -324,7 +325,6 @@
buttonNowTranslation: 'Maintenant',
id: 'DatePicker',
format: 'DD-MM-YYYY',
formatted: 'll',
right: true,
noLabel: true
}
Expand All @@ -338,7 +338,6 @@
value: '11:26 am',
options: {
format: 'hh:mm a',
formatted: 'hh:mm a',
onlyTime: true,
color: 'firebrick',
minuteInterval: '10',
Expand All @@ -364,7 +363,6 @@
options: {
inline: true,
format: 'YYYY-MM-DD',
formatted: 'll',
range: true,
id: 'InlinePicker',
disabledWeekly: [0, 4, 6],
Expand Down Expand Up @@ -411,25 +409,26 @@
minDate: '2019-03-03 8:10 pm',
maxDate: '2019-03-24 9:14 am'
}
}
/* {
},
{
id: '9',
title: 'Enabled/Disabled dates Picker',
description: '',
editOption: false,
initial: {
disabledDates: ['2021-02-22'],
disabledDates: ['2021-02-22', '2024-03-29 17:37:50'],
enabledDates: ['2021-02-21', '2021-02-22', '2021-02-23']
},
value: '2021-02-22',
options: {
id: 'EnabledDisabledDatesPicker',
disabledDates: ['2021-02-22'],
enabledDates: ['2021-02-21', '2021-02-22', '2021-02-23'],
inline: true,
format: 'YYYY-MM-DD HH:mm'
disabledDates: ['2021-02-22', '2024-03-29 17:37:50'],
// enabledDates: ['2021-02-21', '2021-02-22', '2021-02-23'],
// inline: true,
format: 'YYYY-MM-DD HH:mm',
outputFormat: 'YYYY-MM-DD HH:mm'
}
} */
}
],
value: '06-01-2014 05:00',
value2: null,
Expand Down Expand Up @@ -483,42 +482,52 @@
</script>

<style lang="scss">
@import "./assets/scss/main.scss";
html, body, #app, #datetimePickerVue {
margin: 0;
min-height: 100%;
min-width: 100%;
font-size: 14px;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.dark {
background-color: darken(#424242, 20%);
header {
color: rgba(255, 255, 255, 0.70);
}
@import "./assets/scss/main.scss";
html, body, #app, #datetimePickerVue {
margin: 0;
min-height: 100%;
min-width: 100%;
font-size: 14px;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.dark {
background-color: darken(#424242, 20%);
header {
color: rgba(255, 255, 255, 0.70);
}
}
header {
text-align: center;
}
*, *::before, *::after {
box-sizing: border-box;
}
img {
height: 140px;
}
h3, h4, h1, p {
margin: 0;
}
h3 {
margin-bottom: 10px;
}
hr {
border-top: 1px solid #ebebeb;
border-bottom: 0;
margin: 20px 0;
}
}
header {
text-align: center;
}
*, *::before, *::after {
box-sizing: border-box;
}
img {
height: 140px;
}
h3, h4, h1, p {
margin: 0;
}
h3 {
margin-bottom: 10px;
}
hr {
border-top: 1px solid #ebebeb;
border-bottom: 0;
margin: 20px 0;
}
</style>

0 comments on commit 4d48cc4

Please sign in to comment.