Develop Reference

react js date format using java script

I am using react js for my form. currently i am loading my date to the text box. but currently its show with different format please check this
<Form.Control
type="text" disabled
size="sm"
placeholder=""
name="termDate"
onChange={handleChange}
value={values.termDate}
/>
I am setting the value using the code given below:
setFieldValue('termDate', dataObj.termDate);
when I use the above code, textbox date load as below.
I need to load this date as 2021-07-07.
How do I format this before loading it to the textbox?

Use momentjs. This oneliner will help
moment(dataObj.termDate).format("YYYY-MM-DD");

Disable Previous Dates in Datepicker with Javascript

I Am Kinda New in Javascript and I want to Disable Previous Dates from Today
I used this code to display Datepicker
<input type="text" onfocus="(this.type='date')" id="leaveTo" name="leaveTo" placeholder="DD-MM-YYYY" style="width:fit-content;">

If I got your question right, you need to make some dates to be unselectable.
That can be done by using max, min attributes.
For more information take a look: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Additional_attributes
<input type="date" min="2020-12-23">

Manual typing format of date

I am using ng-pick-datetime for selecting and displaying dates. I have changed to format of the date to DD/MM/YYYY using dateTimeAdapter.setLocale('en-IN') in constructor. If I click the calendar and select the date Its in format of DD/MM/YYYY but If I manually type 03/28/2019, it still accepts. I want to restrict other format except DD/MM/YYYY even on typing. Please help me out.
Code
<input (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
<owl-date-time class="" [pickerType]="'calendar'" [startView]="'multi-years'" #dt1></owl-date-time>
import { DateTimeAdapter } from 'ng-pick-datetime';
constructor(dateTimeAdapter: DateTimeAdapter<any>){dateTimeAdapter.setLocale('en-IN');}

There are several ways to validate your input. Here I have provided solution to your problem.
https://stackblitz.com/edit/ng-pick-datetime-format-i18n-qwhyb3?embed=1&file=src/app/app.component.html
I have added type of input as "text", pattern as you needed "DD/MM/YYYY" and background css to get valid and invalid status of input tag.
<input type="text" pattern="^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$" (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>

date format of textfield using java script and php

i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.

I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>

You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.

How to block writing in input text?

I just creating a booking system and I want that the users will choose a date from the calender and it'll show in input text - that I did!
Now I want to block the writing in the input text (just bring to calender writes there when the user choose a date).
How do I do it? I guess JavaScript, but how? I dont know JS very wall..
Thank you very much!

Give your element the readonly attribute, this will disallow users to type anything into it. However, you will still be able to write to add through javascript for example when a date is chosen. Here is an example:
<input type="text" id="txt" readonly="readonly">
JavaScript:
var el = document.getElementById('txt');
el.value = "Testing......";
Working Demo

<input type="text" id="someId" disabled="disabled" />
The disabled property will prevent any user input, but you can still write to it via your javascript calendar method.

For those who wants to prevent typing but not having the disabled style, can try:
<input type="text" onkeypress="return false;"/>