Datetimepicker getting assigned to all the input elements - javascript

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

Related

Generate dates onclick in datepicker

I'm using "datepicker" script and I've created a link that generates a series of dates on click.
Javascript
function change(){
document.getElementById('datepicker').value='06/10/2022,20/10/2022,17/11/2022';
}
HTML
<input type="text" id="datepicker" name="test" class="datepicker" placeholder="select dates"><br>
link
On click on the link, these dates appear in the input field, but in the calendar these dates are not enabled...
They become enabled if I put the cursor in my input field and I have an action like "Ctrl+A" for example.
Does anyone have any idea ? thank you so much ! :-)
If you want the dates replace text "link" on click you should set id="datepicker" on your anchor tag.
Finally i found the solution :
Javascript
function change(){
$('#datepicker').val('06/10/2022,20/10/2022,17/11/2022').datepicker('update');
}

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

Loop or Wildcard to integrate through JQuery UI 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'.

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.

Setting the value of multiple inputs with the same id using jQuery?

Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.

Categories