We Keep Coding

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.

JQuery Datepicker Default Date Not Working When Two on Page

I'm using Jquery datepickers to collect two dates on the same page, the calendars display correctly and I'm able to collect the input dates fine however, on the occasion a default date is supplied to JQuery, it only populates the first datepicker on the page. I'm using
$( id ).datepicker( "option", "defaultDate", defaultDate );
to attempt to set the default date where the var id is the html id of the datepickers and defaultDate var is the date to set. How do I get the default date to populate in both datepickers?
Update:
The html ids for both of these are unique. Here are some logs from the console-
//default date sets correctly
default date 06/01/2017
id#opa_global_global_BeginBus
//does not set
default date 06/30/2017
id#opa_global_global_a_TempVendor
I also noticed while debugging that the default date for the second datepicker value appears to be selected on the calendar, but not displayed in the corresponding textbox (see image below).
The HTML
<!--has default date --->
<div id="rn_CalendarInput_40" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_BeginBus" name="opa_global_global_NysBeginBus" placeholder="MM/DD/YYYY" value="06/01/2017" aria-required="true"><img class="ui-datepicker-trigger" src="assets/images/calendar.gif" alt="Select date" title="Select date">
</div>
<!--does not have default date--->
<div id="rn_CalendarInput_46" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_TempVendor" name="opa_global_global_TempVendor" placeholder="MM/DD/YYYY" value="06/30/2017"><img class="ui-datepicker-trigger" src="/assets/images/calendar.gif" alt="Select date" title="Select date">
</div>

IDs must be unique to each element. Anything else is invalid HTML and jQuery will ignore any element with an ID which has already been used further up the page.
Give both datepickers the same class instead and use that as your selector. e.g.
<input id="dp1" class="datepicker"/>
<input id="dp2" class="datepicker"/>
$(".datepicker").datepicker( "option", "defaultDate", defaultDate );

As everybody is saying, as long as Id's are unique, it should work. or use a class selector instead if you don't want that selector to be unique. And to show it, check the jsfiddle below using both, ids and classes and also using the options object instead of the setter syntax where you pass { defaultDate: defaultDate }, you might like that better.
jsfiddle here
Code:
$(function(){
var defaultDate = new Date('7/01/2016');
$('#first').datepicker();
$('#second').datepicker();
$('#first, #second').datepicker("option", "defaultDate", defaultDate);
$('.date').datepicker({ defaultDate: defaultDate });
});

ng-model value is not coming in date filter using angular js

I am doing angular js search between from one date to another date using date picker .
I have made it ,every thing working fine .
But i am not getting the dynamic value of the date .which i have selected from the date picker .
I have passed two static date of given format its working fine.
I am not getting why it is not coming .
Below is the code.
<tr class="gradeU" ng-repeat="x in invoice| dateRange : from_date : to_date ">
This above one not working .
If i am using this one its working .
<tr class="gradeU" ng-repeat="x in invoice| dateRange : '2016-11-20' : '2016-11-25'">
Dont know why ,
i have passed it in ng-model also
<div class="col-sm-2 m-b-xs">
<input type="text" name="from_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="from_date" format="YYYY-MM-DD" />
</div>
<div class="col-sm-2 m-b-xs">
<input type="text" name="to_date" class="form-control" placeholder="From" date-time view="date" auto-close="true" min-view="date" ng-model="to_date" format="YYYY-MM-DD" />
</div>
Can anybody suggest me,what is the error?
Thank you in advance.

Try using new Date(from_date) to see if the variable contains a valid date
This will also convert the variable type into Date type if the variable contains a valid date as well

Javascript Date Picker Into A Textfield

I'm trying to use a date picker for a date field but my date fields ID is a dynamic id, since the fields generates in table rows, like
<input type="text" id="date<%=n%>"/>
But my date picker script requires the ID to attach the date picker into the above text field like below,
<script type="text/javascript">
new datepickr('datepick', { dateFormat: 'Y-m-d' });
</script>
Is there any other way to make this work?

Add a class to your input field
<input type="text" id="date<%=n%>" class="datepicker"/>
and get its value from javascript
var date = $('.datepicker').datepicker();

Better to use one class instead of multiple id's .you can differentiate the text filed value based on index number of class
first:<input type="text" class="date">
second:<input type="text" class="date">
third:<input type="text" class="date">
$(document).ready(function(){
$('.date').datepicker();
$('.date').on('change',function(){
var index=$('.date') .index(this);
$('.date:eq('+index+')').val();
});
});
js fiddle link: http://jsfiddle.net/sarath704/LhPP2/1/

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