We Keep Coding

Flatpickr doesn't open when input field is required in iOS

Been trying to find the cause of this issue but I have an input field for the Flatpickr date time but it doesn't open the native Iphone date picker.
This only happens when the field is required, on Iphone 11 and below versions no matter if it's Safari or Chrome.
Another strange thing is that we have other environments too and the date picker opens up in those but the HTML for the input is the same.
Here's the input html:
<div class="form__field-group u-full-width dw-mod">
<div class="u-full-width">
<label for="DateOfBirth" class="u-pull--left">Date Of Birth <span class="required dw-mod">*</span></label>
</div>
<input id="DateOfBirth" required="true" name="DateOfBirth" type="hidden" value="2004-01-01" class="u-full-width dw-mod flatpickr-input">
<input class="u-full-width dw-mod flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" required="" placeholder="" value="2004-01-01" max="2004-10-03">
</div>
And the Flatpickr script:
document.addEventListener("DOMContentLoaded", function () {
flatpickr("#DateOfBirth", {
mode: 'single',
maxDate: '1/10/2004 10:03:44 AM'
});
});
Video of the issues: screencast.com/t/JOnB4CpZvg
Did anyone had the same issue before? How to solve this bug?
Thanks

Reading the documentation of Flatpickr
You can try to use the config option disableMobile.
disableMobile information:
Set disableMobile to true to always use the non-native picker.
By default, flatpickr utilizes native datetime widgets unless certain options (disable) are used.

How to remove the "Today's date" button from a datepicker?

I am trying to remove the button on the bottom of the HTML default date picker. I can't seem to find a way. The Button says: "Today"
<div class="form-group" id="datepicker">
<label id="WinterStart:" for="usr">Winter: </label>
<input type="date" class="form-control" id="winterStartFrom:" min="2019-11-10">
</div>

It may be your browser delivered setting,
Try with this or this
This will give you a custom date pickers.

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.

How to Display year only Calendar?

I am using Predefined bootstrap calendar in my page. Its working Properly, but for few text box I need to display year only calendar.
My Codes are
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="~/Content/adminlte/components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- bootstrap datepicker -->
<script src="~/Content/adminlte/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script>
$(function () {
$('#Date').datepicker({
autoclose: true
})
})</script>
Design
<label>Date</label>
<div class="input-group date">
<input type="text" class="form-control pull-right" id="Date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
My datpicker with text box image as follows
Its working fine to pickup a date.
But for few text box I need year only option as shown in image below
If I use code from some other stackoverflow answers or from this link code , it affect my date picker design and it also change the option for all text boxes to choose normal date also... Kindly help.. TIA.

use this config options:
$("#Date").datepicker({
autoclose: true,
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});

Look if you go to jquery page and searched for calender.
They will tell you the properties for calender format and how to use them and thus you copy and paste thrm in your bootstrap calender since it will be the same.
Regards.

How to autoclose and click icon datepicker bootstrap

I have problem with code:
<div class="control-group input-append date">
<label class="control-label" for="cid">Check In</label>
<div class="controls">
<input class="span8 required" name="cid" type="text" id="cid">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
and the javascript:
<script>
$('#cid').datepicker();
</script>
Exactly I have done insert jquery and datepicker javascript.
Problem:
The date can't auto close. I want to after click date, the table date will autoclose.
The icon calender can't click. I want to if user click icon calender beside form input, the table calender will showing.
Thanks

Can you try :
$('.datepicker tbody').on('click', function(){ $('.datepicker').hide() });
$('.icon-calendar').on('click', function(){ $('.datepicker').toggle()   });
You have to precise the jquery selector in case where you have multi icon calendar or datepicker;