Angular Material design date format - javascript

I'm working with angular material design. (https://material.angularjs.org/#/) I have the following piece of code:
<md-input-container padding>
<label>Some date</label>
<input ng-model="searchQuery.SomeDate" type="date" name="invoiceDate" />
</md-input-container>
This gives me a very nice text-box with a datepicker. The user is able to type the date manually or pick a date from the datepicker. Problem is that based on the ui culture the user must type in either dd-MM-yyyy format or MM-dd-yyyy format.
I do not want this. I want to force the dd-MM-yyyy format. But I don't know how to. Do you?
Thanks in advance!

If you include a script from i18n, you can directly set your date param to your country's convention.
This is the list of files : https://code.angularjs.org/1.0.8/i18n/
Then a simple include will work :
<script src="http://code.angularjs.org/1.0.8/i18n/angular-locale_XXXX.js"></script>

You want something like this:
User sees dd/MM/yyyy, but in program it is a date?
I use it like this:
<span class="input-group">
<input type="text" datepicker-popup="dd/MM/yyyy" is-open="opened" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
and data sent into model is formated after dd/MM/yyyy

Related

How supply string as input for Ngbdatepicker in Angular 8

We are using ngbDatePicker in our application. From backend getting date as a string
and ngbDatePicker work with {year: Value, month: Value, day: Value}.
<div class="input-group">
<input class="form-control"
placeholder="yy/mm/dd"
[(ngModel)]="registerDate"
ngbDatepicker
#d="ngbDatepicker" >
<button class="input-group-addon" (click)="d.toggle()" type="button">
<i class="fa fa-calendar"></i>
</button>
</div>
Here registerDate value coming as string.
its not reading string formate how come i make it readble by ngbDatepicker.
I would suggest you splitting up your [(ngModel)] into two parts (See here How [ngModel] and (ngModelChange) work together?).
Then you could do something like this:
<input class="form-control"
placeholder="yy/mm/dd"
[ngModel]="getDateAsObject()"
(ngModelChange)="writeDateToString($event)"
ngbDatepicker
#d="ngbDatepicker">
Or you could just temporarily save it in the given format and only transform it to string when needed. Then you could stick to [(ngModel)]... and it would also be more performant.

Bootstrap 4 datetimepicker - How can I display date format differently between value for sending?

I have a datetimepicker() ID's start_date that same an input name. In props, format YYYY-MM-DD. I want to use this format for my API but in an input DOM, my user going to looking like DD-MM-YYYY.
$('#start_date').datetimepicker({
format: 'YYYY-MM-DD'
});
This code has I used but my expectation as display the date & month & year (DD-MM-YYYY) and actually the value that is the year & month & date (YYYY-MM-DD). When I get $('#start_date').val() should be return YYYY-MM-DD.
EDIT:
the example code is now I used. so this's what I want.
<div class="input-group date" id="start_date">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt"></i>
</span>
</div>
<input type="text" name="start_date" class="form-control"/>
</div>
## jquery
$('#start_date').datetimepicker({
// display --> DD-MM-YYYY
// value --> YYYY-MM-DD
});
$('#start_date').val().format("YYYY-MM-DD")
Will return what you are looking for even if the object has been initialized using a different format.

How to get the date from the date picker in django

I am trying to get the date from the user using date picker in django. But I am just getting none despite user picking up a date . I followed this tutorial https://simpleisbetterthancomplex.com/tutorial/2019/01/03/how-to-use-date-picker-with-django.html
I am trying to get the date using the cleaned.data.
date = form.cleaned_data['date']
How do I get the date user selects. Also, I want the hour and minute field in date picker
This is my date field in the form (I am using forms.form)
class DateForm(forms.Form):
date = forms.DateTimeField(
input_formats=['%d/%m/%Y %H:%M'],
widget=forms.DateTimeInput(attrs={
'class': 'form-control datetimepicker-input',
'data-target': '#datetimepicker1'
})
)
Here is the code in my HTML file
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script>
$(function () {
$("#datetimepicker1").datetimepicker();
});
</script>
You have manually added the <input> to the HTML, but missed the important name parameter. Without this, the field value isn't included in the POST and the server never sees it.
Add name="date" and it should work ok.
The tutorial used {{ form.date }} for a reason - to make it harder to screw it up.

From date , To date validation in angular js

This is my code
<tr ng-show="option == 'Yearly' || option == 'Date'">
<td>
<label>From:</label>
</td>
<td>
<input type="date" ng-model="fromdate" id="fromdate" date-picker />
</td>
<td>
<label>To:</label>
</td>
<td>
<input type="date" ng-model="todate" date-picker />
</td>
</tr>
I have a jquery date picker for fromdate and todate, I need to disable all the dates in the end date which is lesser than the from date.....
I have used https://github.com/Eonasdan/bootstrap-datetimepicker
previously and minDate and maxDate options can probably be helpful for your use case, if you want to look at another plugin.
Sample usage to set maxDate, minDate:
html:
<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>
js:
$('#datetimepicker1').datetimepicker({
maxDate: new Date("6/8/2016"),
minDate: new Date("6/2/2016")
});
Working Plunker
Note: This plugin has dependency on bootstrap, jquery, and momentjs
Edit:
There is also a angular wrapper directive over this: https://github.com/diosney/angular-bootstrap-datetimepicker-directive
If you are just wanting to set a specific min date like todays date you can put that in as a setting.
https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
If you have an easy way of setting your min date to be todays day you can just use a variable as such min="{{minDate | date:'yyyy-MM-dd'}}"). Note that min will also add native HTML5 constraint validation.
In theory this doesn't require a controller but just a app setup config for $scope.minDate, all that is going to do is note that your date is not correct next to the field with whatever validation you have set, field and form validation is a whole different animal then what you are asking but I would read https://docs.angularjs.org/guide/forms on it.
In the long run I wouldn't use jquery date picker and use a native directive like https://angular-ui.github.io/bootstrap/ Date picker or Angular Material https://material.angularjs.org/latest/demo/datepicker

bootstrap datepicker from eternicode not selecting date

I'm working on this input right now using bootstrap 3.0 and bootstrap-datepicker from eternicode.
The problem is that I'm having by default the input to be disabled, because I do not want the user to be modifying the date by his hand.
I'm assigning an input addon with a glyphicon of a calendar to show the datepicker. The problem though is that whenever I select a date, the input doesn't receive the date. I've been going through the docs and there's a way to do it, but it is with Bootstrap 2.3.2 only.
Here is my code, does anybody know how can I transfer the selected date from the datepicker into my disabled input?
Help will be much appreciated!
html
<div class="form-group">
<label class="control-label" for="fechaTandas">Fecha</label>
<div class="input-group">
<span class="input-group-addon date" id="trigger-datepicker"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" name="fechaTandas" disabled="disabled" id="fechaTandas" placeholder="seleccione una fecha">
</div>
js
//JS to trigger the datepicker
$('#trigger-datepicker').datepicker({
format: "yyyy/mm/dd",
language: "es"
});
This is the link to eternicodes datepicker plugin:
http://eternicode.github.io/bootstrap-datepicker
I think you need to handle the DatePicker's change event..
$('#trigger-datepicker').datepicker()
.on("changeDate", function(e){
$('#fechaTandas').prop('disabled',false);
$('#fechaTandas').val(e.format('yyyy/mm/dd'));
$('#fechaTandas').prop('disabled',true);
});
Demo: http://bootply.com/88516

Categories