Update value when manually typed

src/components/calendar/Calendar.vue

@@ -311,6 +311,7 @@ export default {
     maskClickListener: null,
     mask: null,
     timePickerTimer: null,
+    isKeydown: false,
     watch: {
         value() {
             this.updateCurrentMetaData();
@@ -1166,14 +1167,272 @@ export default {
             this.currentMonth = viewDate.getMonth();
             this.currentYear = viewDate.getFullYear();
             this.initTime(viewDate);
+        },
+        isValidSelection(value) {
+            let isValid = true;
+            if (this.isSingleSelection()) {
+                if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
+                    isValid = false;
+                }
+            } else if (value.every(v => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
+                if (this.isRangeSelection()) {
+                    isValid = value.length > 1 && value[1] > value[0] ? true : false;
+                }
+            }
+            return isValid;
+        },
+        parseValueFromString(text) {
+            if (!text || text.trim().length === 0) {
+                return null;
+            }
+            
+            let value;
+            
+            if (this.isSingleSelection()) {
+                value = this.parseDateTime(text);
+            }
+            else if (this.isMultipleSelection()) {
+                let tokens = text.split(',');
+                value = [];
+                for (let token of tokens) {
+                    value.push(this.parseDateTime(token.trim()));
+                }
+            }
+            else if (this.isRangeSelection()) {
+                let tokens = text.split(' - ');
+                value = [];
+                for (let i = 0; i < tokens.length; i++) {
+                    value[i] = this.parseDateTime(tokens[i].trim());
+                }
+            }
+            
+            return value;
+        },
+        parseDateTime(text) {
+            let date;
+            let parts = text.split(' ');
+            
+            if (this.timeOnly) {
+                date = new Date();
+                this.populateTime(date, parts[0], parts[1]);
+            }
+            else {
+                const dateFormat = this.datePattern;
+                if (this.showTime) {
+                    date = this.parseDate(parts[0], dateFormat);
+                    this.populateTime(date, parts[1], parts[2]);
+                }
+                else {
+                    date = this.parseDate(text, dateFormat);
+                }
+            }
+            
+            return date;
+        },
+        populateTime(value, timeString, ampm) {
+            if (this.hourFormat == '12' && !ampm) {
+                throw 'Invalid Time';
+            }
+            
+            this.pm = (ampm === 'PM' || ampm === 'pm');
+            let time = this.parseTime(timeString);
+            value.setHours(time.hour);
+            value.setMinutes(time.minute);
+            value.setSeconds(time.second);
+        },
+        parseDate(value, format) {
+            if (format == null || value == null) {
+                throw "Invalid arguments";
+            }
+
+            value = (typeof value === "object" ? value.toString() : value + "");
+            if (value === "") {
+                return null;
+            }
+
+            let iFormat, dim, extra,
+            iValue = 0,
+            shortYearCutoff = (typeof this.shortYearCutoff !== "string" ? this.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(this.shortYearCutoff, 10)),
+            year = -1,
+            month = -1,
+            day = -1,
+            doy = -1,
+            literal = false,
+            date,
+            lookAhead = (match) => {
+                let matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
+                if (matches) {
+                    iFormat++;
+                }
+                return matches;
+            },
+            getNumber = (match) => {
+                let isDoubled = lookAhead(match),
+                    size = (match === "@" ? 14 : (match === "!" ? 20 :
+                    (match === "y" && isDoubled ? 4 : (match === "o" ? 3 : 2)))),
+                    minSize = (match === "y" ? size : 1),
+                    digits = new RegExp("^\\d{" + minSize + "," + size + "}"),
+                    num = value.substring(iValue).match(digits);
+                if (!num) {
+                    throw "Missing number at position " + iValue;
+                }
+                iValue += num[ 0 ].length;
+                return parseInt(num[ 0 ], 10);
+            },
+            getName = (match, shortNames, longNames) => {
+                let index = -1;
+                let arr = lookAhead(match) ? longNames : shortNames;
+                let names = [];
+                
+                for (let i = 0; i < arr.length; i++) {
+                    names.push([i,arr[i]]);
+                }
+                names.sort((a,b) => {
+                    return -(a[ 1 ].length - b[ 1 ].length);
+                });
+                
+                for (let i = 0; i < names.length; i++) {
+                    let name = names[i][1];
+                    if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                        index = names[i][0];
+                        iValue += name.length;
+                        break;
+                    }
+                }
+
+                if (index !== -1) {
+                    return index + 1;
+                } else {
+                    throw "Unknown name at position " + iValue;
+                }
+            },
+            checkLiteral = () => {
+                if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                    throw "Unexpected literal at position " + iValue;
+                }
+                iValue++;
+            };
+
+            if (this.view === 'month') {
+                day = 1;
+            }
+            
+            for (iFormat = 0; iFormat < format.length; iFormat++) {
+                if (literal) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        literal = false;
+                    } else {
+                        checkLiteral();
+                    }
+                } else {
+                    switch (format.charAt(iFormat)) {
+                        case "d":
+                            day = getNumber("d");
+                            break;
+                        case "D":
+                            getName("D", this.locale.dayNamesShort, this.locale.dayNames);
+                            break;
+                        case "o":
+                            doy = getNumber("o");
+                            break;
+                        case "m":
+                            month = getNumber("m");
+                            break;
+                        case "M":
+                            month = getName("M", this.locale.monthNamesShort, this.locale.monthNames);
+                            break;
+                        case "y":
+                            year = getNumber("y");
+                            break;
+                        case "@":
+                            date = new Date(getNumber("@"));
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "!":
+                            date = new Date((getNumber("!") - this.ticksTo1970) / 10000);
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                checkLiteral();
+                            } else {
+                                literal = true;
+                            }
+                            break;
+                        default:
+                            checkLiteral();
+                    }
+                }
+            }
+
+            if (iValue < value.length) {
+                extra = value.substr(iValue);
+                if (!/^\s+/.test(extra)) {
+                    throw "Extra/unparsed characters found in date: " + extra;
+                }
+            }
+
+            if (year === -1) {
+                year = new Date().getFullYear();
+            } else if (year < 100) {
+                year += new Date().getFullYear() - new Date().getFullYear() % 100 +
+                    (year <= shortYearCutoff ? 0 : -100);
+            }
+
+            if (doy > -1) {
+                month = 1;
+                day = doy;
+                do {
+                    dim = this.getDaysCountInMonth(year, month - 1);
+                    if (day <= dim) {
+                        break;
+                    }
+                    month++;
+                    day -= dim;
+                } while (true);
+            }
+
+            date = this.daylightSavingAdjust(new Date(year, month - 1, day));
+                    if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+                        throw "Invalid date"; // E.g. 31/02/00
+                    }
+
+            return date;
+        },
+        daylightSavingAdjust(date) {
+            if (!date) {
+                return null;
+            }
+
+            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+            
+            return date;
         }
     },
     computed: {
         listeners() {
             return {
                 ...this.$listeners,
-                input: event => {
+                input: val => {
-                    this.$emit('input', event)
+                     // IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026
+                    if (!this.isKeydown) {
+                        return;
+                    }
+                    this.isKeydown = false;
+                    
+                    try {
+                        let value = this.parseValueFromString(val);
+                        if (this.isValidSelection(value)) {
+                            this.updateModel(value);
+                        }
+                    }
+                    catch(err) {
+                        //invalid date
+                    }
                 },
                 focus: event => {
                     this.focus = true;
@@ -1184,6 +1443,17 @@ export default {
                 },
                 blur: event => {
                     this.$emit('blur', event);
+                },
+                keydown: event => {
+                    this.isKeydown = true;
+                    if (event.keyCode === 9) {
+                        if (this.touchUI)
+                            this.disableModality();
+                        else
+                            this.overlayVisible = false;
+                    }
+
+                    this.$emit('keydown', event);
                 }
             };
         },