jQuery datepicker无法识别月份的单词

时间:2019-01-15 11:53:25

标签: jquery datepicker

所以我有这个日期选择器,它必须帮助用户选择一个日期。我无法让它识别以某种方式写成的月份,例如jan,feb,Feb等。

编辑:我为每个月制作了一个循环,检查两个变量是否都具有月份,并且现在可以正常工作。我想使它与像这样的数组一起工作:

    var months = [
    {
        abbr: 'Jan',
        name: 'January'
    }];

所以我也可以使用全名。我会尝试自己创建全名,然后将结果发布在这里。

编辑的Datepicker jQuery:

        (function ($) {
        //date autocomplete
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        var date = $('.nf-datepicker');
        var value = 1;
        var value1 = 1;
        var value2 = 1;
        var year = new Date().getFullYear();
        var inputLength = 0;
        $('.nf-datepicker').on('keyup', function (e) {
            if (e.which != 37 && e.which != 38 && e.which != 39 && e.which != 40) {
                inputLength = date.val().length;
                if (inputLength > 3) {
                    value = $(this).val();
                    value = value.replace(new RegExp("/\|\-|\,|\\s|//", "g"), '.');
                    value1 = value.split('.')[1];
                    value2 = value.substr(0, value.indexOf('.'));
                    $('.nf-datepicker-dropdown').show();
                        if (value1 > 12 || value2 > 12) {
                        $('.option1').show().text(value1 + ' ' + months[value2 - 1])
                        $('.option2').show().text(value2 + ' ' + months[value1 - 1])
                        if (value1 > 12) {
                            $('.option2').hide();
                        }
                        if (value2 > 12) {
                            $('.option1').hide();
                            $('.option2').attr('tabindex', '2');
                        } else {
                            $('.option1').attr('tabindex', '2');
                            $('.option2').attr('tabindex', '3');
                        }
                    } else if (typeof value1 === 'undefined' || typeof value2 === 'undefined') {
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date.');
                    } else {
                        $('.option1').show().text(value1 + ' ' + months[value2 - 1] + ' ' + year)
                        $('.option2').show().text(value2 + ' ' + months[value1 - 1] + ' ' + year)
                    }

                    if (inputLength > 6 && inputLength - value.substr(value.lastIndexOf('.')) > 3) {
                        if((value.indexOf("") > -1)){

                        }else{

                        }
                        year = value.substr(value.lastIndexOf('.') + 1, inputLength);
                        if (typeof value1 === 'undefined' || typeof value2 === 'undefined' || typeof year === 'undefined') {
                            $('.option2').hide();
                            $('.option1').show().text('Please, enter valid date.');
                        } else {
                            $('.option1').text(months[value2 - 1] + ' ' + value1 + ' ' + year);
                            $('.option2').text(value2 + ' ' + months[value1 - 1] + ' ' + year);
                        }
                    }
                } 
                for (let i = 0; i < months.length; ++i) {
                    if (value1 === months[i] || value1 === months[i].toLowerCase() || value1 === months[i].toUpperCase()) {
                        value1 = i + 1;
                        $('.option1').hide();    
                        $('.option2').show().text(value2 + ' ' + months[value1 - 1] + ' ' + year);
                    }
                    else if (value2 === months[i] || value2 === months[i].toLowerCase() || value2 === months[i].toUpperCase()){
                        value2 = i + 1;
                        $('.option2').hide();
                        $('.option1').show().text(value1 + ' ' + months[value2 - 1] + ' ' + year);
                    }
                }
                    if (value1 > 31 || value2 > 31) {       //There is no month with more than 31 days
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date. There is no month with more than 31 days.');
                    } else if ((value1 == 2 || value2 == 2) && (value1 > 29 || value2 > 29)) {        //February has maximum 29 days
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date. February has no more than 28(29) days.');
                    } else if (inputLength > 3 && ((value1 % 2 == 0 && value1 < 8 && value1 < 13) || (value2 % 2 == 0 && value2 < 8 && value2 < 13)) && (value1 > 30 || value2 > 30)) {      //Month has maximum 30 days
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date. This month has only 30 days.');
                    } else if (inputLength > 3 && ((value1 % 2 != 0 && value1 > 7 && value1 < 13) || (value2 % 2 != 0 && value2 > 7 && value2 < 13)) && (value1 > 30 || value2 > 30)) {      //Month has maximum 30 days
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date. This month has only 30 days.');
                    } else if (value1 > 12 && value2 > 12) {
                        $('.option2').hide();
                        $('.option1').show().text('Please, enter valid date.');
                    }
            }
        });
        $('.nf-datepicker, .option').on('keydown', function (e) {
            if (e.which === 40) { //enter key
                var tabindex = $(this).attr('tabindex');
                tabindex++; //increment tabindex
                $('[tabindex=' + tabindex + ']').focus();
            }
            if (e.which === 38) { //enter key
                var tabindex = $(this).attr('tabindex');
                tabindex--; //increment tabindex
                $('[tabindex=' + tabindex + ']').focus();
            }
        });
        $('.option').on('keypress', function (e) {
            if (e.which === 13) { //enter key
                var text = $('.option:focus').text();
                var newDate = text.toString();
                console.log(newDate);
                var currentDate = new Date;
                newDate = Date.parse(newDate);
                if (new Date(newDate) > currentDate) {
                    $('.option2').hide();
                    $('.option1').show().text('Sorry, you can\'t enter future date.');
                } else if (new Date(newDate) < new Date("1.1.1970")) {
                    $('.option2').hide();
                    $('.option1').show().text('Sorry, you can\'t enter year earlier than 1970.');
                } else {
                    $('.nf-datepicker').attr('data-user-value', newDate);
                    $('.nf-datepicker').val(text);
                }
                $('.nf-datepicker-dropdown').hide();
            }
        });
        $('.nf-datepicker-dropdown li').on('click', function () {
            var text = $('.option:focus').text();
            var newDate = text.toString();
            var currentDate = new Date;
            newDate = Date.parse(newDate);
            if (new Date(newDate) > currentDate) {
                $('.option2').hide();
                $('.option1').show().text('Sorry, you can\'t enter future date.');
            } else if (new Date(newDate) < new Date("1.1.1970")) {
                $('.option2').hide();
                $('.option1').show().text('Sorry, you can\'t enter year earlier than 1970.');
            } else {
                $('.nf-datepicker').attr('data-user-value', newDate);
                $('.nf-datepicker').val(text);
            }
            $('.nf-datepicker-dropdown').hide();
        });
        //get date by buttons
        $('.get-date').on('click', function () {
            var days = $(this).data('days');
            var date = new Date();
            var todayTimeStamp = +new Date; // Unix timestamp in milliseconds
            var oneDayTimeStamp = 1000 * 60 * 60 * 24; // Milliseconds in a day
            var diff = todayTimeStamp - days * oneDayTimeStamp;
            var chosenDate = new Date(diff);
            date = chosenDate.getDate() + ' ' + months[chosenDate.getMonth()] + ' ' + chosenDate.getFullYear();
            $('.nf-datepicker').attr('data-user-value', Date.parse(date));
            $('.nf-datepicker').val(date);
        });
        $('.nf-timepicker').on('click', function () {
            var date = new Date();
            var time = date.getHours() + ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
            $('.nf-timepicker').attr('data-time', time);
            $('.nf-timepicker').val(time);
        });
        $('.get-time').on('click', function () {
            var time = $(this).data('time');
            $('.nf-timepicker').attr('data-time', time);
            $('.nf-timepicker').val(time);
        });
        var digitsOnly = /[1234567890]/g;
        var symbols = /\:/g;
        $('.nf-timepicker').on('keypress', function (e) {
            var code = e.keyCode;
            var character = String.fromCharCode(code);
            if (character.match(digitsOnly) || character.match(symbols)) {
                return true;
            } else {
                return false;
            }
        });
        $('.nf-timepicker').on('keyup', function (e) {
            var value = $('.nf-timepicker').val();
            var hours = value.substr(0, value.indexOf(':'));
            var minutes = value.substr(value.indexOf(':') + 1, value.length);
            var closestField = $(this).closest('.nf-form-field');
            var countSemicolon = value.toString().match(/\:/g || []).length > 1;
            if (hours > 23 || countSemicolon) {
                closestField.addClass('error');
            } else if (minutes > 59 || countSemicolon) {
                closestField.addClass('error');
            } else {
                closestField.removeClass('error');
            }
            $('.nf-timepicker').attr('data-time', value);
        });
        $('.close-popup, .popup-blackout').on('click', function () {
            $('.main-popup').hide('fast');
        });
        $(".main-popup .popup-blackout .popup-window").click(function (e) {
            e.stopPropagation();
        });
    }(jQuery));

我为此做了很多工作,所以我不想做已经完成的事情,但是我无法弄清这里缺少什么,我将非常感谢您的帮助。

LIVE DEMO

0 个答案:

没有答案