|
| 1 | +<template lang="jade"> |
| 2 | + input.form-control(type="text") |
| 3 | +</template> |
| 4 | + |
| 5 | +<script> |
| 6 | + import abstractField from "./abstractField"; |
| 7 | + import moment from "moment"; |
| 8 | + import { defaults } from "lodash"; |
| 9 | +
|
| 10 | + let inputFormat = "YYYY-MM-DD HH:mm:ss"; |
| 11 | +
|
| 12 | + export default { |
| 13 | + mixins: [ abstractField ], |
| 14 | + data(){ |
| 15 | + return {picker: null}; |
| 16 | + }, |
| 17 | +
|
| 18 | + methods: { |
| 19 | +
|
| 20 | + getDateFormat() { |
| 21 | + if (this.schema.pikadayOptions && this.schema.pikadayOptions.format) |
| 22 | + return this.schema.pikadayOptions.format; |
| 23 | + else |
| 24 | + return inputFormat; |
| 25 | + }, |
| 26 | +
|
| 27 | + formatValueToField(value) { |
| 28 | + if (value != null) |
| 29 | + return moment(value, this.schema.format).format(this.getDateFormat()); |
| 30 | +
|
| 31 | + return value; |
| 32 | + }, |
| 33 | +
|
| 34 | + formatValueToModel(value) { |
| 35 | + if (value != null) { |
| 36 | + let m = moment(value, this.getDateFormat()); |
| 37 | + if (this.schema.format) |
| 38 | + value = m.format(this.schema.format); |
| 39 | + else |
| 40 | + value = m.toDate().valueOf(); |
| 41 | + } |
| 42 | + console.log(this.value); |
| 43 | + // this.value = value; |
| 44 | + return value; |
| 45 | + } |
| 46 | +
|
| 47 | + }, |
| 48 | +
|
| 49 | + ready() { |
| 50 | + if (window.Pikaday){ |
| 51 | + this.picker = new Pikaday(defaults(this.schema.pikadayOptions || {}, { |
| 52 | + field: this.$el, // bind the datepicker to a form field |
| 53 | + // trigger: , // use a different element to trigger opening the datepicker, see [trigger example][] (default to `field`) |
| 54 | + bound: true, // automatically show/hide the datepicker on `field` focus (default `true` if `field` is set) |
| 55 | + position: 'bottom left', // preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to 'bottom left') |
| 56 | + reposition: true, // can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true) |
| 57 | + // container: , // DOM node to render calendar into, see [container example][] (default: undefined) |
| 58 | + // format: , // the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting) |
| 59 | + // formatStrict: , // the default flag for moment's strict date parsing (requires [Moment.js][moment] for custom formatting) |
| 60 | + // defaultDate: , // the initial date to view when first opened |
| 61 | + // setDefaultDate: , // make the `defaultDate` the initial selected value |
| 62 | + firstDay: 1, // first day of the week (0: Sunday, 1: Monday, etc) |
| 63 | + // minDate: , // the minimum/earliest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`) |
| 64 | + // maxDate: , // the maximum/latest date that can be selected (this should be a native Date object - e.g. `new Date()` or `moment().toDate()`) |
| 65 | + disableWeekends: false, // disallow selection of Saturdays or Sundays |
| 66 | + // disableDayFn: , // callback function that gets passed a Date object for each day in view. Should return true to disable selection of that day. |
| 67 | + // yearRange: , // number of years either side (e.g. `10`) or array of upper/lower range (e.g. `[1900,2015]`) |
| 68 | + showWeekNumber: false, // show the ISO week number at the head of the row (default `false`) |
| 69 | + isRTL: false, // reverse the calendar for right-to-left languages |
| 70 | + i18n: { |
| 71 | + previousMonth : 'Previous Month', |
| 72 | + nextMonth : 'Next Month', |
| 73 | + months : ['January','February','March','April','May','June','July','August','September','October','November','December'], |
| 74 | + weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], |
| 75 | + weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] |
| 76 | + }, // language defaults for month and weekday names (see internationalization below) |
| 77 | + // yearSuffix: , // additional text to append to the year in the title |
| 78 | + showMonthAfterYear: false, // render the month after year in the title (default `false`) |
| 79 | + showDaysInNextAndPreviousMonths: false, // render days of the calendar grid that fall in the next or previous months to the current month instead of rendering an empty table cell (default: false) |
| 80 | + // numberOfMonths: , // number of visible calendars |
| 81 | + // mainCalendar: , // when `numberOfMonths` is used, this will help you to choose where the main calendar will be (default `left`, can be set to `right`). Only used for the first display or when a selected date is not already visible |
| 82 | + theme: null, // define a classname that can be used as a hook for styling different themes, see [theme example][] (default `null`) |
| 83 | + // onSelect: , // callback function for when a date is selected |
| 84 | + // onOpen: , // callback function for when the picker becomes visible |
| 85 | + // onClose: , // callback function for when the picker is hidden |
| 86 | + // onDraw: , // callback function for when the picker draws a new month |
| 87 | + })); |
| 88 | + } |
| 89 | + // this.slider.noUiSlider.on("change", this.onChange.bind(this)); |
| 90 | + else{ |
| 91 | + console.warn("Pikaday is missing. Please download from https://github.com/dbushell/Pikaday/ and load the script and CSS in the HTML head section!"); |
| 92 | + } |
| 93 | +
|
| 94 | + } |
| 95 | + }; |
| 96 | +</script> |
| 97 | + |
| 98 | + |
| 99 | +<style lang="sass"> |
| 100 | +</style> |
0 commit comments