vue-date-pick 的格式化日期大 1 天

Question

在我的 vue/cli 4/vuex/bootstrap-vue 项目应用程序中，我安装了自定义格式的日期选择器，就像这里 https://dbrekalo.github.io/vue-date-pick/examples.html#custom-date-parser

我在我的项目中使用了 moment/moment-timezone，所以我不想像示例中那样使用 fecha 我必须将日期值从 mysql 转换为 datepicker 格式，并且我的转换日期有一个问题 datepicker 大了 1 天...

我的组件中有：

                        <date-pick
                                v-model="editableAd.expire_date_formatted"
                                :format="date_picker_format"
                                :parseDate="parseDate"
                                :formatDate="formatDate"
                                :inputAttributes="{size: 32}"
                        ></date-pick>

...
    import moment from 'moment-timezone'

    console.log('settingsTimeZone::')
    console.log(settingsTimeZone) // it shows Europe/Kiev

    moment.tz.setDefault(settingsTimeZone)

...
    date_picker_format: 'Do MMMM, YYYY',

...
    // setting formated date for dapicker
    this.editableAd.expire_date_formatted = this.formatDate(this.editableAd.expire_date, this.date_picker_format)
...

            formatDate(dateObj) {

                console.log('typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj)  // it has ‘2023-01-19’ value

                if (typeof dateObj === 'string') {
                    dateObj = moment(dateObj, this.date_picker_format)
                }
                console.log('++typeof dateObj::')
                console.log(typeof dateObj)
                console.log(dateObj)

                console.log('RESULT moment(dateObj).format(this.date_picker_format)::')
                console.log(moment(dateObj).format(this.date_picker_format)) // BUT it has ‘20th January, 2023’ value

                return moment(dateObj).format(this.date_picker_format) // returns invalid ‘20th January, 2023’ value which I see in datepicker

我在控制台中看到的 dateObj var : https://imgur.com/a/KZLtXiL

"bootstrap-vue": "^2.1.0",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"vue": "^2.6.10",
"vue-date-pick": "^1.2.1",

为什么会出错以及如何修复？

---

修改版块 2：

我从我的项目中删除了 moment.tz。 在 /etc/php/7.2/apache2/php.ini 我改变了

Timezone ='Europe/Uzhgorod'  // That it near my place I live
date.timezone = "Europe/Uzhgorod" 

所以我的phpinfo 有这个输出：

"Olson" Timezone Database Version   0.system
Timezone Database   internal
Default timezone    Europe/Uzhgorod

我搜索了如何从客户端浏览器获取时区并找到了这个 get client time zone from browser 分支和检查：

var timedifference = new Date().getTimezoneOffset();
console.log('timedifference::')
console.log(timedifference)

var rightNow = new Date();
var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
var temp = jan1.toGMTString();
var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ") - 1));
var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);
console.log('std_time_offset::')
console.log(std_time_offset)


let jstz = require('jstimezonedetect')
let timezone = jstz.determine()
console.log('timezone::')
console.log(timezone)

console.log('===========================')

我有下一个输出：https://imgur.com/a/84RqqPJ，当我看到日期更改 +1 天时再次运行代码：

console.log('__')
console.log('__')

console.log('typeof dateObj::')
console.log(typeof dateObj)
console.log(dateObj)

if (typeof dateObj === 'string') {
    dateObj = moment(dateObj, this.date_picker_format)
}
console.log('++typeof dateObj::')
console.log(typeof dateObj)
console.log(dateObj) // it has ‘2023-01-19’ value


console.log('RESULT moment(dateObj).format(this.date_picker_format)::')
console.log(moment(dateObj).format(this.date_picker_format)) // BUT it has ‘20th January, 2023’ value

return moment(dateObj).format(this.date_picker_format)

以及我在控制台中看到的内容：https://imgur.com/a/Y1aSBez .d 有 20 天，这很奇怪。它是什么？某天基于零的选项？

Answer 1

您遇到的问题是由于某些自动本地化格式。我也不明白为什么会发生这种情况，因为我们只提供日期，所以无论我们的时区如何，都应该这样对待。但要解决这个问题，我们必须使用moment.utc() 将其读取为UTC，然后使用您想要的格式对其进行格式化。

来自 vue-date-pick docs example 我已经使用 moment 制定了一个解决方案。

var app = new Vue({
  el: '#app',
  components: {
    'date-pick': VueDatePick,
  },
  data: () => ({
    format: 'Do MMMM, YYYY',
    date: '19th January, 2023',
  }),
  methods: {
    parseDate(value) {
      const m = moment.utc(value, this.format);
      return new Date(m.year(), m.month(), m.date());
    },
    formatDate(value) {
      return moment.utc(value).format(this.format);
    }
  }
});

<link href="https://cdn.jsdelivr.net/npm/vue-date-pick@1.2.1/dist/vueDatePick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-date-pick@1.2.1/dist/vueDatePick.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone.min.js"></script>

<div id='app'>
    <date-pick v-model="date" :format="format" :parse-date="parseDate" :format-date="formatDate"></date-pick>
    
</div>