MaxApp/static/js/app.js

const MIN_DATE = dayjs("2014-01-01")
const RANGE_MAX = dayjs().diff(MIN_DATE,"d")
const coinTop50 = {
    data() {
      return {
        date :document.getElementById("startDate").innerText,
        items: [],
        rangeDate:RANGE_MAX,
        maxRange:RANGE_MAX,
        datepicker:null
      }
    },
    mounted() {
      this.requestData(this.date)
      const elems = document.querySelectorAll('.datepicker');
      this.datepicker = M.Datepicker.init(elems, {onClose:()=>{
        this.date = this.datepicker.date.toISOString().slice(0,10)
      }})[0];
    },
    watch:{
      date(newDate,oldDate){
        this.requestData(newDate)
      },
      rangeDate(newValue){
        this.date = MIN_DATE.add(newValue,"d").format("YYYY-MM-DD");
      }
    },
    methods:{
      requestData(sDate){
        const d = new Date(sDate)
        const url = `/top50json/${d.getDate()}-${("0"+(d.getMonth()+1)).slice(-2)}-${d.getFullYear()}/`;
        axios.get(url)
            .then(this.handleJsonUpdate)
      },
      handleJsonUpdate(response){
        this.items = response.data
      },
      displayRoundedPrice(price){
        var precision = -Math.floor( Math.log10(price) + 1);
        return Math.round(item.prices.toFixed(precision)).toLocaleString();
      }
    }
  }
Vue.createApp(coinTop50).mount('#app')