Loop or Wildcard to integrate through JQuery UI Javascript - javascript

I am calling the content of a PHP file via AJAX similar to this:
NEW.PHP
$output = '<p>Date: <input type="text" id="field_1"></p>
<p>Date: <input type="text" id="field_6"></p>
<p>Date: <input type="text" id="field_7"></p>';
echo $output;
The inputs are generated dynamically depending on options the user selected. In this case, field_1 and field_7 would be date picker fields and field_6 would be a standard text box.
In my main page, the jQuery success handler looks like this:
success: function(result){
jQuery('#div-custom').html(result).show();
jQuery("#div-custom").find("#field_1,#field_7" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
}
The issue I'm having is that the number of date picker fields is dynamic and the field number field_X can be different. Is there a way to make this find("#field_1,#field_7") dynamic or use a wildcard? I can change my PHP code so that, for example, all date picker fields are called date_X and other fields are field_X.
In that case, I'd like to do something like find("#date_*) but don't know if that's possible. I'm definitely not strong with Javascript.
Really appreciate any help!

You should use a class as you can use the same class on multiple items unlike ids
<p>Date: <input type="text" class="cal" id="field_X"></p>
jQuery("#div-custom").find(".cal" ).datepicker({

If you rely completely on the ids, then you can use 'starts with' selector on the input elements.
$("#div-custom input[id^='field']").datepicker({
This would be applicable on all input with ids starts with 'field' within a div with id ='div-custom'.

Related

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

Datetimepicker getting assigned to all the input elements

I have four textboxes. They have the following id:-
title, sdate, edate, pdate.
I want Datetimepicker to be assigned for the texboxes which have the text 'date' in their id.
That means, I want want datetimepicker to be assigned to the three textboxes- sdate, edate, pdate.
Here is the code I am using-
$('[id*="date"]').each(function(){
$(this).datetimepicker({
formatTime:'H:i:s',
formatDate:'Y-m-d',
dayOfWeekStart : 1,
lang:'en'
//disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
//startDate: '<?php echo date("Y-m-d");?>'
});
});
I am having a strange problem. All the Textboxes are getting assigned with DatetimePicker. Why is that happening?
Note:- I am using the bootstrap-datetimepicker.js
EDIT
The id of the form was 'validateForm'. That's why it was taking the datetimepicker, and I thought the 'title' textbox is taking the Datetimepicker.
As suggested by Vinod, I am using this right now- 'input[id*="date"]'
But this doesn't work sure for input elements like file or submit having id containing the string 'date'.
How can I work on that?
Ideally using class is best instead of id in this case.
<input type="text" id="title" > # don't apply to this
<input type="text" id="sdate" class="my-class">
<input type="text" id="edate" class="my-class">
<input type="text" id="pdate" class="my-class">
and jquery will be just
$('.my-class').datetimepicker({
formatTime:'H:i:s',
formatDate:'Y-m-d',
dayOfWeekStart : 1,
lang:'en'
});
Assign common class to inputs where you want datetimepicker and initialize using class, this will help you to restrict only inputs with classes
$(".date").datetimepicker();
assuming your input have common class date.
Hope this helps :)

Different placeholder via Javascript on same input ID

I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?
You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.

How to remember selected date in jquery Datepicker if validation is not passed?

I am using codeigniter for form validation, in all my inputs I have something like this:
<input type="text" id="someId" name="someId" value="<?php echo set_value('someId'); ?> />
And works perfectly. However when using input type 'date' or jquery Datepicker in case browser doesn't recognize date tag, the date field just resets. Here is my exact code for that field:
<input type="date" id="fecnac" name="fecnac"
value ="<?= isset($_SESSION['fech_nacimiento']) ? $_SESSION['fech_nacimiento'] :
set_value('fecnac'); ?>" />
I have a session tag because once succesfully submitted value is stored on a session variable. But if it doesn't pass validation I use the 'set_value()' from codeigniter. Problem is it isn't working.
Is there another way to remember the selected date from user if form doesn't pass validation? With or without codeigniter.
I have found a solution for this, here it is in case anybody else has the same issue:
Like Jay Bhatt pointed on a comment, date needs to be on right format. For Jquery Datepicker it should be something like this:
$( "#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
In my case, since I'm using Codeigniter, for the field to remember value should be:
value="<?php set_value('datepicker'); ?>
It wasn't working because I forgot to add $this->form_validation->set_rule() to that field in my Controller. Turns out that if you want CI's set_value() function to work, you need to set_rule() first. This was new for me.

Multiple Datepicker fileds id

I have a long html document with like a hundred of datepickers. Surely each has its own id in the form of (DueDate'num'), like "DueDate401":
<div id="DueDate">
<label for="DueDate">Due date:<br></label>
<input name="DueDate" type="date" id="DueDate401"/>
</div>
JS for processing event is as follows:
$(function() {
$( "#DueDate401" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
I have a vague idea that something like this should be used:
document.getElementById("DueDate"+id)
but not sure. Would appreciate assistance.
UPDATE: Oh yeh, the question)))) The above JS example shows how a reference is made to a SPECIFIC datepicker field. Since every next datepicker changes its id, I do not know how to change this Javascript to address all datepickers.
use class as well. name the input's class names as DueDate,
then you can use like this
$(function() {
$( ".DueDate" ).datepicker({
dateFormat:"d-M-yy",
showButtonPanel:true,
changeMonth:true,
changeYear:true
});
});
<input name="DueDate" class="DueDate" type="date" id="DueDate401"/>

Categories