Отформатированная дата для vue -даты выбора на 1 день больше - PullRequest
1 голос
/ 31 января 2020

В моем проекте vue / cli 4 / vuex / bootstrap - vue я устанавливаю средство выбора даты в произвольном формате, как здесь https://dbrekalo.github.io/vue-date-pick/examples.html#custom -date-parser

Я использую момент / момент-часовой пояс в своем проекте, поэтому я не хочу использовать 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",

Почему ошибка и как ее можно исправить?


MODIFIED BLOCK 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

Я искал, как получить часовой пояс из клиентского браузера и обнаружил получить часовой пояс клиента из браузера ветку и проверить:

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 дней. Что это? Какой-нибудь вариант с нулевым днем?

1 Ответ

1 голос
/ 15 февраля 2020

Ваша проблема связана с автоматическим форматированием c локализации. Я тоже не понимаю, почему это происходит, так как мы предоставляем только даты, они должны рассматриваться как таковые независимо от нашего часового пояса. Но чтобы решить эту проблему, мы должны прочитать его как UT C с moment.utc(), а затем отформатировать, используя желаемый формат.

Из vue -date-pick docs пример Я разработал решение, используя момент.

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>
...