Merge branch 'release/v2.10.0'

README.md

@@ -129,19 +129,22 @@ This project is licensed under the MIT License
 
 ## Change log
 
+### 2.10.0 (2021-11-03)
+ * Feat: Added support for display format when using [`custom-input`](https://talkhabi.github.io/vue-persian-datetime-picker/guide/custom-input.html)
+
 ### 2.9.1 (2021-10-31)
  * Fixed: [Using jumpMinute and roundMinute together](https://github.com/talkhabi/vue-persian-datetime-picker/issues/182)
 
 ### 2.9.0 (2021-09-27)
- * Feat: [Added simple-mode](https://talkhabi.github.io/vue-persian-datetime-picker/#/simple-mode)
+ * Feat: [Added simple-mode](https://talkhabi.github.io/vue-persian-datetime-picker/guide/simple-mode.html)
  * Feat: [Added `input-attrs`](https://github.com/talkhabi/vue-persian-datetime-picker/issues/170)
  * Feat: [Added `@next-month` and `@prev-month` events](https://github.com/talkhabi/vue-persian-datetime-picker/issues/176)
  * Feat: Added `@year-change` and `@month-change` events
  * Fixed: [Mouse wheel in Firefox](https://github.com/talkhabi/vue-persian-datetime-picker/issues/174)
  * Fixed: Prevent selected dates from being reset
 
 ### 2.8.0 (2021-08-01)
- * Feat: [Added ability to control route in show/close action](https://talkhabi.github.io/vue-persian-datetime-picker/#/use-router)
+ * Feat: [Added ability to control route in show/close action](https://talkhabi.github.io/vue-persian-datetime-picker/guide/use-router.html)
  * Fixed Date change animation and transition
 
 ### 2.7.0 (2021-07-23)
@@ -154,12 +157,12 @@ This project is licensed under the MIT License
  * Fixed [year-month](https://github.com/talkhabi/vue-persian-datetime-picker/issues/150)
 
 ### 2.6.0 (2021-02-05)
- * Added [multiple selection](https://talkhabi.github.io/vue-persian-datetime-picker/#/multiple) (for type `date` only)
- * Added [popover mode](https://talkhabi.github.io/vue-persian-datetime-picker/#/popover)
+ * Added [multiple selection](https://talkhabi.github.io/vue-persian-datetime-picker/guide/multiple.html) (for type `date` only)
+ * Added [popover mode](https://talkhabi.github.io/vue-persian-datetime-picker/guide/popover.html)
  * Close picker with `escape` key, fixes [#141](https://github.com/talkhabi/vue-persian-datetime-picker/issues/141)
 
 ### 2.5.0 (2021-01-30)
- * Added [range option](https://talkhabi.github.io/vue-persian-datetime-picker/#/range) (for type `date` only)
+ * Added [range option](https://talkhabi.github.io/vue-persian-datetime-picker/guide/range.html) (for type `date` only)
  * Fixed [#136](https://github.com/talkhabi/vue-persian-datetime-picker/issues/136)
 
 ### 2.4.1 (2020-11-13)
@@ -176,8 +179,8 @@ This project is licensed under the MIT License
  * Added [`convert-numbers`](https://github.com/talkhabi/vue-persian-datetime-picker/pull/117) prop that converts numbers to persian in fa locale: `<date-picker convert-numbers />`
 
 ### 2.2.0 (2020-08-02)
- * [Custom localization](https://talkhabi.github.io/vue-persian-datetime-picker/#/locale) is now supported
- * Added some [slots](https://talkhabi.github.io/vue-persian-datetime-picker/#/slots)
+ * [Custom localization](https://talkhabi.github.io/vue-persian-datetime-picker/guide/localization.html) is now supported
+ * Added some [slots](https://talkhabi.github.io/vue-persian-datetime-picker/guide/slots.html)
 
 ### 2.1.6 (2020-07-13)
  * Fixed `locale-config` prop [#116](https://github.com/talkhabi/vue-persian-datetime-picker/issues/116)

docs/config/README.md

@@ -94,8 +94,7 @@ Editable input or just readonly
 
 
 ## element
-
-The specified input element ID
+Deprecated, Use [customInput](/config/#custominput)
 
 Sometimes you don't want to use picker default input,
 so you can use our own input element with `id` attribute
@@ -104,6 +103,16 @@ so you can use our own input element with `id` attribute
 - Example: `the-id-of-custom-input`
 
 
+## customInput
+New version of `element`
+use this instead of `element`, this custom input does not need v-model, and it will be automatically updated
+also supports `display-format`
+- Type: String (DOMString containing a selector list)
+- Default: `undefined`
+- Example: `.my-custom-input`
+- Version: `>= 2.10.0`
+
+
 ## name
 
 The form input name (when you are not using `element`)

docs/guide/custom-input.md

@@ -1,18 +1,19 @@
 # Custom input
 
+- #### Using `custom-input` prop
 ```vue
 <input
-  id="my-custom-input"
-  v-model="date"
   type="text"
-  class="form-control"
+  class="custom-input"
   placeholder="select date"
 />
+<span>date = {{ date }}</span>
 
 <date-picker
   v-model="date"
-  format="jYYYY/jMM/jDD"
-  element="my-custom-input"
+  format="YYYY-MM-DD"
+  display-format="jYYYY-jMM-jDD"
+  custom-input=".custom-input"
 />
 ```
 ```js
@@ -30,6 +31,7 @@ export default {
   data() {
     return {
       date: '',
+      date1: '',
       date2: '',
       show: false
     }
@@ -38,84 +40,96 @@ export default {
 </script>
 
 <input
-  id="my-custom-input"
-  v-model="date"
   type="text"
-  class="form-control"
+  class="custom-input form-control"
   placeholder="select date"
 />
 
+<code>date = {{ date }}</code>
+
 <ClientOnly>
   <date-picker
     v-model="date"
-    format="jYYYY/jMM/jDD"
-    element="my-custom-input"
+    format="YYYY-MM-DD"
+    display-format="jYYYY-jMM-jDD"
+    custom-input=".custom-input"
   />
 </ClientOnly>
 
-::: danger
-Custom input does not support `display-format`.
-
-You have to create a specific component for this purpose or use a computed property.
 
-See the following example:
-:::
+- #### Method B: Using `element` prop (deprecated)
 
+:::details show example
 ```vue
 <input
   id="my-custom-input"
-  v-model="dateFormatted"
+  v-model="date"
   type="text"
   class="form-control"
   placeholder="select date"
 />
 
 <date-picker
   v-model="date"
-  format="YYYY-MM-DD"
+  format="jYYYY/jMM/jDD"
   element="my-custom-input"
 />
 ```
 ```js
-import moment from 'moment-jalaali'
 export default {
   data() {
     return {
       date: ''
     }
-  },
-  computed: {
-    dateFormatted() {
-      return moment(this.date, 'YYYY-MM-DD').format('jYYYY/jMM/jDD')
-    }
   }
 }
 ```
 
+<input
+  id="my-custom-input"
+  v-model="date1"
+  type="text"
+  class="form-control"
+  placeholder="select date"
+/>
+
+<ClientOnly>
+  <date-picker
+    v-model="date1"
+    format="jYYYY/jMM/jDD"
+    element="my-custom-input"
+  />
+</ClientOnly>
+
+:::
+
+
+::: danger
+`element` does not support `display-format`.
+
+please use `custom-input`.
+:::
+
+
 ### Custom editable input
 ```vue
-<button
-  type="button"
-  class="btn btn-primary"
-  @click="show=true"
->
+<button type="button" class="btn btn-primary" @click="show = true">
   Show Datepicker
 </button>
 
 <input
   id="my-custom-editable-input"
-  v-model="date"
   type="text"
-  class="form-control is-editable"
   placeholder="YYYY/MM/DD"
 />
 
 <date-picker
   v-model="date"
-  format="jYYYY/jMM/jDD"
-  element="my-custom-editable-input"
-  :editable="true"
   :show="show"
+  :editable="true"
+  format="YYYY-MM-DD"
+  display-format="jYYYY/jMM/jDD"
+  custom-input="#my-custom-editable-input"
   @close="show=false"
 />
 ```
@@ -139,17 +153,19 @@ Show Datepicker
   type="text"
   class="form-control is-editable"
   placeholder="YYYY/MM/DD"
-  v-model="date2"
   id="my-custom-editable-input"
 />
 
+<code>date = {{ date2 }}</code>
+
 <ClientOnly>
   <date-picker
     v-model="date2"
-    format="jYYYY/jMM/jDD"
-    element="my-custom-editable-input"
-    :editable="true"
     :show="show"
+    :editable="true"
+    format="YYYY-MM-DD"
+    display-format="jYYYY/jMM/jDD"
+    custom-input="#my-custom-editable-input"
     @close="show=false"
   />
 </ClientOnly>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-persian-datetime-picker",
   "description": "A vue plugin to select jalali date and time",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "private": false,
   "author": "Mohammad Talkhabi",
   "license": "MIT",

src/VuePersianDatetimePicker.vue

@@ -8,7 +8,7 @@
     :class="{ 'vpd-is-popover': isPopover }"
   >
     <span
-      v-if="!element"
+      v-if="!customInputElement"
       ref="inputGroup"
       :class="['vpd-input-group', { 'vpd-disabled': disabled }]"
     >
@@ -457,6 +457,7 @@ import SimpleMode from './components/simple/SimpleMode'
 import CoreModule from './modules/core'
 import { popupRouteChanger } from './modules/mixins'
 import { cloneDates, isSameDay } from './modules/utils'
+import { addLiveEvent } from './modules/utils'
 
 export default {
   components: {
@@ -575,6 +576,7 @@ export default {
     editable: { type: Boolean, default: false },
 
     /**
+     * @deprecated
      * The specified input element ID
      * @type String
      * @default Undefined
@@ -584,6 +586,17 @@ export default {
      */
     element: { type: String, default: undefined },
 
+    /**
+     * New version of `element`
+     * @type String (DOMString containing a selector list)
+     * @desc use this instead of `element`,
+     * this custom input does not need v-model, and it will be automatically updated
+     * also supports `display-format`
+     * @example .my-custom-input | #my-custom-input | div.foo > input
+     * @version 2.10.0
+     */
+    customInput: { type: String, default: undefined },
+
     /**
      * The form input name when not using {element}
      * @type String
@@ -1176,6 +1189,10 @@ export default {
     },
     isCompactTime() {
       return this.compactTime || (this.type === 'datetime' && this.simple)
+    },
+    customInputElement() {
+      if (this.element) return `#${this.element}`
+      return this.customInput
     }
   },
   watch: {
@@ -1253,6 +1270,14 @@ export default {
     'localeData.name'() {
       this.$emit('localeChange', this.localeData)
       this.setMinMax()
+    },
+    displayValue: {
+      immediate: true,
+      handler: function(displayValue) {
+        if (!this.customInput) return
+        const customInput = document.querySelector(this.customInput)
+        if (customInput) customInput.value = displayValue
+      }
     }
   },
   created() {
@@ -1262,21 +1287,10 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      let addEvent = (el, type, handler) => {
-        if (el.attachEvent) el.attachEvent('on' + type, handler)
-        else el.addEventListener(type, handler)
-      }
-      let live = (selector, event, callback, context) => {
-        addEvent(context || document, event, function(e) {
-          let found,
-            el = e.target || e.srcElement
-          while (el && !(found = el.id === selector)) el = el.parentElement
-          if (found) callback.call(el, e)
-        })
-      }
-      if (this.element && !this.editable) {
-        live(this.element, 'click', this.focus)
-      }
+      if (this.customInputElement && !this.editable)
+        addLiveEvent(this.customInputElement, 'click', this.focus)
+      if (this.customInput && this.editable)
+        addLiveEvent(this.customInput, 'blur', this.setOutput)
     })
     document.body.addEventListener('keydown', e => {
       e = e || event
@@ -1435,7 +1449,7 @@ export default {
       }
     },
     updateDates(payload) {
-      if (this.isDataArray && !payload) payload = []
+      if (!payload) payload = this.isDataArray ? [] : ''
 
       // fix: don't update dates if they are already up to date
       if (this.date.clone && payload.toString() === this.outputValue.toString())