Javascript 用于多个输入的 jQuery Datepicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10803518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datepicker for multiple inputs
提问by Gusgus
I have a jQuery datepicker script:
我有一个 jQuery 日期选择器脚本：
$(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">
回答by thecodeparadox
Just change all idto class.
只需将所有更改id为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" });
});
回答by Parth Thakkar
Tired of repeating this, but still, am repeating it once more. ids have to be unique. So, use this:
厌倦了重复这个，但仍然，我再重复一遍。ids 必须是唯一的。所以，使用这个：
<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">
with
和
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
回答by Ethan Brown
It isn't valid to have duplicated IDs. You should add a class instead:
拥有重复的 ID 是无效的。您应该添加一个类：
<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" });
});
回答by Ankit
Access datepicker function by Name:
按名称访问日期选择器功能：
$(function() {
$('[name="MyDate1"]').datepicker({ dateFormat: "yyyy-mm-dd" });
});
回答by Staccato
You could also add classes on the fly if input fields are dynamically generated, such as in Django templates.
如果输入字段是动态生成的，您还可以动态添加类，例如在 Django 模板中。
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
Get input fields using #id and add a class
使用 #id 获取输入字段并添加一个类
$(function() {
$( "#datepicker1, #datepicker2" ).addClass('datepicker');
$( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});
回答by Sudip Sur
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">
Just get input fields using #id and apply datepicker.
只需使用#id 获取输入字段并应用日期选择器。
$(function() {
$( "#datepicker1, #datepicker2" ).datepicker({ dateFormat: "yy-mm-dd" });
});
回答by Ashique Hussain Ansari
Access date picker by id
通过 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" });
});
回答by Derrik de Moei
<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
只需为表单提供 id： datepicker datepicker2 datepicker3
