I don't known how to set the option ngx-mydatepicker to get MM/yyyy. Please help me.
Thank you.
<input class="form-control" style="float:none" placeholder="mm/yyyy" ngx-mydatepicker name="mydate"
model="buyDate" [options]="myDatePickerOptions" #dp="ngx-mydatepicker" [(ngModel)]="date" [ngModelOptions]="{standalone: true}"/>
private myDatePickerOptions: INgxMyDpOptions = {
dateFormat: 'dd/mm/yyyy'
};
Looking at the code for formatting Link to code, the module does not allow you to have dates in that format. You will need to a custom formatting. Take a look at Angular2-moment
What is the initial format of your dates?
I just have a simple line of code like this:
<input type='date' min='1899-01-01' max='2000-01-01'></input>
Is there a simple way to set the max date to "today" instead of 2000-01-01? Or do I have to use Javascript to do this?
JavaScript only simple solution
datePickerId.max = new Date().toISOString().split("T")[0];
<input type="date" id="datePickerId" />
// below trick also works! Thanks jymbob for the comment.
datePickerId.max = new Date().toLocaleDateString('fr-ca')
You will need Javascript to do this:
HTML
<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>
JS
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + '-' + mm + '-' + dd;
document.getElementById("datefield").setAttribute("max", today);
JSFiddle demo
In lieu of Javascript, a shorter PHP-based solution could be:
<input type="date" name="date1" max="<?= date('Y-m-d'); ?>">
Javascript will be required; for example:
$(function(){
$('[type="date"]').prop('max', function(){
return new Date().toJSON().split('T')[0];
});
});
JSFiddle demo
toISOString() will give current UTC Date. So to get the current local time we have to get getTimezoneOffset() and subtract it from current time
document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
<input type="date" min='1899-01-01' id="dt" />
Is you don't want to use external scripts, but rather set the max limit right in the HTML input element, inline as so:
<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />
I've intentionally added the max attribute with a date far into the future, because it seems Chrome browser change the width of the field once a max attribute is set, so to avoid that, I had it pre-set.
See live demo
I am using Laravel 7.x with blade templating and I use:
<input ... max="{{ now()->toDateString('Y-m-d') }}">
Yes, and no. There are min and max attributes in HTML 5, but
The max attribute will not work for dates and time in Internet Explorer 10+ or Firefox, since IE 10+ and Firefox does not support these input types.
EDIT: Firefox now does support it
So if you are confused by the documentation of that attributes, yet it doesn't work, that's why.
See the W3 page for the versions.
I find it easiest to use Javascript, s the other answers say, since you can just use a pre-made module. Also, many Javascript date picker libraries have a min/max setting and have that nice calendar look.
An alternative to .split("T")[0] without creating a string array in memory, using String.slice():
new Date().toISOString().slice(0, -14)
datePickerId.max = new Date().toISOString().slice(0, -14);
<input type="date" id="datePickerId" />
Examples with jQuery and JavaScript:
$('#arrival_date').attr('min', new Date().toISOString().split('T')[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">
document.getElementById('arrival_date').setAttribute('min', new Date().toISOString().split('T')[0])
<input type="date" name="arrival_date" id="arrival_date" class="form-control" aria-label="...">
it can be useful :
If you want to do it with Symfony forms :
$today = new DateTime('now');
$formBuilder->add('startDate', DateType::class, array(
'widget' => 'single_text',
'data' => new \DateTime(),
'attr' => ['min' => $today->format('Y-m-d')]
));
A short but may be less readable version of one of the previous answers.
<script type="text/javascript">
$(document).ready(DOM_Load);
function DOM_Load (e) {
$("#datefield").on("click", dateOfBirth_Click);
}
function dateOfBirth_Click(e) {
let today = new Date();
$("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
}
</script>
Yes... you have to use Javascript. My solution below is just yet another option which you can pick up.
var today = new Date().toJSON().slice(0, 10);
var date = $('#date-picker');
date.attr('max', today);
Example with React
import Input from "./components/Input";
const DateInput = () => {
const today = new Date().toISOString().split("T")[0];
return <Input type="date" max={today} />
}
export default DateInput;
Template: ejs
Using Node.js, express.js and template System ejs:
<input id="picOfDayDate" type="date" name="date-today"
value="<%= new Date().toISOString().split("T")[0] %>"
min='1995-06-16'
max="<%= new Date().toISOString().split("T")[0] %>"
class="datepicker"
>
I also had same issue .I build it trough this way.I used struts 2 framework.
<script type="text/javascript">
$(document).ready(function () {
var year = (new Date).getFullYear();
$( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate:
0});
});
</script>
<s:textfield name="effectiveDate" cssClass="input-large"
key="label.warrantRateMappingToPropertyTypeForm.effectiveDate"
id="effectiveDateId" required="true"/>
This worked for me.
I want to ask how can I round the numbers inside an input, using angularjs
<input type="number" ng-model="value1"/>
I want the number to show 2 decimals with rounding.
Can you help please
Use $watch in this case will be more appropriate, It will tend to format value on initial load also.
Markup
<input type="number" ng-model="value1"/>
Code
$scope.$watch('value1',function(newVal, oldVal){
if((newVal != oldVal))
$scope.value1 = newVal? newVal.toFixed(2): 0;
});
You can use ng-change:
<input type="number" ng-model="value1" ng-change="roundNumber()" />
$scope.roundNumber = function(){
$scope.value1 = Math.round($scope.value1 * 100) / 100;
};
//call function once at bottom of controller for initial run
$scope.roundNumber();
Or create a directive to do it if this is going to be a common functionality you want
I have several <input> fields within a <form>. Angular takes the value from those fields regardless of the <form> (which is actually there only for Bootstrap to apply the right styles to inner fields).
Now, I want to be able to reset the fields, and so get Angular update the output associated to them as well. However, a regular <input type="reset"/> button is not working. It resets the values of all the <input> fields, but Angular is not refreshing the output that is based on the fields after it.
Is there any way to tell Angular to refresh the outputs based on the current state of the fields? Something like a ng-click="refresh()"?
Let's say you have your model called address. You have this HTML form.
<input [...] ng-model="address.name" />
<input [...] ng-model="address.street" />
<input [...] ng-model="address.postalCode" />
<input [...] ng-model="address.town" />
<input [...] ng-model="address.country" />
And you have this in your angular controller.
$scope.reset = function() {
$scope.defaultAddress = {};
$scope.resetAddress = function() {
$scope.address = angular.copy($scope.defaultAddress);
}
};
JSFiddle available here.
You should have your values tied to a model.
<input ng-model="myvalue">
Output: {{myvalue}}
$scope.refresh = function(){
delete $scope.myvalue;
}
JSFiddle: http://jsfiddle.net/V2LAv/
Also check out an example usage of $pristine here:
http://plnkr.co/edit/815Bml?p=preview
My code as follows,
ngOnInit() {
let now = new Date();
this.date = formatDate(now, "dd/mm/yyyy",'en-US');
console.log("dateFormat :",this.date);
}
My html:
<input type="date" [min]={{date}} id="App_Date" class="form-control" formControlName="App_Date">
So here Im getting the current date & trying to assign for min. But it is not working. Could somebody please help me with this?
I need to restrict the user to stop entering old dates. How can I achieve this?
Need to remove the timezone properties from the date object using split
ngOnInit() {
let now = new Date();
this.date = new Date().toJSON().split('T')[0];
console.log("dateFormat :",this.date);
}
And remove the curly brackets from the template
<input type="date" [min]="date" id="App_Date" class="form-control" formControlName="App_Date">
Use direct [min]="date" instead of [min]={{date}} in view.
<input type="date" [min]="date" id="App_Date" class="form-control" formControlName="App_Date">