date-picker: add timestamp format

packages/date-picker/src/picker.vue

@@ -122,9 +122,11 @@ const HAVE_TRIGGER_TYPES = [
   'datetimerange'
 ];
 const DATE_FORMATTER = function(value, format) {
+  if (format === 'timestamp') return value.getTime();
   return formatDate(value, format);
 };
 const DATE_PARSER = function(text, format) {
+  if (format === 'timestamp') return new Date(Number(text));
   return parseDate(text, format);
 };
 const RANGE_FORMATTER = function(value, format) {
@@ -133,7 +135,7 @@ const RANGE_FORMATTER = function(value, format) {
     const end = value[1];
 
     if (start && end) {
-      return [formatDate(start, format), formatDate(end, format)];
+      return [DATE_FORMATTER(start, format), DATE_FORMATTER(end, format)];
     }
   }
   return '';
@@ -146,7 +148,7 @@ const RANGE_PARSER = function(array, format, separator) {
     const range1 = array[0];
     const range2 = array[1];
 
-    return [parseDate(range1, format), parseDate(range2, format)];
+    return [DATE_PARSER(range1, format), DATE_PARSER(range2, format)];
   }
   return [];
 };

test/unit/specs/date-picker.spec.js

@@ -500,6 +500,76 @@ describe('DatePicker', () => {
         }, DELAY);
       }, DELAY);
     });
+
+    it('is timestamp', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="date"
+            format="yyyy-MM-dd"
+            value-format="timestamp" />`,
+        data() {
+          return {
+            value: Date.now()
+          };
+        }
+      }, true);
+      const input = vm.$refs.compo.$el.querySelector('input');
+      input.focus();
+      setTimeout(_ => {
+        // check timestamp is parsed internally
+        expect(vm.$refs.compo.parsedValue.getTime()).to.equal(vm.value);
+        input.value = '2000-10-01';
+        triggerEvent(input, 'input');
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal(new Date(2000, 9, 1).getTime());
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('works for daterange, is timestamp', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker
+            ref="compo"
+            v-model="value"
+            type="daterange"
+            format="yyyy-MM-dd"
+            value-format="timestamp" />`,
+        data() {
+          return {
+            value: [Date.now(), Date.now() + 86400 * 1000]
+          };
+        }
+      }, true);
+      const inputs = vm.$refs.compo.$el.querySelectorAll('input');
+      inputs[0].focus();
+      setTimeout(_ => {
+        // check timestamp is parsed internally
+        expect(vm.$refs.compo.parsedValue[0].getTime()).to.equal(vm.value[0]);
+        expect(vm.$refs.compo.parsedValue[1].getTime()).to.equal(vm.value[1]);
+        inputs[0].value = '2000-10-01';
+        triggerEvent(inputs[0], 'input');
+        keyDown(inputs[0], TAB);
+        setTimeout(_ => {
+          inputs[1].focus();
+          inputs[1].value = '2000-10-02';
+          triggerEvent(inputs[1], 'input');
+          keyDown(inputs[0], ENTER);
+          setTimeout(_ => {
+            expect(vm.value).to.eql([
+              new Date(2000, 9, 1).getTime(),
+              new Date(2000, 9, 2).getTime()
+            ]);
+            done();
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
   });
 
   describe('default value', done => {