Datetime range selection javascript - javascript

I need to create a datetime range selector at the top of my dashboard such that, every chart and all text elements below gets filtered for the selected time period range.
So I was looking at this great solution by keith.
https://github.com/keithhackbarth/jquery-datetime-picker
I am a beginner in JS and there is nothing in the index.html for the above datetime picker.
There are only 4 JS libraries, which is too much code for a beginner.
I basically want to load the datetime as is there in my data only, so which part of code snippet do I start modifying?
Eg: The first column in my data - datetime is from 2014-03-01 to 2014-03-14
So the datetime picker should show exactly that after reading my data(column here)
index.html code :
<input type="text" class="dt_date_start"/>
<input type="text" class="dt_time_start" /> .........TO............
<input type="text" class="dt_date_end" />
<input type="text" class="dt_time_end" />
These are the four date ranges(classes) defined which are in datepair.js.
How do I go about editing datepair.js such that it loads the dates that I only want, which is present in the data.

Related

HTML5 - Is there a way to highlight a specific day? (thought javascript)

I'm working with HTML5 elements on my webpage. By default, on the click of the date picker icon, the current date is highlighted.
<input id="dateField" type="date" name="date-field"/>
How can I configure it to highlight a specific date instead of the current year? say 1st Jan of the current year?
I tried to do this
document.getElementById('dateField').defaultValue = '2021-01-01'
and
<input id="dateField" type="date" name="date-field" value="2021-01-01"/>
but this will not only highlights but also selects the date.
You can use the value attribute like this:
<input id="dateField" type="date" name="date-field" value="2017-06-01"/>
You can learn more about this here.

JavaScript date-time max/min not working when the user types in values manually

I'm currently using the JavaScript built in date-time. The max/min constraints, however, seem to only apply when the user uses the graphical arrows to change the values. For example, if I change the day in this code using the arrows, and try to increase the day past 06-14, it will automatically reset to 06-07. However, if I set the day manually using my keyboard, I can set it to any number, disregarding the max/min (i.e. I can set the date to 06-01 if I type in 1). Is there any way to fix this?
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
All html5 validation works with form on submit. If you want to validate by own, apply on submit callback function. using novalidate attribute in form
<form action="#">
<label for="meeting-time">Choose a time for your appointment: </label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
<button type="submit">Submit</button>
</form>
You will need to convert the manual input to a js Datetime object first.
const yourDate = new Date(*userinput*);

How to use custom DateRangePicker widget with Django Filter's DateFromToRangeFilter

So I have this filter using Django Filter:
class AssignmentFilter(FilterSet):
assignment_date = filters.DateFromToRangeFilter()
This built in class of Django Filter generates a form with these two inputs:
<input type="text" name="assignment_date_after" id="id_assignment_date_0">
<input type="text" name="assignment_date_before" id="id_assignment_date_1">
So there you pick the two dates and based on that it will get you the filtered QuerySet. All working well.
However I would like to use this usefull DateRangePicker:
https://www.daterangepicker.com/
This gets activated like this:
<input type="text" name="dates" class="form-control">
<script>
$('input[name="dates"]').daterangepicker();
</script>
However as you can see, this is only one field where the range between the dates will be set. But Django Filter works with an start input field and end input field.
How can I modify this so that I can use the nice widget that belongs to input[name="dates"].
Maybe a solution is to process it with JavaScript after a GET request. The function will then take the start date and inject it into the id_assignment_date_0 field. And take the end date and inject it to the id_assignment_date_1 field. Both the field id_assignment_date_0 and id_assignment_date_1 will be visually hidden then in the form. It seems quite hacky though.
Does anyone have a clever solution for this?
According to this example, you can accomplish what you want like this:
<input type="text" id="datePicker" name="dates" class="form-control">
<input type="hidden" name="assignment_date_after" id="id_assignment_date_0">
<input type="hidden" name="assignment_date_before" id="id_assignment_date_1">
<script>
$(function() {
$('input[name="dates"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
$('#id_assignment_date_0').val(start)
$('#id_assignment_date_1').val(end)
});
$('#datePicker').removeAttr('name');
});
</script>
Although, the format might differ from what you need. You can also change the format with something like below:
$('#id_assignment_date_0').val(start.format('YYYY-MM-DD'))

JavaScript tCal date format

I'm using tcal JS calendar on my website. I included tcal.css and tcal.js.
<INPUT TYPE="text" Name="DOB" class="tcal" required="yes">
The calendar displays correct, but it doesn't format the date. If I type 08031985, I would like that it automatically format to 08/03/1985. I don't want to have to enter the "/". Is it possible?
Thanks
If I am getting you correctly, you are not supposed to type the date but just pick it from the drop down pop up with the calendar.

How can I get a form input field using jQuery-UI datepicker to use the year from another field?

I have a form that takes a user's date of birth. The problem with just using a datepicker popup to get year, month, and date, is that it can take forever to go through years, as the interface only goes month by month.
So, the current solution is to have one field for the year, using HTML5 number field, so a user can easily scroll through years, and then have another field that uses a datepicker popup to pick the month and day. People seem to like picking dates with the calendar popup.
In the form I have, the user can select the year and the month/day separately, and that's all fine. The datepicker defaults to showing the months and dates for the current year, but in a sense, this doesn't matter. We don't need to record what day of the week any one date lands on, so it doesn't matter if they select January 27th, for example, from 2014, even if their year of birth is 1980, because what we get back in the post data is 1980 and 01-27, which we combine to 1980-01-27, and we store that in the database.
Even though it's working, I'm pedantic, and it bugs me to show the calendar from the current year even through the user may have entered a different year. So, what I want to do is make it so that the year in the datepicker changes to match the year in the year field.
I'm stuck because the code for datepicker is a bit obscure to me, and I'm not sure how to take the value of the year field and apply it. I think what I need is an onchange Javascript event in the year field, but what function would I apply so as to make the datepicker adjust accordingly?
JSFiddle is here. And this is the code:
<form>
<ul>
<li>
<label for="birthday">Date of birth</label>
<input name="birthyear" type="number" min="1920" max="2002" step="1" value="1980" class="number" required />
<input name="birthday" type="date" id="birthday" placeholder="MM-DD" required />
</li>
</ul>
</form>
<script type="text/javascript">
if ( $('#birthday')[0].type != 'date' ) $('#birthday').datepicker({ dateFormat: 'mm-dd' });
</script>
This may not be EXACTLY what you're trying to do, but it certainly fixes your problem of having to scroll through months and months trying to achieve the correct year by changing it to a dropdown.
Datepicker changeYear option
HTML
<form>
<ul>
<li>
<label for="birthday">Date of birth</label>
<input name="birthday" id="birthday" placeholder="mm/dd/yyyy" required />
</li>
</ul>
</form>
JS
$(function () {
$('#birthday').datepicker({
dateFormat:'mm/dd/yy',
changeYear:true,
yearRange:'c-80:c+0'
});
});
Resulting Datepicker Dialog Box

Categories