Angular 2 auto date-picker date in form - javascript

I would like to insert date-picker into my form, which shows me automatically today's date without choosing a date. The from below makes you choose the date, any one can help me please with that..
<div class="form-group">
<label class="container" for="name">Erän saapumispäivä :</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="Entery_Date"
[(ngModel)]="addProduct.Entery_Date" name="Entery_Date" #Entery_Date="ngModel">
<div *ngIf="Entery_Date.errors && (Entery_Date.dirty || Entery_Date.touched)" class="alert alert-danger">
<div [hidden]="!Entery_Date.errors.required">
Erän saapumispäivä on pakollinen!
</div>
</div>
</div>

It is a good idea to use material Date Picker (https://material.angular.io/components/datepicker/overview)
It should meet all your requirements

Please take a look to the below example.
<input name="dateInput" type="date" ng-model="date"/>
Now, in your controller use the below code:
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
if (month<10){
month="0" + month;
};
var day=d.getDate();
$scope.date=year + "-" + month + "-" + day;
Hope this will work :)

Related

recalculating values based on number of days and show them on text fields

I have a php page.
There are two date fields on my page and 10 input fields showing various charges.
On selecting check-in and check-out date and clicking submit button, it calculates number of days. Im using moment js for that.
Once number of days are calculated, I want value of all text fields like rent and others to be multiplied by number of days and show the value in respective fields. This is my php page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
From: <input id="fromDate" type='date' />
To: <input id="toDate" type='date' />
<button id="btn">Submit</button><hr />
<p id="result"></p>
<script>
$("#btn").on('click', function(e) {
var fromDate = $('#fromDate').val(),
toDate = $('#toDate').val(),
from, to, duration;
from = moment(fromDate, 'MM-DD-YYYY');
to = moment(toDate, 'MM-DD-YYYY');
/* using diff */
duration = to.diff(from, 'days')
/* show the result */
$('#result').text(duration + ' days');
});
</script>
Here is one of the fields whose value I want to be updated
<div class="form-group">
<div class="row">
<div class="control-label col-sm-4"><b>Room Rent :</b></div>
<div class="col-sm-4">
<input text="text" name="ipt_item_1" id="ipt_item_1"
value="1500">
<div class="col-sm-2"><input type="checkbox" name="chk_item_1"
class="chk-amount" data-target="ipt_item_1"></div>
</div>
</div>
</div>
I don't know how to do it.
Any suggestions would be appreciated.
Thanks

Compare HTML5 date input with Angular2 date

I wanted compare the date (input type="date" in HTML5) with the date Objekt in Angular2 but there is no way to compare them. I there a easy way to do it ?
<label> Create Date: </label>
<input class="form-control" [ngModel]="chart.createDate"
(ngModelChange)="chart.createDate = $event"
type="date"
data-date="" data-date-format="DD MMMM YYYY"
required #createDate="ngModel" name="createDate"/>
<div *ngIf="Date.parse(chart.createDate).getTime() < dateControll.getTime()">
- date is older than today
</div>
I did it like this:
if (varDate1.valueOf() > varDate2.valueOf()) {
// do this and that...
}
but both needs to be defined as Date in Angular...

