日期选择器的文本框访问

Question

我正在使用由 Stefan Petre 创建的日期选择器 jQuery 插件，可在此处获得：

http://www.eyecon.ro/datepicker/#about

这是我用来将日期选择器应用于文本框的代码

 $('.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”关键字，但没有成功

Answer 1

我同意 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，如下所示：

<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" />

Answer 2

我以前也有这个问题。所以我写了一个自己的脚本（在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" });
        }
    }
});

在 HTML 中

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

只需在 jQuery 中编写类似的内容即可。只需将类名添加到应使用 DatePicker 对象标记的文本框即可。