This commit is contained in:
@@ -16,6 +16,7 @@ TODO CLIENT STUFF
|
|||||||
|
|
||||||
DATETIME - Ok, fuck a combined date and time, no one else seems to support it but me so split it into separate components:
|
DATETIME - Ok, fuck a combined date and time, no one else seems to support it but me so split it into separate components:
|
||||||
- How to work with getting and setting a value from a component? Because datepicker expects a string of only date and barfs otherwise but I have a combined field that needs to be set as well
|
- How to work with getting and setting a value from a component? Because datepicker expects a string of only date and barfs otherwise but I have a combined field that needs to be set as well
|
||||||
|
-https://codepen.io/anon/pen/dQJOyQ?editors=1010 ??
|
||||||
- Get the test form working with a custom date and time thing like this:
|
- Get the test form working with a custom date and time thing like this:
|
||||||
- single read only text field with initial display of date and time in users's locale format
|
- single read only text field with initial display of date and time in users's locale format
|
||||||
- A button to the left with a calendar icon to trigger a date picker to adjust the date
|
- A button to the left with a calendar icon to trigger a date picker to adjust the date
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import errorHandler from "./api/errorhandler";
|
|||||||
import NProgress from "nprogress";
|
import NProgress from "nprogress";
|
||||||
import "nprogress/nprogress.css";
|
import "nprogress/nprogress.css";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
|
import gzdatepicker from "./components/gzdatepicker.vue";
|
||||||
|
|
||||||
/////////////////////////////////////////////////////////////////
|
/////////////////////////////////////////////////////////////////
|
||||||
// FORM VALIDATION
|
// FORM VALIDATION
|
||||||
@@ -101,6 +102,52 @@ Vue.filter("boolastext", function(value) {
|
|||||||
return value ? "Yes" : "Nope";
|
return value ? "Yes" : "Nope";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//COMPONENT DATE TEST
|
||||||
|
//
|
||||||
|
|
||||||
|
Vue.component("gz-date-picker", gzdatepicker);
|
||||||
|
|
||||||
|
// Vue.component("GzDatePicker", {
|
||||||
|
// props: {
|
||||||
|
// value: Date
|
||||||
|
// },
|
||||||
|
// render() {
|
||||||
|
// return this.$createElement("v-date-picker", {
|
||||||
|
// props: {
|
||||||
|
// ...this.$attrs,
|
||||||
|
// value: this.value ? this.value.toISOString().substr(0, 10) : null
|
||||||
|
// },
|
||||||
|
// on: {
|
||||||
|
// ...this.$listeners,
|
||||||
|
// input: date => this.$emit("input", new Date(date))
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Vue.component("AltGzDatePicker", {
|
||||||
|
// props: {
|
||||||
|
// value: String
|
||||||
|
// },
|
||||||
|
// data: function() {
|
||||||
|
// return {
|
||||||
|
// ogdate: ""
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// render() {
|
||||||
|
// return this.$createElement("v-date-picker", {
|
||||||
|
// props: {
|
||||||
|
// ...this.$attrs,
|
||||||
|
// value: this.value ? this.value.substr(0, 10) : null
|
||||||
|
// },
|
||||||
|
// on: {
|
||||||
|
// ...this.$listeners,
|
||||||
|
// input: date => this.$emit("input", new Date(date).toISOString())
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
/////////////////////////////////////////////////////////////////
|
/////////////////////////////////////////////////////////////////
|
||||||
// INSTANTIATE
|
// INSTANTIATE
|
||||||
//
|
//
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
<v-flex xs12 sm6 lg4 xl3 px-2>
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
<v-date-picker :label="pickStartDate" v-model="pickStartDate"></v-date-picker>
|
<gz-date-picker label="TESTStartDate" v-model="obj.startDate"></gz-date-picker>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
@@ -112,8 +112,9 @@
|
|||||||
<v-btn @click="submit">submit</v-btn>
|
<v-btn @click="submit">submit</v-btn>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</form>
|
</form> <div>{{obj.startDate}}</div>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -170,8 +171,11 @@ export default {
|
|||||||
//return this.obj.startDate ? moment(this.date).format("dddd, MMMM Do YYYY") : "";
|
//return this.obj.startDate ? moment(this.date).format("dddd, MMMM Do YYYY") : "";
|
||||||
},
|
},
|
||||||
pickStartDate() {
|
pickStartDate() {
|
||||||
var copiedDate = new Date(date.getTime());
|
return this.obj.startDate
|
||||||
obj.startDate.toISOString().substr(0, 10);
|
? dayjs(this.obj.startDate).toDate()
|
||||||
|
: null;
|
||||||
|
// var copiedDate = new Date(date.getTime());
|
||||||
|
//obj.startDate.toISOString().substr(0, 10);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeRouteEnter(to, from, next) {
|
beforeRouteEnter(to, from, next) {
|
||||||
|
|||||||
Reference in New Issue
Block a user