Javascript 日期选择器的文本框访问

我使用的是由Stefan Petre创建的日期选择器jQuery插件，可在以下位置获得：

这是我用来将datepicker应用于文本框的代码

 $('.tableMstCellECD').DatePicker({
            format: 'd/m/Y',
            date: $('.tableMstCellECD').val(),
            current: $('.tableMstCellECD').val(),
            calendars: 3,
            onChange: function (formated, dates) {
                $('.tableMstCellECD').val(formated);
                $('.tableMstCellECD').DatePickerHide();
            }
        });

---

它工作正常，但显然会更新所有文本框的值，而不是所选文本框的值。问题是texbox的数量可能不同，因此我无法硬编码访问值。我试图在这个命令的某个地方实现“this”关键字，但没有成功

我以前也遇到过这个问题。因此，我编写了一个自己的脚本（js）来将其实现到只包含类名“datepicker”或其他内容的文本框中。为了给大多数浏览器提供支持，我用这种方式做了

/*
* === javascript file to implement datepicker on form fields for dates
*
* @author : Karel Geiregat
* @version : 1.0.4 - 18 may 2013
*/

// class name which contains input box, chosen for dates
var comparerString = "datepicker";

// get all inputfields, select only those marked with right class name
window.addEventListener('load', function() {
    // select all input boxes
    var getElements = document.getElementsByTagName("input");
    // check count
    var count = getElements.length;
    // loop through elements
    for(var i = 0; i < count; i++) {
        // get classname - supported by most major browsers
        if (getElements[i].className == comparerString) {
            var idField = "#" + getElements[i].id;
            $(idField).datepicker({ dateFormat: "yy-mm-dd" });
        }
    }
});

/*
*==在日期的表单字段上实现日期选择器的javascript文件
*
*@作者：卡雷尔·盖里加特
*@version:1.0.4-2013年5月18日
*/
//包含输入框的类名，为日期选择
var comparerString=“日期选择器”；
//获取所有inputfields，仅选择标有正确类名的字段
addEventListener（'load'，function（））{
//选择所有输入框
var getElements=document.getElementsByTagName（“输入”）；
//支票计数
var count=getElements.length；
//循环通过元素
对于（变量i=0；i

和HTML格式

<input id="form_startDate" class="datepicker" type="text" required="required">

---

只需在jQuery中编写类似的代码。只需在文本框中添加一个类名，该类名应使用DatePicker对象进行标记。

我同意Deepanshu的观点，您应该使用jQuery UI。如果出于某种原因希望避免这种情况，KarelG的解决方案可以很好地工作，但是因为已经包含了jQuery，所以可以这样编写：

$('.tableMstCellECD').each(function(){
    var id = $(this).attr('id');
    $(this).DatePicker({
        format: 'd/m/Y',
        date: $('#' + id).val(),
        current: $('#' + id).val(),
        calendars: 1,
        onChange: function (formated, dates) {
            $('#' + id).val(formated);
            $('#' + id).DatePickerHide();
        }
    });
});

您还必须在服务器或客户端为输入元素生成唯一的ID-s，如下所示：

<input type="text" id="01" class="tableMstCellECD" />
<input type="text" id="02" class="tableMstCellECD" />
<input type="text" id="03" class="tableMstCellECD" />
<input type="text" id="04" class="tableMstCellECD" />

为什么不使用这个普通而简单的：。。。它非常简单，并且具有所有的功能。幸运的是，你的方法在最后一个文本框中只对我有效