How to get the date from the date picker in django - javascript

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.

Related

Datetimepicker set value from Db

I'm using eonasdan Datetimepicker in my project but I can't really set the value that I'm getting from my DB in the input field
here is my HTML code
<div class="form-group">
<label class="col-sm-2 col-form-label">Conference start</label>
<div class='col-sm-10'>
<input type='text' class="form-control" id='datetimepicker4' name="datestart" value="<?=$vars['tstart']?>" />
</div>
</div>
here is my JS code
$(function () {
$('#datetimepicker4').datetimepicker({
daysOfWeekDisabled: [0],
format: 'YYYY-MM-DD H:mm'
});
});
from my MYSQL DB, I get the DATETIME in the variable $VAR but in the input field I always have the "2020-04-04 00:00" when it's supposed to be "2020-04-09 02:35"
if I inspect element using google chrome tools in the input value I see the correct date but in the field, I get the wrong DATETIME

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.

Bootstrap Datetimepicker overrides dates

I'm using Bootstrap Datetimepicker in my website.
The picker calendar works perfectly but when I write a date which is bady formatted, it will clear it and fill the text input with the last correct date (or just erase the field if none was entered before).
Worse than that, it will sometimes arrange dates to fit the format I've mentioned. For example, entering "102" and clicking out of the input zone will fill "10/02/2018".
I would like to force that behavior, and to keep user input in the text area, even if wrong format (I'll check it afterwards)
What am I missing here ?
<div class="form-group">
<label class="control-label col-sm-4">Date de naissance<label>
<div class="col-sm-7">
<div class="input-group date date-default input-date datetimepicker col-lg-7" style="float: none;">
<input id="datenaissance" name="datenaissance" type="text" class="form-control input-sm" placeholder="JJ/MM/AAAA" value=""/>
<span class="input-group-addon">
<img src="../images/icon/calendrier.png" alt="calendrier">
</span>
</div>
</div>
</div>

Angular Material design date format

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

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