Добавить список дат в массив, проверить и получить максимальное значение - PullRequest
Новая
       11

Добавить список дат в массив, проверить и получить максимальное значение

2 голосов
/ 17 ноября 2009

У меня есть несколько полей ввода, как показано ниже: 

<input type="text" name="date_1" class="dataList" value="2009-12-30" />
<input type="text" name="date_2" class="dataList" value="2007-06-12" />
<input type="text" name="date_3" class="dataList" value="2009-10-23" />


<input type="text" name="date_max" class="result" value="0000-00-00" />

Я должен сделать что-то вроде этого:

1) Добавить в массив список дат из всех полей ввода с атрибутом class = "dataList" (поля содержат дату в формате гггг-мм-дд)

2) Убедитесь, что все поля заполнены, и проверьте, все ли даты в хорошем формате (месяц не более 12, день не более 31, длина всех квалифицированных 10 символов)

3A) Если условия из второй точки верны, то:

- сортировка массива от максимального до минимального значения

- получить первый элемент из массива и установить для него значение ввода с именем = "data_max"

3B) Если условия из второй точки ложные, то:

- получить «0000-00-00» и установить его в значение ввода с именем = «data_max»

Я сделал все это в PHP, но я хочу сделать это в jQuery.

В jQuery я могу обновлять в реальном времени значение поля data_max.

Пожалуйста, дайте мне несколько советов, какие функции мне следует использовать.

Ответы [ 3 ]

3 голосов
/ 17 ноября 2009

Попробуй это ... 

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        var dataList = new Array();
        $(document).ready(function()
        {
            update();
        });

        function update()
        {
            dataList = new Array();
            $('.dataList').each(function(i)
            {
                dataList[i] = this.value;
            });

            if(confirmDates(dataList))
            {
                // Perform sort from max to min
                dataList.sort();
                dataList.reverse();

                $("input[name$='date_max']").val(dataList[0]);
            }
            else
            {
                $("input[name$='date_max']").val("0000-00-00");
            }
        }

        function confirmDates(arrayList)
        {
            for(var i in arrayList)
            {
                // Check length is 10
                if(arrayList[i].length != 10)
                    return false;

                // Check month not more than 12
                var year = arrayList[i].substring(0, 4);
                var month = arrayList[i].substring(5, 7);
                var day = arrayList[i].substring(8, 10);

                if(parseInt(month) > 12 || parseInt(day) > 31)
                    return false;
            }

            return true;
        }
    </script>
</head>
<body>                                                       
    <input type="text" name="date_1" class="dataList" value="2009-12-30" />
    <input type="text" name="date_2" class="dataList" value="2007-06-12" />
    <input type="text" name="date_3" class="dataList" value="2009-10-23" />
    <input type="text" name="date_max" class="result" value="0000-00-00" />
    <button onclick="update()" value="Update" />
</body>
</html>
1 голос
/ 17 ноября 2009

При работе с датами всегда лучше всего использовать доступные объекты Date. Приведенный ниже код сделает то, что вы просили, за исключением подробных ошибок о том, почему дата недействительна.

Если вам нужна более подробная ошибка, вы можете добавить ее в метод getValidDateObject ().

даты добавляются в массив по их значению в миллисекундах с полуночи 1 января 1970 года, который встроен в javascript согласно w3schools . Это позволяет правильно сортировать даты, а не сравнивать строки.

Далее, когда вы работаете с актуальными объектами даты, вы можете изменить метод getShortDateString (), чтобы он возвращался в любом формате, который вы пожелаете!

Блок HTML 

      Test Values<br />
      <input type="text" name="date_1" class="dataList" value="2009-12-30"> 
      <input type="text" name="date_2" class="dataList" value="2007-06-12">
      <input type="text" name="date_3" class="dataList" value="2009-10-23">
      <br />
      Max Date    
      <input type="text" name="date_max" class="result" value="">
      <br /><br />
      <a href='javascript:getMax();'>Find Max Date</a>

Основная функция 

function getMax(){  

    var dates = new Array();    
    var dateStrings = $('.dataList');       

    $.each(dateStrings , function(i, date){ 
        var strDate = $(date).val();
        var objDate = getValidDateObject(strDate);

        if (!objDate){
            $("input[name$='date_max']").val('0000-00-00');
            throw new Error('Invalid Date: ' + strDate);
        }

        dates[i] =  objDate.getTime();          
    });

    dates.sort();
    dates.reverse();

    var d2 = new Date(dates[0]);
    var maxDateString = getShortDateString(d2);

    $("input[name$='date_max']").val(maxDateString);    
}

Вернуть действительный объект Date 

function getValidDateObject(strDate){

    strDate = strDate.replace(/[-]/g,'/')
var objDate = new Date(strDate);

    if (objDate == 'Invalid Date') {
        alert('bad input: ' + strDate);         
        return false;
    }
    return objDate; 
}

Возвращает отформатированную строку даты 

function getShortDateString(objDate){
        var y = objDate.getFullYear();
        var m = objDate.getMonth() + 1;
        var d = objDate.getDate();

        if (m < 10) m = "0" + m; 
        if (d < 10) d = "0" + d;

        var strDate = y + '-' + m + '-' + d;

        return strDate;
}
0 голосов
/ 17 ноября 2009

Я думаю, вы обнаружите, что многие из описанных вами задач могут быть выполнены, если вы потратите пару часов на некоторые уроки jQuery. официальные уроки довольно хороши. «Как работает jQuery» и «Начало работы с jQuery» просто отлично. Google еще немного, если вы не удовлетворены.

JavaScript-объект Date () общеизвестно уродлив, но вам, вероятно, придется его использовать.

1) Этот селектор должен позволить вам собрать все входные значения:

var dates = $('input.dataList, input.result');

2) Я бы предложил поискать существующий код проверки даты, а не писать свой собственный. Если вы обнаружите, что это сложно, то вы можете использовать метод jQuery $.post (чтобы отправить свои данные в скрипт PHP, выполнить проверку там и сообщить о результатах обратно.

3) Для сортировки массива может потребоваться написать настраиваемый обратный вызов сортировки . Этот обратный вызов может работать с массивом элементов jQuery и использовать метод val() для извлечения этих значений.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...