Javascript 无法使用angularjs从文本框中获取日期值

Javascript 无法使用angularjs从文本框中获取日期值,javascript,jquery,angularjs,datepicker,Javascript,Jquery,Angularjs,Datepicker,我有一个html文本框,我在文本框中添加了类“日期选择器”。我无法从文本框中获取日期值,但我给出了字符串或普通文本值,而不是从datepicker中选择的日期。它工作得很好。感谢您的帮助,让我获得价值。在my datepicker pluginfor引用中使用了windows.load函数 <input class="date-picker" ng-model="Cr_ParentId" id="txt_parentcrid" type="text" placeholder=":input

我有一个html文本框,我在文本框中添加了类“日期选择器”。我无法从文本框中获取日期值,但我给出了字符串或普通文本值,而不是从datepicker中选择的日期。它工作得很好。感谢您的帮助,让我获得价值。在my datepicker pluginfor引用中使用了windows.load函数

<input class="date-picker" ng-model="Cr_ParentId" id="txt_parentcrid" type="text" placeholder=":input" />

 (function ($) {
/* "YYYY-MM[-DD]" => Date */
function strToDate(str) {
    try {
        var array = str.split('-');
        var year = parseInt(array[0]);
        var month = parseInt(array[1]);
        var day = array.length > 2? parseInt(array[2]): 1 ;
        if (year > 0 && month >= 0) {
            return new Date(year, month - 1, day);
        } else {
            return null;
        }
    } catch (err) {}; // just throw any illegal format
};

/* Date => "YYYY-MM-DD" */
function dateToStr(d) {
    /* fix month zero base */
    var year = d.getFullYear();
    var month = d.getMonth();
    return year + "-" + (month + 1) + "-" + d.getDate();
};

$.fn.calendar = function (options) {
    var _this = this;
    var opts = $.extend({}, $.fn.calendar.defaults, options);
    var week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var tHead = week.map(function (day) {
        return "<th>" + day + "</th>";
    }).join("");

    _this.init = function () {
        var tpl = '<table class="cal">' +
        '<caption>' +
        '   <span class="prev"><a href="javascript:void(0);">&larr;</a></span>' +
        '   <span class="next"><a href="javascript:void(0);">&rarr;</a></span>' +
        '   <span class="month"><span>' +
        "</caption>" +
        "<thead><tr>" +
        tHead +
        "</tr></thead>" +
        "<tbody>" +
        "</tbody>" + "</table>";
        var html = $(tpl);
        _this.append(html);
    };

    function daysInMonth(d) {
        var newDate = new Date(d);
        newDate.setMonth(newDate.getMonth() + 1);
        newDate.setDate(0);
        return newDate.getDate();
    }

    _this.update = function (date) {
        var mDate = new Date(date);
        mDate.setDate(1); /* start of the month */
        var day = mDate.getDay(); /* value 0~6: 0 -- Sunday, 6 -- Saturday */
        mDate.setDate(mDate.getDate() - day) /* now mDate is the start day of the table */

        function dateToTag(d) {
            var tag = $('<td><a href="javascript:void(0);"></a></td>');
            var a = tag.find('a');
            a.text(d.getDate());
            a.data('date', dateToStr(d));
            if (date.getMonth() != d.getMonth()) { // the bounday month
                tag.addClass('off');
            } else if (_this.data('date') == a.data('date')) { // the select day
                tag.addClass('active');
                _this.data('date', dateToStr(d));
            }
            return tag;
        };

        var tBody = _this.find('tbody');
        tBody.empty(); /* clear previous first */
        var cols = Math.ceil((day + daysInMonth(date))/7);
        for (var i = 0; i < cols; i++) {
            var tr = $('<tr></tr>');
            for (var j = 0; j < 7; j++, mDate.setDate(mDate.getDate() + 1)) {
                tr.append(dateToTag(mDate));
            }
            tBody.append(tr);
        }

        /* set month head */
        var monthStr = dateToStr(date).replace(/-\d+$/, '');
        _this.find('.month').text(monthStr)
    };

    _this.getCurrentDate = function () {
        return _this.data('date');
    }

    _this.init();
    /* in date picker mode, and input date is empty,
     * should not update 'data-date' field (no selected).
     */
    var initDate = opts.date? opts.date: new Date();
    if (opts.date || !opts.picker) {
        _this.data('date', dateToStr(initDate));
    }
    _this.update(initDate);

    /* event binding */
    _this.delegate('tbody td', 'click', function () {
        var $this = $(this);
        _this.find('.active').removeClass('active');
        $this.addClass('active');
        _this.data('date', $this.find('a').data('date'));
        /* if the 'off' tag become selected, switch to that month */
        if ($this.hasClass('off')) {
            _this.update(strToDate(_this.data('date')));
        }
        if (opts.picker) {  /* in picker mode, when date selected, panel hide */
            _this.hide();
        }
    });

    function updateTable(monthOffset) {
        var date = strToDate(_this.find('.month').text());
        date.setMonth(date.getMonth() + monthOffset);
        _this.update(date);
    };

    _this.find('.next').click(function () {
        updateTable(1);

    });

    _this.find('.prev').click(function () {
        updateTable(-1);
    });

    return this;
};

$.fn.calendar.defaults = {
    date: new Date(),
    picker: false,
};

$.fn.datePicker = function () {
    var _this = this;
    var picker = $('<div></div>')
        .addClass('picker-container')
        .hide()
        .calendar({'date': strToDate(_this.val()), 'picker': true});

    _this.after(picker);

    /* event binding */
    // click outside area, make calendar disappear
    $('body').click(function () {
        picker.hide();
    });

    // click input should make calendar appear
    _this.click(function () {
        picker.show();
        return false; // stop sending event to docment
    });

    // click on calender, update input
    picker.click(function () {
        _this.val(picker.getCurrentDate());
        return false;
    });

    return this;
};

$(window).load(function () {
    $('.jquery-calendar').each(function () {
        $(this).calendar();
    });
    $('.date-picker:text').each(function () {
        $(this).datePicker();
    });
});

}($));

我看过的每一本书、每一篇文章或每一段视频都说,你不应该把Angular和JQuery混为一谈,除了边缘的情况。您应该让Angular处理所有DOM操作。标记和javascript之间的相关性是什么?你能提供更多的代码吗?@Rodementou我已经添加了插件代码,因为它有一个angularjs日期选择器,请停止在Angular中使用Jquery