react js date format using java script - javascript

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");

Related

Set a Default current Datetime in datetime-local using Angularjs

I am new to HTML. I am stuck in a very simple problem. I am using datetime-local input type in a web application.
I just want to define a default current value for the datetime. Any ideas
HTML Code
<input type="datetime-local" value="row.ActivityDate" ng-disabled="row.chkDateTime == false" ej-datetimepicker ng-init="row.ActivityDate=''" ng-model="row.ActivityDate" class="form-control date"
id="ptDateTimePicker{{$index}}" ng-required="true" ng-change="ejDTonChange(row.ActivityDate, $index)">
im try to insert some queris but i want shows in html

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>

Simple javascript datepicker

Working on a simple javascript datepicker. Found one good here: http://www.monkeyphysics.com/mootools/script/2/datepicker#examples
So I am trying it to work but as you can see its not working:
http://jsfiddle.net/R4JZ6/
Can you not just use a simple HTML date input type?
Like this:
<input name='date_B' type='date' value='' class='date demo'/>
As you can see all I did was change the input type to date rather than text.

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.

Categories

Resources