Tips for adjusting the day layout (M to Mo, F to Fr, etc.) in Vuetify's date and month pickers

I am attempting to modify the format of days in the Date/month picker component. Currently, the list of days is displayed as "M,T,W,T,F,S,S", but I need it to be "Mo,Tu,We,Th,Fr,Sa,Su". In the API documentation for Vuetify, I noticed a parameter called "day-format" with a value of null (default). Can someone please clarify if it is possible to change this format of days?

For more information, refer to the Vuetify API documentation: https://vuetifyjs.com/en/components/date-pickers#date-month-pickers

javascriptvue.jsdatepickervuetify.js

Answer №1

  • Utilize the weekday-format to send the date to a specific function;
  • Transform the date into the corresponding day of the week (0..6)
  • Use this as the key for an array of strings ('Mo'..'Su')

example:

<div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker :weekday-format="getDay" v-model="picker"></v-date-picker>
    </v-row>
  </v-app>
</div>

const daysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date().toISOString().substr(0, 10),
    }
  },
  methods:{
    getDay(date){
      let i = new Date(date).getDay(date)
      return daysOfWeek[i]
    }
  }
})

Answer №2

There are various approaches to solve this issue, but I decided to investigate the source code in order to understand more about the properties being passed into the weekday-format attribute:

<div>
  <v-calendar
    :weekday-format="formatWeekDay"
  />
</div>

const calendar = {
  name: 'Calendar',
  methods: {

    formatWeekDay(props) {
      return new Date(props.date.replace(/-/g, '\/')).toLocaleDateString('en-US', {weekday: 'narrow'});
    }

  }
};

I referred to this solution for guidance on how to properly interpret the date provided. For more information on how locale functionality operates, you can visit this link.

Answer №3

Passing the date to a function using the first-day-of-week parameter

<v-date-picker v-model="date" :first-day-of-week="1">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to click on options field for selection

My collection consists of various countries const countries = [{ name: 'United States', value: 'US', currency: 'USD' }, { name: 'Israle', value: 'IL', currency: 'ILS' }, { name: 'Unit ...

javascriptreactjs

The layout option is not specified within the ejs-mate package

error boilerplate I am baffled as to why the layout is not being defined. I have installed ejs-mate and ejs, yet it still gives this error. <% layout('layouts/boilerplate') %> <h1>All campgrounds </h1> <div> <a ...

javascripthtmlnode.jsejs

Increase the value of X within the given string

I am working on developing an application that transforms the initial string: 1.2.3.X Into multiple strings: 1.2.3.0 1.2.3.1 1.2.3.2 1.2.3.3 1.2.3.4 ...... This is a snippet of the code I have written so far: String.prototype.count=function(c ...

javascriptarrays

Achieving automatic restarts with grunt-express when files are updated

I am working on implementing grunt-express and grunt-watch in my project. My goal is to have the server automatically reload whenever I make changes to my server file. Below is the setup I currently have: Gruntfile.js var path = require('path' ...

javascriptnode.jsexpressgruntjsgrunt-express

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

javascripthtmlcss

Understanding the behavior of a React component when passed as a prop

Typically, components are passed down as children to another component. However, I have noticed in some UI libraries that components can also be passed using standard named props. I attempted this approach myself but encountered some limitations without an ...

javascriptreactjs

Enhancing the content of a field - React

Seeking assistance with populating an input field with a generated password in my React component. Currently, the password is showing as undefined. MainComponent.js - primary React component class MainComponent extends React.Component { state = { p ...

javascriptreactjs

How come once I close a PrimeNG modal that is defined within a child component, I am unable to reopen it?

Currently, I am developing an Angular application that utilizes PrimeNG. In the process, I encountered a challenge. Initially, I had a component with a PrimeNG Dialog embedded within (refer to this link), and it was functioning properly. To streamline my ...

javascriptangularprimengangular-components

Tips for seamlessly transitioning <img src="..." /> using jQuery?

Currently, I am working on the following code snippet: $img.hover(function(){$(this).attr('src','1.jpg')},function(){$(this).attr('src','2.jpg')}); However, this is not providing a smooth transition as it takes a c ...

javascriptjqueryimage

What is causing Flask to not maintain sessions when using VueJS with `npm run serve` frontend server?

I am currently working on a project that involves Flask and Rest-Plus on the backend, with VueJS frontend generated by VueCLI 3. One challenge I am facing is setting up sessions using Flask-Session. Unfortunately, session variables saved in one request ar ...

vue.jssessionflaskflask-restplus

The custom event for dynamic page navigation fails to trigger

I have designed a simple button: <button type="button" class="btn btn-success link-accept" data-id="16">Accept</button> along with its corresponding listener: $(document).ready(function() { $('.link-accept').on('click&apo ...

javascriptjqueryajax

How to Delete Elements from an ngList Array in Angular

I encountered an issue while utilizing ngList in a text box to exchange data with my server. The problem arises when I attempt to delete items from the generated array directly, as it does not reflect the changes in the input field. The main concern is th ...

javascriptangularjs

Exploring the near method to Parse.Query a class

I'm currently working on my first iOS application, which allows users to add annotations to a map for others to view. In this project, I have decided to utilize Parse as the backend service. What I already have: There is a class called "Pins" in Par ...

javascriptnode.jsexpressparse-platform

Dealing with jEditable response challenges

Having a collection of HTML, here is an example snippet: <tr> <td>Name of Organisation:</td> <td class="edtext" id="organisation"><?=$aRes[0]['organisation']?></td> </tr> At the top of the page, this ...

javascriptjsonjeditable

Executing a function without using the eval() function

I am currently working on a JavaScript code that relies heavily on the eval function. eval(myString) The value of myString is equal to myFunc(arg), and I would like to find a way to call myFunc directly instead of using eval. Unfortunately, I have no co ...

javascripteval

I'm unsure of which tools and languages to use for web development. Can you provide

My journey into programming began in January of this year, and I have made significant progress since then. I have gained knowledge in JavaScript, Ruby on Rails, HTML, CSS, jQuery, and occasionally dabble in Clojure. However, my true passion lies in JavaSc ...

phpjavascriptruby-on-rails

Tutorial on creating a subset of a series using jqplot

I am looking to display three series on the same canvas. The series are defined as follows: rec1 = [0, 0, 150, 200, 0 ]; rec2 = [60, 120, 179, 240, 300]; rec3 = [50, 100, 150, 200, 250]; Below are the source codes I am using to draw these series. $ ...

javascriptjqplot

Cube.js Highlights of the Week and Month

How can I calculate metrics (count, sum) for specific time periods like Today/This Week/This Month/Last Month in Cube.js? I attempted to use rollingWindow but it did not provide me with the correct data. The documentation is a bit unclear to me. For a cle ...

javascriptsqlvue.jssequelize.jscube.js

Express does not provide a 304 response code for static json files

I have a situation where I am utilizing express.static to serve a large static json file. It seems that express.static is always returning a 200 status code for the static json file, even when it remains unchanged. Given the file's size and the speci ...

javascriptjsonnode.jsexpress

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6