我的 Dijit DateTimeCombo 小部件在表单提交时不发送选定的值

发布于 2024-09-02 06:38:18 字数 4833 浏览 7 评论 0原文

我需要创建一个 Dojo 小部件,让用户指定日期和时间时间。我在 Dojo bug 跟踪器的一个条目中找到了一个示例实现。它看起来不错并且大部分工作正常,但是当我提交表单时,客户端发送的值不是用户选择的值,而是从服务器发送的值。

我需要进行哪些更改才能让小部件提交日期和日期?时间价值?

示例用法是使用基本 HTML 标记(表单和输入)呈现 JSP,然后 dojo.addOnLoad 一个函数,通过ID选择基本元素,添加dojoType 属性,并且 dojo.parser.parse()-es 页面。

提前致谢。

该小部件在两个文件中实现。该应用程序使用Dojo 1.3。

文件 1:DateTimeCombo.js

dojo.provide("dojox.form.DateTimeCombo");

dojo.require("dojox.form._DateTimeCombo");
dojo.require("dijit.form._DateTimeTextBox");

dojo.declare(
    "dojox.form.DateTimeCombo", 
    dijit.form._DateTimeTextBox,
    {
        baseClass: "dojoxformDateTimeCombo dijitTextBox",
        popupClass: "dojox.form._DateTimeCombo",
        pickerPostOpen: "pickerPostOpen_fn",        
        _selector: 'date',      
        constructor: function (argv) {},

        postMixInProperties: function()
        {               
            dojo.mixin(this.constraints, {
                /*
                datePattern: 'MM/dd/yyyy HH:mm:ss',  
                timePattern: 'HH:mm:ss',
                */
                datePattern: 'MM/dd/yyyy HH:mm',
                timePattern: 'HH:mm',

                clickableIncrement:'T00:15:00',
                visibleIncrement:'T00:15:00', 
                visibleRange:'T01:00:00'
            });
            this.inherited(arguments);
        },

    _open: function ()
    {
        this.inherited(arguments);
        if (this._picker!==null && (this.pickerPostOpen!==null && this.pickerPostOpen!==""))
        {
            if (this._picker.pickerPostOpen_fn!==null)
            {
                this._picker.pickerPostOpen_fn(this);
            }
        }
    }       

    }
);

文件 2:_DateTimeCombo.js

dojo.provide("dojox.form._DateTimeCombo");

dojo.require("dojo.date.stamp");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Calendar");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.Button");

dojo.declare("dojox.form._DateTimeCombo",
    [dijit._Widget, dijit._Templated],
{

    // invoked only if time picker is empty 
    defaultTime: function () {
        var res= new Date();
        res.setHours(0,0,0);
        return res;
    },

    // id of this table below is the same as this.id
    templateString:
    "   <table  class=\"dojoxDateTimeCombo\" waiRole=\"presentation\">\
        <tr class=\"dojoxTDComboCalendarContainer\">\
        <td>\
            <center><input dojoAttachPoint=\"calendar\" dojoType=\"dijit._Calendar\"></input></center>\
        </td>\
        </tr>\
        <tr class=\"dojoxTDComboTimeTextBoxContainer\">\
        <td>\
            <center><input dojoAttachPoint=\"timePicker\" dojoType=\"dijit.form.TimeTextBox\"></input></center>\
        </td>\
        </tr>\
        <tr><td><center><button dojoAttachPoint=\"ctButton\" dojoType=\"dijit.form.Button\">Ok</button></center></td></tr>\
        </table>\
    ",

    widgetsInTemplate: true,

    constructor: function(arg) {},

    postMixInProperties: function() {       
        this.inherited(arguments);      
    },

    postCreate: function() {
        this.inherited(arguments);  
        this.connect(this.ctButton, "onClick", "_onValueSelected");
    },

    // initialize pickers to calendar value
    pickerPostOpen_fn: function (parent_inst) {
        var parent_value = parent_inst.attr('value');
        if (parent_value !== null) {
            this.setValue(parent_value);
        }
    },

    // expects a valid date object
    setValue: function(value) {
        if (value!==null) {
            this.calendar.attr('value', value);
            this.timePicker.attr('value', value);
        }       
    },

    // return a Date constructed date in calendar & time in time picker.
    getValue: function() {
        var value = this.calendar.attr('value');
        var result=value;       
        if (this.timePicker.value !== null) {
            if ((this.timePicker.value instanceof Date) === true) {
                result.setHours(this.timePicker.value.getHours(),
                this.timePicker.value.getMinutes(),
                this.timePicker.value.getSeconds());
                return result;
            }
        } else {
            var defTime=this.defaultTime();
            result.setHours(defTime.getHours(),
                defTime.getMinutes(),
                defTime.getSeconds());
            return result;                  
        }
    },

    _onValueSelected: function() {
        var value = this.getValue();
        this.onValueSelected(value);
    },

    onValueSelected: function(value) {}

});

i need to create a Dojo widget that lets users specify date & time. i found a sample implementation attached to an entry in the Dojo bug tracker. It looks nice and mostly works, but when i submit the form, the value sent by the client is not the user-selected value but the value sent from the server.

What changes do i need to make to get the widget to submit the date & time value?

Sample usage is to render a JSP with basic HTML tags (form & input), then
dojo.addOnLoad a function which selects the basic elements by ID, adds dojoType
attribute, and dojo.parser.parse()-es the page.