Limit(disable days buttons) bootstrap-datepicker calendar date(date_stop can't be < date_start)

How can I limit(disable days buttons) bootstrap-datepicker(not jQuery Datapicker) calendar date in this way:
id_date_stop can't be < id_date_start so
if I select date_start as
06-05-2016, date_stop can't be earlier than 06-05-2016.
It can be
from 06-05-2016 to 10-05-2016(todays date).
my html:
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_start" name="data_start" type="text">
<div class="input-group-addon"></div>
</div>
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_stop" name="date_stop" type="text">
<div class="input-group-addon"></div>
</div>
You can use jQuery combined with the methods available from bootstrap-datepicker to set the start and end dates.
Sample code would look like this
$('#id_date_start').datepicker({autoClose: true}).on('changeDate',function(e) {
$('#id_date_stop').datepicker({autoClose: true}).datepicker('setStartDate', e.date)
.datepicker('setEndDate', new Date());
})
This code will set a start date for the 'date_stop' datepicker based on your start date selected, and will set the end date to today's date.
I am using the line $('#id_date_start').datepicker({autoClose: true}) before the method calls, to ensure that the datepicker object is initialized. This will ensure that the methods will fire correctly.
Here is a sample fiddle.

Clear the value in a datetimepicker field

I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.
All I need to do - is - When a button on the screen is clicked, clear some of the input field on the form back to their original values.
This is working fine, for all fields except a datetimepicker field.
Here is the relevant bits of code, that defines the input field :
<div class='form-group' id='START_DATEFormGroup'>
<label for='START_DATE' class='col-sm-2 control-label' data-toggle='tooltip' data-placement='top' title=''>Start Date</label>
<div class='col-sm-8'>
<div class='input-group date form_date col-sm-3' data-date-format='dd M yyyy' data-link-field='START_DATE' data-link-format='yyyy-mm-dd'>
<input class='form-control' size='16' type='text' />
<input type='hidden' id='START_DATE' name='START_DATE' />
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'>
</span> // group-addon
</span> // calendar
</div> // form_date
</div> // col-sm-8
</div> // form-group
I am initializing datetimepicker as follows :
function enableDatepicker(){
$( document ).ready(function() {
$('.form_date').datetimepicker({
format: 'dd M yyyy',
minView: 2,
autoclose: 1,
})
});
}
To clear the input fields down I have :
function clearActionForm(){
// code here to clear the various input fields to null or their initial values.
// Need statements to clear the datetimepicker field to null.
}
So, can someone give me the line(s) of code I need to insert into clearActionForm() in order to clear the START_DATE field to null.
Thanks.
If you are using the eonasdan datetimepicker use the following:
// clears
$("#form_date").data("DateTimePicker").date(null);
// updates with date
$("#form_date").data("DateTimePicker").date(new Date());
// or update with string
var myCoolDate = "27 05 1975";
$("#form_date").data("DateTimePicker").date(myCoolDate);
// or update with a moment
var moment = moment().add(2, 'd');
$("#form_date").data("DateTimePicker").date(moment);
Below is a demo of using different types of changes.
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'dd M YYYY',
});
});
$('#clear').click(function() {
$("#datetimepicker1").data("DateTimePicker").date(null);
})
$('#date').click(function() {
var sysdate = new Date();
$("#datetimepicker1").data("DateTimePicker").date(new Date());
})
$('#string').click(function() {
var myCoolDate = "27 05 1975";
$("#datetimepicker1").data("DateTimePicker").date(myCoolDate);
})
$('#moment').click(function() {
var now = moment().add(2, 'd');
$("#datetimepicker1").data("DateTimePicker").date(now);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<input type='button' id='clear' Value='Clear Date'>
<input type='button' id='date' Value='Set with date'>
<input type='button' id='string' Value='Set with string'>
<input type='button' id='moment' Value='Set with moment'>
use this line $('.form_date').data("DateTimePicker").clear()
Demo
Easy way to rest the selected date as well as highlighted date by below concept
$('#txtWQApprovalDate').datepicker('setDate', null).datepicker('fill');
Assuming that you are using the datetimepicker plugin from xdsoft.net/jqplugins/datetimepicker, one quick way to clear the datetimepicker's current value would be the following:
$('.form_date').val('');
As an alternative (this sets the value of the datetimepicker to the current time):
$('.form_date').datetimepicker({
value: (new Date()).toLocaleString()
});
This value does not not match the format of the datetimepicker, but will be converted to the correct format automatically when the datetimepicker is used.
If you are using the eonasdan datetimepicker use the following:
// clears
$j(".form_date").data("DateTimePicker").setDate(null);
// updates to now
$j(".form_date").data("DateTimePicker").setDate(new Date());
// or update to a given date
var myCoolDate = "05/27/1975";
$j(".form_date").data("DateTimePicker").setDate(myCoolDate);

DateJS: Var Passed to JS Are Not Calculating Correctly

I am trying to do some simple calculations, I need to take a date and add x-months to that date. After searching, I decided to use DateJS to account for edge dates.
I set up a form that allows the user to enter the date and amount of months. On a keyup function, it calculates the new date. The issue is it's not calculating correctly.
I can pass the date from the form to the JS and manually specify the months in JS and it calculates correctly. If I pass both the date and months from the form the calculation is off by a lot. Years in fact!
If I replace $("#monthincrease").val() with a hard coded number the calculation works fine. But not when using data from the form.
<div class="container">
<div class="jumbotron">
<h1>Future Date Calculator</h1>
<p>To calculate a future date, enter a start date and the amount of months to add.</p>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" id="startdate">
</div>
<div class="form-group">
<label for="monthincrease"> And Months To Add:</label>
<input type="number" class="form-control" id="monthincrease">
</div>
</form>
<p>Date: <span class="futuredate"></span></p>
<p>Month: <span class="month"></span></p>
</div>
</div>
<script type="text/javascript">
$("#monthincrease").on('keyup',function() {
var newDate = Date.parse( $("#startdate").val() ).addMonths( $("#monthincrease").val() );
$(".futuredate").html(newDate);
$(".month").html( $("#monthincrease").val() );
});
</script>
This is my updated code.
<div class="container">
<div class="jumbotron">
<h1>Future Date Calculator</h1>
<p>To calculate a future date, enter a start date and the amount of months to add.</p>
</div>
<div class="row">
<div class="col-lg-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" id="startdate">
</div>
<div class="form-group">
<label for="monthincrease"> And Months To Add:</label>
<input type="number" class="form-control" id="monthincrease">
</div>
</form>
<p>Date: <span class="futuredate"></span></p>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$("#monthincrease").on('keyup',function() {
var incMonths = $("#monthincrease").val();
var startDate = $("#startdate").val();
var newDate = new Date.parseExact( startDate, "yyyy-MM-dd" ).addMonths( incMonths );
$(".futuredate").html(newDate);
console.log(incMonths);
console.log(startDate);
console.log(newDate);
});
});
</script>
</div>
I change the var to var incMonths = Number( $("#monthincrease").val() ); which converted the form input into a number. Works now.
Try putting in your event code in document.ready block. Also for correct calculation use parseExact method of DateJS library and specify the format in which date will be entered in textbox. https://code.google.com/p/datejs/wiki/APIDocumentation
Updated:
$( document ).ready(function() {
$("#monthincrease").on('keyup',function() {
var incMonths = $("#monthincrease").val();
var startDate = $("#startdate").val();
var newDate = new Date.parseExact( startDate, "M/d/yyyy" ).addMonths( parseInt(incMonths ));
$(".futuredate").html(newDate);
});
});
I corrected the date format and used parseInt for months field. Try it now.

Categories

Resources