Open a date picker by clicking on checkbox and set new date - javascript

I'm using bootstrap-datepicker-rails there's one problem I can't solve.
I have following structure:
<div class="row">
<input type="text" class="form-control datepicker-element" data-provide='datepicker' value="<%= Time.now.strftime('%d-%m-%Y') %>" >
</div>
<div class="row">
<label><input type="checkbox" class="date-checkbox" value="">Set different date</label>
What I need to accomplish is to make it possible to open datepicker and set new date (as you see, its default value is current date).
I tried following:
$('.date-checkbox').click(function() {
$('.datepicker-element').datepicker();
});
but it doesn't work as well as onChange event and calling .datepicker() on checkbox.
Thanks in advance!

The problem was solved by using gem's standard methods described in its documentation you can find by the link.
So my solution looks like this:
$('.date-checkbox').click(function() {
$('.datepicker-element').datepicker('show');
});

Related

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 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'))

How to create datetimepicker dynamically with same id? not working

I am having hard time to figure out how to create datetimepicker dynamically.
I am using The code below for creating datetimepicker on a cell in datatable dynamically. when I click on a cell, datetimepicker created on it dynamically. and I click other cell, datetimepicker disappears and create another on the clicked cell.
The way I am trying is that when the event occurs I use append function with id. see below sample code.
<div id='textId'></div>
//when eventA occurs,
{
$('#testId').empty();
$('#testId').append('2019-09-01');
}
//when eventB occurs,
{
$('#testId').empty();
$('#testId').append(<input type="text" class="form-control"/>'
+'<span class="input-group-addon"><span class="fa fa-calendar"></span></span>');
$('#testId').datetimepicker({format: 'YYYY-MM-DD', date : '2019-09-02'});
}
The code for eventA works fine. But the problem is eventB. when eventB occurs first time, it works fine. From the second time, datetimepicker does not work at all. It displays its form but does not have date and not work the calendar-call-buttn.
I googled the problem and found that it was about using same-id issue. So I tried to use name attribute but failed with the same result.
helps me...
please you can try to using css class for datetimepicker.
<div class="col-sm-3 form-group">
<b>Date Of Birth :*</b><br>
<p><input placeholder="dd/mm/yyyy" class="form-control calanderDate" oninput="this.className = ''" name="dateOfBirth" id="dateOfBorth" onblur="defaultValidation(this)"></p>
<span id="er_passportNumber" style="display: block; width:100%; float: left;"></span>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
defaultDateValidation();
});
function defaultDateValidation(){
$(".calenderDate").datetimepicker({
dateFormat: "dd/mm/yy"
});
}
</script>

MaterializeCSS datepicker: setDate does not update the view

Using MaterializeCSS 1 rc2, I try to update the date of my DatePicker from Javascript.
My HTML
<form action="#" novalidate>
<input type="text" class="datepicker" name="date" id="datepicker">
</form>
My JS
function changeDate(date) {
/* date is a javascript Date object */
var datepicker = document.getElementById('datepicker');
var instance = M.Datepicker.getInstance(datepicker);
instance.setDate(date);
}
Looking at the console, all the variables are set to their expected value. When I click on the DatePicker, that's also the expected date which is displayed (the one I use in changeDate). But the text in the input field does not change...
My friend, you have found a bug in MaterializeCSS!
I can suggest you my workaround: call instance._finishSelection() after calling instance.setDate() to see your changes.
https://github.com/Dogfalo/materialize/issues/6074
Currently ("materialize-css": "^1.0.0") you can achieve that with: instance.setInputValue:
Typescript code:
const datepickerInstance = M.Datepicker.getInstance(datepickerEl[0]);
datepickerInstance.setDate(date);
datepickerInstance.setInputValue();

How to get MetroUI CSS Datepicker value with javascript

I'd like to be able to see the date selected with a Metro UI CSS datepicker using javascript. Eventually this data would be used for building a JSON object to be sent in an AJAX request. For now though, I'd be happy just to see it in a browser alert message.
Here's the datepicker control: http://metroui.org.ua/datepicker.html
Notice the second datepicker has a default value.
How can I use the browser console to get that default value into an alert message? Surely I'm missing something obvious, but I've had no luck doing things like checking "val()" of the input element, etc.
I just found a little workaround (quick and dirty): give a unique Id to the <input type="text"... into the <div class="input-control text"... and then let JQuery to make the magic!
Here is the code:
<div id="dpContainer" class="input-control text">
<input id="inputToRead" type="text">
<button class="btn-date"></button>
</div>
<script>
function getDPValue(){
var selectedDate = $('#inputToRead').val();
return selectedDate;
}
</script>
I know it's little bit dirty, probably you can get some useful hint from http://metroui.org.ua/calendar.html functions.
more quick and more dirty:
<script>
function getDPValue(){
return $('#dpContainer').children('input[type=text]').val();
}
</script>
HTH,
Stefano.
The datepicker has a calendar control inside of it. You can get the selected date of the calendar control running .calendar('getDate'). Then lets allow JQuery do his job and reach the calendar control inside the datepicker.
<div id="myDate" class="input-control text" data-role="datepicker" data-preset="2016-01-01">
<input type="text">
<button class="button"><span class="mif-calendar"></span></button>
</div>
<script>
function getMyDate(){
return $('#myDate .calendar').calendar('getDate');
}
</script>
<button class="button" onclick="alert(getMyDate())">Show My Date</button>

Categories