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.
Related
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.
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.
I am facing problem on this. The value on the textbox can't make an array. It read as string when i check in console. Im trying to check the length of it but it reads in string. It was a multiDatepicker. It seems not correct. Kindly see where did i missed?
$('#datetimepicker1').datepicker({
multidate: true
});
var arrDate = [];
arrDate.push(document.getElementById("txt_date").value);
console.log(arrDate.length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<font color="black">Dates: </font>
</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name='txt_date' id='txt_date'/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
You can use their own API method getDates. See the documentation here
getDates
Arguments: None
Returns a list of localized date objects representing the internal
date objects of the first datepicker in the selection. For use with
multidate pickers.
Use it like this
console.log($('#datetimepicker1').datepicker('getDates'));
Here is a working example
I would like to set a minimum selectable date in my datepicker, using thymeleaf.
I try to set it by this code:
<label th:utext="#{${name}}" th:for="${name}" class="control-label"></label>
<div class="input-group input-group-prepend">
<span class="input-group-text far fa-calendar-alt"></span>
<input type="text" th:id="${name}" th:name="${name}" th:value="${value}" th:placeholder="${placeholder}" class="form-control" onfocus="(this.type='date')" min="${minDate}"/>
</div>
But this code min="${minDate}" is ignored.
There is a way to do that I want with thymeleaf or I can do it only by javascript?
Thanks
You can try using th:attr as below
th:attr="min=${minDate}"
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