Develop Reference

How to change Django datetime field format in datepicker?

I have a model field called close_date
models.py
class Project(models.Model):
close_date = models.DateTimeField(blank=True, null=True)
In my forms, I don't do add any classes to display this because I will do it in my template using django-widget-tweaks. However, my forms look like this:
forms.py
class NewProjectForm (ModelForm):
class Meta:
model = Project
fields = ['close_date', ...]
templates
{% load widget_tweaks %}
<div class="form-group" id="close_date">
<label>{{project_form.close_date.label}}</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
{% render_field project_form.close_date class="form-control" type="text" %}
</div>
</div>
<script>
$('#close_date .input-group.date').datepicker({
todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true
});
</script>
All this works fine, I can display the form, save it to the database and even display data to the user, but when I want to edit the this object and I populate the form from my views, I see this in the datepicker input field:
2018-02-28 00:00:00
How can I change what is displayed there from 2018-02-28 00:00:00 to 02/28/2018?
Is that on the django side of things or the JS side?

Have you tried specifying the input format in your form, like so?
close_date = DateField(input_formats=['%m/%d/%Y'], label=_('Installation Date'),widget=DateInput())

You should use a DateField(doc link) instead of a DateTimeField inside your model :)

I can give you a partial solution as it is 3 am in the morning (sorry). Use a DateField instead of a DateTimeField so that the 00:00:00 part is not there anymore.
Next, you need to reformat the date from 2018-02-28 to 02/28/2018. That's it. From what I understand, either input will work with the form, but during editing the one with the - is preferred by Django so that's what it shows you.
If this bothers you then either use a JS library to put a calendar so that users use a calendar to input/change the data rather than type it by hand, or use a custom javascript code to change the input after the whole page loads.

Bootstrap datepicker doesn't close

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

You must do the following:
Correct your class reference
Enable autoclose
Override button
When you setup the datepicker, you are referencing a non-existant class ('.datepicker'). Besides that, you need to include the 'autoclose' field and customize the behaviour of the button to make it both open and close the calendar.
HTML
<div class="input-group date insertInfo" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon close-button">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
JS
// Setup datepicker
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
// Unbind default events
$('.close-button').unbind();
// Specify new behaviour
$('.close-button').click(function() {
if ($('.datepicker').is(":visible")) {
$('.date').datepicker('hide');
} else {
$('.date').datepicker('show');
}
});
If you want to see a working version: JSFIDDLE

After selecting the date from the drop down calendar you can just click anywhere outside the calendar to close it but if you want the calendar to be closed on selecting the date then do the following
$(function () {
$('.date').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
})
});

$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
You will need to EXPLICITLY add autoclose: true, otherwise, its default value is false.

Bootstrap datepicker has autoclose option set on false by default.
You should set autoclose option on true.
Check out the reference: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference

Bootstrap 3 Datepicker v4 call set date with moment or date

Iam using http://eonasdan.github.io/bootstrap-datetimepicker/
i have a datetime picker called dtpFrom
<div class='input-group date ' id='dtpFrom'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script>
$('#dtpFrom').datetimepicker({
useCurrent: true,
format: 'DD/MM/YYYY',
showTodayButton: true,
showClear: true,
showClose: true,
//autoclose: true,
maxDate: new Date(),
toolbarPlacement:'top'
});
</script>
i want to set its value on run time on other controls event..
i tried this and many other code but doesnt work!!
$('#dtpFrom').data("DateTimePicker").date(moment(new Date('DD/MM/YYYY'), 'DD/MM/YYYY'));
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()));
$('#dtpFrom').data("DateTimePicker").viewDate(new Date());
any suggestion..
thanks

i found the solution if someone face the same problem
$('#dtpFrom').data("DateTimePicker").date(moment(new Date()).format('DD/MM/YYYY'));
NOTE: the format should match the definition format option of datetimepicker.

Mohammad's answer did not work for me. Turns out the syntax was slightly different, possibly due to a different version of the datepicker.
The following worked for me:
('#dtpFrom').data("DateTimePicker").setDate(new Date())

How to avoid seconds in datetimepicker?

I want to avoid seconds in datepicker dropdown.
I have the following html content:
<link href="<c:url value='/resources/css/bootstrap-datetimepicker.min.css'/>"
rel="stylesheet">
<script type="text/javascript"
src="<c:url value='/resources/js/bootstrap-datetimepicker.min.js'/>"></script>
...
<div id="startTimeDiv" class="input-append right-date-input">
<input id="startTime" name="startTime" data-format="hh:mm:ss" type="text" value="">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
and the following js:
$('#startTimeDiv').datetimepicker({
pickDate: false,
timeFormat: "HH:mm"
});
startTimeDiv looks like this:
Thus seconds didn't disappear. Why ?
P.S.
I tried to reproduce it from scratch on isolated example and it works correctly. I suppose that it can be problem with another libraries interaction or different version I used on isolated example. I don't how to check datepicker version I use.

For my version works the following code:
$('#startTimeDiv').datetimepicker({
pickDate: false,
pickSeconds: false
});

where are you getting #startTimeDiv from? should it not be #startTime, that may solve your issues :)

your id is startTime not startTimeDiv
fix it by doing this
$('#startTime').datetimepicker({
pickDate: false,
timeFormat: "HH:mm"
});

I have the below in my code and it works. This will default the seconds to 00 but wont show in the pop-up for the user to select the seconds. Using jquery time picker add-on
$('#startTimeDiv').datetimepicker({
showSecond: false
});
Or if you simply dont want the seconds itself then try this
$('#startTimeDiv').datetimepicker({
showSecond: false,
timeFormat: 'hh:mm'
// hourFormat: 24 (if you are looking for 24 hr format, if you want 12 hr format then change timeFormat to 'hh:mm TT' and hourFormat:12)
});

bootstrap 3 datepicker (eonasdan version) provides a datetime object with getDate(). not a string

I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated

If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.