Yêu cầu thg 8 22, 2022 7:25 SA 103 0 1
  • 103 0 1
+1

Cách sử dụng moment.js để hiển thị thời gian?

Chia sẻ
  • 103 0 1

Em đang làm một chức năng nhỏ là tính thời gian cách từ lúc dữ liệu đc create đến thời điểm hiện tại và em đang sử dụng thư viện momentjs, sau đây là đoạn code của em:

 momentTime() {
      return (this.tickTime = moment(this.jobinfos.created_at)
        .startOf("day")
        .fromNow());
    },

tuy nhiên hình như thuật toán em đang thiếu cái gì đó khi nó chỉ báo thời gian tối đa là 24h hour ago sau 24h nó lại quay trở lại 1 hour ago chứ không tiếp tục đến ví dụ 1 day ago như em mong muốn.... Mong được sự chỉ giáo của mn e cảm ơn!!!

1 CÂU TRẢ LỜI


Đã trả lời thg 8 22, 2022 7:34 SA
Đã được chấp nhận
+1

bác dùng thử như bên dưới xem được không?

moment(this.jobinfos.created_at).fromNow(true);
// or
moment(this.jobinfos.created_at).fromNow();
Chia sẻ
Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 7:40 SA

Em có fix theo bác r nhưng ngày create time của em hơn 1 tháng r nó vẫn hiện 15 hour ago bác ạ, em không biết như thế nào nữa nhưng cứ qua 24hour nó lên 1 day là dc á bác :V

thg 8 22, 2022 7:40 SA

@binchanhkun99 bác gửi e dữ liệu created_at xem nó ntn

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 7:46 SA

@dangcq17 nó dạng ntn bác ạ :3 có khi nào e lại lú ko ta kiểu ntn chắc thằng moment nó không hiểu r chắc phải convert nữa hay ntn bác nhỉ? "createdAt": "2022-07-25T02:30:17.313Z",

thg 8 22, 2022 7:50 SA

@binchanhkun99 em test được mà bác ✌️

var now = moment('2022-08-22T02:30:17.313Z').fromNow();
console.log(now);

Screenshot from 2022-08-22 14-49-34.png

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 8:17 SA

@dangcq17 vâng bác có vẻ như nó ko đọc đc thằng jobinfos bác ạ... em call api ở methods r mới qua mouted để cho chạy cái methods đó, em thử log thằng this.jobinfos.created_at thì ra undefine 😦

thg 8 22, 2022 8:18 SA

@binchanhkun99 bac đưa code lên em xem thử nó lỗi ở đâu. Không thì bác log ra thằng data sau khi call bằng axios về debug xem

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 8:25 SA

@dangcq17 code e hơi luộm thuộm bác có thể xem qua và hỗ trợ là e vui r =))

import "../assets/style.css";
import "../assets/job.css";
import request from "@/utils/request";
import moment from "moment";
export default {
  name: "jobs",
  components: {},
  data() {
    return {
      totalJobs: null,
      tickTime: "",
      currentPage: 1,
      perPage: 4,
      checks: ["All", "Developer", "Tester", "Designer", "Support"],
      jobinfos: [],
      showJobs: [],
      selected: "All",
    };
  },
  computed: {
    //Pagination
    jobs() {
      return this.showJobs.slice(
        (this.currentPage - 1) * this.perPage,
        this.currentPage * this.perPage
      );
    },
    rows() {
      return this.showJobs.length;
    },

    //bad code, fix later
   momentTime() {
      return (moment(this.jobinfos.created_at)
        .fromNow(true));
    },
  },
  watch: {
    // selected(newVal) {
    //   if (newVal === "All") {
    //     return this.jobinfos;
    //   } else {
    //     return this.jobinfos.filter((i) => i.Genres === newVal);
    //   }
    // },
        
  },

  async mounted() {
      this.getJobs();
     
   // event enter
    var self = this;
    window.addEventListener("keyup", function (event) {
      if (event.keyCode === 13) {
        self.searchJob();
      }
    });
  },
  methods: {
    async getJobs() {
      await request
        .get(
          `jobs`
        )
        .then((response) => {
          this.jobinfos = response.data;
          this.showJobs = response.data;
          this.totalJobs = response.data.length;
           
        })
        .catch((e) => {});
    },


  },
};
thg 8 22, 2022 8:30 SA

@binchanhkun99 em đang thấy là bác để init data của jobinfos là mảng mà trong computed bác trỏ như thế là không được rồi vì nó không phải object. Nếu bác chỉ đơn giản là hiển thị lên view thì bác để trong methods xong trên view bác v-for rồi truyền từng thằng jobinfor vào hàm đó là được.

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 8:40 SA

@dangcq17 tức là trên view em tạo ra 1 cái sự kiện kiểu @click="momentTime(item.create_at)" à bác? >_>

thg 8 22, 2022 8:44 SA

@binchanhkun99 kiểu như này ấy bác

<span v-for="item in jobinfos" :key="item.id">
    {{  momentTime(item.created_at)  }}
</span>
Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 8:48 SA

@dangcq17 Vâng bác, ở dưới methods em có để ntn nhưng nó vẫn chưa chạy không biết e còn sai chỗ nào bác nhỉ? :V

    momentTime(time) {
      return moment(time).fromNow(true);
    },
thg 8 22, 2022 8:52 SA

@binchanhkun99 phần <template> của bác ntn nhỉ và cái jobinfos có đúng là mảng không. Hiện phần console của bác có lỗi gì k?

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 8:59 SA

@dangcq17 trang này khá là phức tạp bác ạ vì còn cần filter và search theo filter nữa á bác

image.png

đây là e v-for ra cái job đã đc xử lý để làm phân trang...

image.png

Chỗ hiện time e để ntn...

image.png

Đây là phần methods đó bác ạ

thg 8 22, 2022 9:01 SA

@binchanhkun99 em đang thấy bác lặp mảng jobs chứ không phải jobsinfor và trong hàm momentTime bác log ra thằng time xem nó đã đúng là time string chưa và thằng momentTime đã nằm trong methods chưa

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 9:05 SA

@dangcq17 vâng jobs vì em phải xử lý phân trang ấy bác nó sẽ ntn:

image.png

còn e log thì nó vẫn ra undefine bác ạ 😥

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 9:06 SA

@dangcq17 à showjobs là vì sau khi xử lý tìm kiếm của jobinfor r ý bác😅

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 9:17 SA
Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 9:19 SA

@dangcq17 À đc rồi b✌️ ơi :V em để nhầm cái đối tượng trong dtb =]] à thằng moment này có tiếng Việt không bác nhỉ? :v

thg 8 22, 2022 9:20 SA

@binchanhkun99 em chưa dùng thằng này nhiều nhưng theo em thấy trên docs là có nhé bác https://momentjs.com/docs/#/i18n/

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 22, 2022 9:28 SA

@dangcq17 Vâng đây rồi bác ạ nhưng thiệt là thất vọng quá nó dịch ra ntn thì em chịu rồi 😅

image.png

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí