How to manually set date format in matDatepicker (angular 4) - javascript

<mat-form-field>
<input matInput name=""
[matDatepicker]="myDatepicker"
[max]="maxDate"
placeholder="Select Date Of Birth"
id="dateOfBirth"
[value]="value"
onkeydown="return false" />
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker mat-open-on-focus></mat-datepicker>
</mat-form-field>
This is my snippet which is implemented for two-way binding.
Value return JS date object output as follow
Current output:
"Mon Jan 01 1900 00:00:00 GMT+0530 (India Standard Time)"
Required Output:
01/01/1990 (MM/DD/YYYY).
I have refer following links, but did not get expected output -
Angular 2 Material 2 datepicker date format

Related

I have tried to disabled past dates , now i want my "date_to" field dates greater than "date_from" field date

I want my departure date not greater than arrival date, like if i have selected 4 Aug on arrival, disable departure date less than that.
$(function(){
//arrival date
date_from.min = new Date().toISOString().split("T")[0];
//departure date
date_to.min = new Date().toISOString().split("T")[0];
})
<input type="date" class="tour-search-input" name="arrival" id="date_from" placeholder="DD/MM/YY">
<input type="date" class="tour-search-input" name="departure" id="date_to" placeholder="DD/MM/YY">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How to disable Values before Today in Mat-Date Picker

I have two Mat-Date Picker which I use to schedule work.
I want to apply a couple of custom validations such as User should not be able to select start date less than today's date and Start Date should be less than End Date.
I am having an issue in figuring out how to dynamically set start day less than the Current Date every day.
For eg: As on 30/03/2020 all dates before should be disabled. As on
31/032020 even today's date should be disabled.
My HTML Code:
<mat-form-field>
<mat-label>Start Date</mat-label>
<input
matInput
[matDatepicker]="picker"
formControlName="startDate"
readonly
/>
<mat-datepicker-toggle
matSuffix
[for]="picker"
></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Typescript Code:
this.Dategroup= new FormGroup({
startDate: new FormControl('', [Validators.required]),
endDate: new FormControl('', [Validators.required])
});
You just need to add min property to disable previous dates from today.
Example: In html
<mat-form-field>
<mat-label>Start Date</mat-label>
<input matInput [matDatepicker]="picker" [min]="minDate" formControlName="startDate" readonly />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
In your ts file:
Add minDate: Date;
constructor(){
this.minDate = new Date();
}

Validate input date in Javascript

I have the following code:
<div class="col-xs-2">
<div class="form-group">
<label>Fecha del evento</label>
<input type="date" class="form-control input-sm" id="txtfec" name="txtfec" value="<?php echo date('Y-m-d'); ?>"/>
</div>
</div>
I want to validate it so that I can only enter any dates 20 days after the current date for example.
date today Date save
2016/11/29 2016/12/19
Assuming date format would be yyyy/mm/dd
Add +20 to system date and convert the date to time(t1)
Convert user input(i.e date) to time(t2)
if t2 > t1 then input is greater than 20 days else its not
I think date picker plugins may solve your problem
https://eonasdan.github.io/bootstrap-datetimepicker/

Bootstrap 3 Datepicker v4 - Can't set date to values between 0 and 14400000

I'm using working with a javascript UI that includes Bootstrap 3 Datepicker v4. The data uses '0' as a special flag which gets assigned to the UI. I'm finding that trying to set the value of the field to 0 is not working, and on further investigation, it stretches to the point where it works at 14400000 but not at 13999999. What am I doing wrong, or what can I do differently to set the value to 0?
HTML:
<h1>Demo</h1>
<form class="form-group" onsubmit="return false;">
<div class="form-group">
<label for="enddate">End Date</label>
<div class='input-group date' id='enddate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<button id="zeroButton">Set Zero</button>
<button id="grossButton">Set Gross</button>
<button id="grosslessButton">Set Grossless</button>
<button id="todayButton">Set Today</button>
</button>
</button>
</form>
JS:
$(document).ready( function() {
$("#enddate").datetimepicker();
$("#zeroButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(0));
});
$("#grossButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(14400000));
});
$("#grosslessButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date(14399999));
});
$("#todayButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(new Date());
});
});
Check out the working version on the jsfiddle.
The Bootstrap 3 datetimepicker uses the moment library. Pass in a moment object instead of a date object:
$("#zeroButton").click(function() {
// set to Jan 1, 1970
$("#enddate").data("DateTimePicker").date(moment(0));
});

X-editable date format

I have the following JS and HTML for a X-editable date field. After I pick a date from the calendar popup, I will see "Wed Apr 13 2016 20:00:00 GMT-0400 (Eastern Standard Time)" as the new value in my input box. And It's not in the format "mm/dd/yyyy" that I have specified already.
<input style="background-color: rgb(255, 255, 255);"
title=""
data-original-title=""
class="editable editable-click dateinput form-control"
data-clear="false"
data-format="mm/dd/yyyy"
data-type="date"
id="my_date"
name="my_date"
required="required"
value="12/31/2016"
type="text">
<script>
$("#my_date").editable({
send: 'never',
success: function(response, newValue) {
$('#my_date').val(newValue);
}
});
</script>
Please try like this.Put a date format within the js file as shown below.
<script>
$("#my_date").editable({
format: 'mm/dd/yyyy',
send: 'never',
success: function(response, newValue) {
$('#my_date').val(newValue);
}
});
</script>

Categories