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 });
});

How to use on-change event for textfield to make it empty if min-date condition fails

I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks

You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)

A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr

Add a calender control in knockout editable grid

I am trying to add a calender control in knockout editable grid I have added a calender in my needed Column when the grid rendered the first row added was attached with the calender but all the dynamically added rows I add (generated with the same id) not attached with the Calender.
So what should i do ?
<td><input type="text" id="Calender" class='span11 required' data-bind="value: Date" /></td>
i'm using the following example:
http://jsfiddle.net/rniemeyer/7RDc3/

you have to do a date custom binding, if you dont want to write your own, there is a good datepicker here that is ready to work with ko. docs are not very clear but just see source code and you will there is all you need.
this is how you use it:
<input type="text" class="form-control input-sm borderless-control" placeholder="Seleccione Fecha"
data-bind="datepicker: $data.date, datepickerOptions: { format: 'LL' }" />
You will need moment js too wich is a really good library to work with dates
hope it helps!

javascript - open link when user changes date in date picker

I am using a twitter bootstrap datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
What I am trying to do is use the input value (e.g. 15-02-2012 ) to load a page, when the user changes the date.
The input box uses this code...
<div class="input-append date" data-date="12-02-2012" data-date-format="dd- mm-yyyy">
<input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
<span class="add-on"><i class="icon-th"></i></span>
And the JavaScript to reload the page is this...
<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>
The problem is when the date is changed in the date picker (input id = dp3), nothing happens, the page does not reload. But when I tried attaching myFunction() to another text box, it does work, and it is able to grab the value in the datepicker (dp3).
So the problem is that JavaScript is not recognising the change in value of the datepicker (id=dp3). Does anyone know why this is the case?

I see you took the code from the example n°3 of your link, but you switched the id to the wrong tag.
Here --.
V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
If you leave the id on the input tag and keep the original JS code, the .datepicker() method will be called on the wrong element (the input): it is meant to be called on the parent div.
Then, on your jQuery, you should bind the changeDate event of your date-picker, and not the onChange of the input tag itself.
You could try something like this (using jQuery) :
$('#dp3').datepicker().on('changeDate', function() {
//Retrieve the date located on the data of your datepicker
var datevalue = $('#dp3').data("date");
//You can take the value from the input as well if you want
//The input tag doesn't really need an ID to be retrieved (see comments)
//var datevalue = $('#dp3 input').val();
window.open(datevalue,"_self");
});
Edit : here is a working fiddle with minor changes.