Thanks in advance.

The widget is implemented in two files. The application uses Dojo 1.3.

File 1: DateTimeCombo.js

dojo.provide("dojox.form.DateTimeCombo");

dojo.require("dojox.form._DateTimeCombo");
dojo.require("dijit.form._DateTimeTextBox");

dojo.declare(
    "dojox.form.DateTimeCombo", 
    dijit.form._DateTimeTextBox,
    {
        baseClass: "dojoxformDateTimeCombo dijitTextBox",
        popupClass: "dojox.form._DateTimeCombo",
        pickerPostOpen: "pickerPostOpen_fn",        
        _selector: 'date',      
        constructor: function (argv) {},

        postMixInProperties: function()
        {               
            dojo.mixin(this.constraints, {
                /*
                datePattern: 'MM/dd/yyyy HH:mm:ss',  
                timePattern: 'HH:mm:ss',
                */
                datePattern: 'MM/dd/yyyy HH:mm',
                timePattern: 'HH:mm',

                clickableIncrement:'T00:15:00',
                visibleIncrement:'T00:15:00', 
                visibleRange:'T01:00:00'
            });
            this.inherited(arguments);
        },

    _open: function ()
    {
        this.inherited(arguments);
        if (this._picker!==null && (this.pickerPostOpen!==null && this.pickerPostOpen!==""))
        {
            if (this._picker.pickerPostOpen_fn!==null)
            {
                this._picker.pickerPostOpen_fn(this);
            }
        }
    }       

    }
);

File 2: _DateTimeCombo.js

dojo.provide("dojox.form._DateTimeCombo");

dojo.require("dojo.date.stamp");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Calendar");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.Button");

dojo.declare("dojox.form._DateTimeCombo",
    [dijit._Widget, dijit._Templated],
{

    // invoked only if time picker is empty 
    defaultTime: function () {
        var res= new Date();
        res.setHours(0,0,0);
        return res;
    },

    // id of this table below is the same as this.id
    templateString:
    "   <table  class=\"dojoxDateTimeCombo\" waiRole=\"presentation\">\
        <tr class=\"dojoxTDComboCalendarContainer\">\
        <td>\
            <center><input dojoAttachPoint=\"calendar\" dojoType=\"dijit._Calendar\"></input></center>\
        </td>\
        </tr>\
        <tr class=\"dojoxTDComboTimeTextBoxContainer\">\
        <td>\
            <center><input dojoAttachPoint=\"timePicker\" dojoType=\"dijit.form.TimeTextBox\"></input></center>\
        </td>\
        </tr>\
        <tr><td><center><button dojoAttachPoint=\"ctButton\" dojoType=\"dijit.form.Button\">Ok</button></center></td></tr>\
        </table>\
    ",

    widgetsInTemplate: true,

    constructor: function(arg) {},

    postMixInProperties: function() {       
        this.inherited(arguments);      
    },

    postCreate: function() {
        this.inherited(arguments);  
        this.connect(this.ctButton, "onClick", "_onValueSelected");
    },

    // initialize pickers to calendar value
    pickerPostOpen_fn: function (parent_inst) {
        var parent_value = parent_inst.attr('value');
        if (parent_value !== null) {
            this.setValue(parent_value);
        }
    },

    // expects a valid date object
    setValue: function(value) {
        if (value!==null) {
            this.calendar.attr('value', value);
            this.timePicker.attr('value', value);
        }       
    },

    // return a Date constructed date in calendar & time in time picker.
    getValue: function() {
        var value = this.calendar.attr('value');
        var result=value;       
        if (this.timePicker.value !== null) {
            if ((this.timePicker.value instanceof Date) === true) {
                result.setHours(this.timePicker.value.getHours(),
                this.timePicker.value.getMinutes(),
                this.timePicker.value.getSeconds());
                return result;
            }
        } else {
            var defTime=this.defaultTime();
            result.setHours(defTime.getHours(),
                defTime.getMinutes(),
                defTime.getSeconds());
            return result;                  
        }
    },

    _onValueSelected: function() {
        var value = this.getValue();
        this.onValueSelected(value);
    },

    onValueSelected: function(value) {}

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

森林迷了鹿 2024-09-09 06:38:18

听起来您想使用 getValue 。现在的惯例是使用 _getValueAttr,然后调用 attr("value"),但我认为从 Dojo 1.4 开始,需要移植此代码才能使用这些新模式。

不,该值应该是一个 Javascript Date 对象,最好使用 dojo.date.stamp.toISOString() 发送到服务器

It sounds like you want to use getValue. The convention now is to use _getValueAttr and then call attr("value") but I think that started in Dojo 1.4 and this code would need to be ported to use those new patterns.

Noe that value should be a Javascript Date object which would best be sent to the server using dojo.date.stamp.toISOString()

眸中客 2024-09-09 06:38:18

在我向 DateTimeCombo.js 添加“序列化”方法后,这开始工作正常,该方法准确构建了我想要的输出格式。

这对我来说似乎很奇怪,因为 _DateTimeTextBox.js 中已经有一个序列化实现,它应该以所需的 ISO 格式输出值。

This began to work fine after i added a "serialize" method to DateTimeCombo.js which builds exactly the output format i want.

This seems odd to me, since there is already a serialize implementation in _DateTimeTextBox.js that should output the value in the required ISO format.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文