close quasarframework#1204: Allow custom text inside brackets in formatDate (quasarframework#1212)

* Allow custom text inside brackets in formatDate

* Add sample for date format and fix extra spaces in QInput

* Update date.js

Author: pdanpdan

dev/components/form/datetime.vue

@@ -12,8 +12,12 @@
         </span>
       </p>
 
-      <div class="label bg-secondary text-white">
-        Model <span class="right-detail"><em>{{model}}</em></span>
+      <div class="bg-secondary text-white">
+        Model: <em>{{model}}</em>
+      </div>
+      <q-input v-model="format" float-label="Format string" />
+      <div class="bg-secondary text-white">
+        Formatted: <em>{{modelFormatted}}</em>
       </div>
 
       <p class="caption">
@@ -179,12 +183,19 @@ export default {
       model: undefined,
       defaultSelection: '2016-09-18T10:45:00.000Z',
 
+      format: 'MMMM D, YYYY [at] h:mm [[]a[\\]]',
+
       minMaxModel: date.formatDate(day),
 
       min: date.subtractFromDate(day, {days: 5}),
       max: date.addToDate(day, {days: 4, month: 1, minutes: 10})
     }
   },
+  computed: {
+    modelFormatted () {
+      return date.formatDate(this.model, this.format)
+    }
+  },
   methods: {
     onChange (val) {
       console.log('@change', val)

src/components/input/QInput.vue

@@ -250,7 +250,7 @@ export default {
 
     __set (e) {
       let val = e.target ? e.target.value : e
- 
+
       if (this.isNumber) {
         val = parseFloat(val)
         if (isNaN(val)) {
@@ -264,7 +264,7 @@ export default {
       else if (this.upperCase) {
         val = val.toUpperCase()
       }
- 
+
       if (val !== this.model) {
         this.$emit('input', val)
       }

src/utils/date.js

@@ -8,7 +8,7 @@ const
   MILLISECONDS_IN_DAY = 86400000,
   MILLISECONDS_IN_HOUR = 3600000,
   MILLISECONDS_IN_MINUTE = 60000,
-  token = /d{1,4}|M{1,4}|m{1,2}|w{1,2}|Qo|Do|D{1,4}|YY(?:YY)?|H{1,2}|h{1,2}|s{1,2}|S{1,3}|Z{1,2}|a{1,2}|[AQExX]/g
+  token = /\[((?:[^\]\\]|\\]|\\)*)\]|d{1,4}|M{1,4}|m{1,2}|w{1,2}|Qo|Do|D{1,4}|YY(?:YY)?|H{1,2}|h{1,2}|s{1,2}|S{1,3}|Z{1,2}|a{1,2}|[AQExX]/g
 
 function formatTimezone (offset, delimeter = '') {
   const
@@ -507,10 +507,12 @@ export function formatDate (val, mask = 'YYYY-MM-DDTHH:mm:ss.SSSZ') {
 
   let date = new Date(val)
 
-  return mask.replace(token, function (match) {
+  return mask.replace(token, function (match, text) {
     if (match in formatter) {
       return formatter[match](date)
     }
-    return match
+    return text === void 0
+      ? match
+      : text.split('\\]').join(']')
   })
 }