AngularJS 如何对 type=“date” 的 Input 元素启用复制和粘贴操作?

AngularJS How to enable copy&paste operations on Input element of type="date"?

提问人:Sara 提问时间:11/16/2023 最后编辑:Sara 更新时间:11/21/2023 访问量:12

问:

我应该让用户复制并粘贴到 HTML 部分:.<input type="date"> or <input type="datetime-local"><input type="date" id="dateId" ng-model="source.startDate">

如何在AngularJS中执行此操作? 任何想法都将受到高度赞赏。 谢谢!

我的临时解决方案是—— 对于选择(为了复制),我只是将此样式添加到css文件中:

input.form-control[type="date"],
    input.form-control[type="datetime"],
    input.form-control[type="datetime-local"]
    {
        -webkit-user-select: text;
    }

对于粘贴: 我尝试将每个元素注册到“粘贴”侦听器:

<input type="date" id="dateId" ng-model="source.startDate" ng-init="registerToPasteEventListener('dateId')">

$rootScope.registerToPasteEventListener = function(param) {
        setTimeout(function() {
            const input = document.getElementById(param);
            if(input){
                input.addEventListener('paste', (e) => {
                    if (document.activeElement !== input) {
                        return;
                    }
                    const value = e.clipboardData.getData('text');
                    let datetimeArr = value.split('/');
                    let time = null;
                    if(datetimeArr.length==3) {
                        if(datetimeArr[2].length > 4){
                            //date and time
                            time = datetimeArr[2].slice(6);
                            datetimeArr[2]= datetimeArr[2].slice(0,4)
                        }
                        let dateValue = new Date([datetimeArr[1],datetimeArr[0],datetimeArr[2],time]);    
                        updatedValue = time && document.activeElement.type.includes('datetime') ? dateValue.toJSON().slice(0,16) : dateValue.toJSON().slice(0,10);            
                        $('#'+param).val(updatedValue).trigger('change');
                    }
                    else{
                        alert('Can paste a date of this format only: dd/mm/yyyy')
                    }
                });    
            }
        },200); 
    }

它有效,但这不是一个优雅的解决方案。我不想在里面有一个函数,以及所有其他奇怪的代码。 谢谢!setTimeout()

angularjs 日期 输入 复制 粘贴

评论


答: 暂无答案