Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

luarsab's avatar

input date format DD-MM-YY javascript/VueJS

Hello, i am working on vueJS and want to make my input date input to be dd mm year (basically its mm dd year) how can i do this? i and also how to change placeholder for it?

i want to make input, with placeholder like "hello", and also when someone pick the date, date should be dd mm year

i think i need moment.js

0 likes
11 replies
johnDoe220's avatar
<input type="date" value="2022-07-22" min="1997-10-20" max="2022-07-22">
// more information
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
johnDoe220's avatar

@luarsab

let dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';
luarsab's avatar

@johnDoe220 sends me an error vue-router.esm-bundler.js:3325 TypeError: Cannot set properties of null (setting 'value')

johnDoe220's avatar

@luarsab I did it right now and it worked, send the error you received in full. Note: Note that you can only set the date value as the default value

luarsab's avatar

@johnDoe220 i have something like this

        <Field
      name="covid_sickness_date"
      class="pl-4 pr-96 py-3 border-black border-2"
      rules="required"
      type="date"
      min="1997-10-20"
      max="2022-07-22"
     id='gin'
      v-model="this.$store.state.data.covid_sickness_date"
    />
and then i write in the script tags the next
        <code>
import { Field, ErrorMessage } from "vee-validate";
  import moment from "moment";
          export default {
             components: {
             Field,
         ErrorMessage,
           },
         };
             let dateControl = document.getElementById("#gin");
               dateControl.value = "2017-06-01";

 </code>
johnDoe220's avatar

for test create main.js file and write this code and linked to file

let dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';

if solved, use vue to change value

const app = Vue.createApp({
	data(){
		return {
			type: '2017-06-01'
		},
	}
});
<input type="date" :value="type" min="1997-10-20" max="2022-07-22">
luarsab's avatar

@johnDoe220 but i dont get how this will make my value be in DD-MM-YYYY format instead of default MM-DD-YYYY? i dont want to make EXACT value as 2017-06-01 (for example) i want when someone will choose the date, date should be im DD MM YYYY format. or you just show me how to make just value(from my question 1/2) ?

luarsab's avatar

@johnDoe220 No. when user choose a value for my date input, it is automatically recognized as MM-DD-YYYY For example it will be: 12-25-2021, but i want it to be DD-MM-YYYY , for example : 25-12-2021 .

Please or to participate in this conversation.