I have a jQuery datepicker script:
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
When I want to initialize this script for two inputs, it works only for the first one. How to use it for both inputs?
<input type="text" name="MyDate1" id="datepicker">
<input type="text" name="MyDate2" id="datepicker">
Just change all id to class.
<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
also can use
$(function() {
$( "input[name^=MyDate]" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
dateFormat: "yyyy-mm-dd" will display: YYYYYYYY-MM-DD remove the extra yy to display correct format. Update to: dateFormat: "yy-mm-dd"
Tired of repeating this, but still, am repeating it once more. ids have to be unique. So, use this:
<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">
with
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
It isn't valid to have duplicated IDs. You should add a class instead:
<input type="text" name="MyDate1" class="datepicker" id="datepicker1">
<input type="text" name="MyDate2" class="datepicker" id="datepicker2">
Then you can do:
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
Access datepicker function by Name:
$(function() {
$('[name="MyDate1"]').datepicker({ dateFormat: "yyyy-mm-dd" });
});
You could also add classes on the fly if input fields are dynamically generated, such as in Django templates.
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
Get input fields using #id and add a class
$(function() {
$( "#datepicker1, #datepicker2" ).addClass('datepicker');
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
Just get input fields using #id and apply datepicker.
$(function() {
$( "#datepicker1, #datepicker2" ).datepicker({ dateFormat: "yy-mm-dd" });
});
Access date picker by id
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
$(function() {
$( "input[id^=datepicker]" ).datepicker({ dateFormat: "dd-mm-yy" });
});
OR access date picker by name:
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
$(function() {
$( "input[name^=MyDate]" ).datepicker({ dateFormat: "dd-mm-yy" });
});
I wrote code like this and work properly in multiple field form:
Add this code before loop:
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$('.mydatepicker').each(function(){
$(this).datepicker();
});
</script>
And this line is in loop:
<div class="control-group form-group" style="padding: 5px;">
<div class="controls">
<span class="bi bi-calendar2-minus" style="color: #FF6600;"></span>
Input Date
<input name="myDate$i" type="text" class="form-control mydatepicker" id="myDate$i" required ="true" placeholder="Contoh: 2022-11-25" data-bs-toggle="tooltip" style="border-radius: 3px; padding:10px;"/>
</div>
</div>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#datepicker2").datepicker();
});
$(document).ready(function() {
$("#datepicker3").datepicker();
});
</script>
And just give the forms the id's: datepicker datepicker2 datepicker3
