Archive for the ‘jquery’ Category

DateJS и Jeditable.

10 марта, 2009

Некоторое время назад, задавшись вопросом, как самым удобным образом предоставить оператору вводить дату, я наткнулся на Datejs, которая парсит «человеческие» даты и делает из них «машинные». Т.е. вы ей пишите «today», «after 3 days» или «next friday», а она транслирует это в какое-нибудь «2009-03-13» соответственно. Очень удобно. При этом она понимает так же «17 2 2007», т.е. подходит не только для дат, которые поблизости. Это было то, что нужно.
А недавно, мне захотелось сделать «in-place edit», т.е. чтобы поле выглядело как текст, а при клике на него превращалось в input, checkbox или select. Мне больше всего понравился plug-in к jQuery под названием Jeditable. Все в нем было так, как нужно и даже был API для написания «custom inputs». Поэтому я незамедлительно скрестил Jeditable и Datejs, что здесь и выложу. Может кому-то пригодится, а может кто-то мне подскажет, как обработать «cancel on blur» =)
js-code

$.editable.addInputType('datejs', {
    element : function(settings, original) {
        rand = new Date().getTime();
        var input_date = $('');
        var guess_date = $('');
        var real_date = $('');
        $(this).append(input_date);
        $(this).append(real_date);
        $(this).append(guess_date);
        
        var messages = ["o_O"];
        var date = null;
        var input_empty = "Вводим дату сюда";
        var empty_string = "Пока угадывать нечего";
        if (input_date.val() == "") {
            input_date.val(input_empty);
            guess_date.val(empty_string);
        }
        input_date.keyup( 
            function (e) {
                if (input_date.val().length > 0) {
                    date = Date.parse(input_date.val());
                    if (date !== null) {
                        guess_date.val(date.toString("
                        ddd, dd MMMM, yyyy
                        "));
                        real_date.val(date.toString("yyyy-MM-dd"));
                    } else {
                        guess_date.val("o_O");
                    }
                } else {
                    guess_date.val(empty_string);
                }
            }
        );
        input_date.focus( 
            function (e) {
                if (input_date.val() === input_empty) {
                    input_date.val("");
                }
            }
        );
        input_date.blur( 
            function (e) {
                if (input_date.val() === "") {
                    input_date.val(input_empty);
                }
            }
        );

        return(real_date);
    },
    submit: function(settings, original) {
        var value = $('#rd_').val();
        $("#rd_" + rand, this).val(value);
    },
    content: function(string, settings, original) {
        $("#id_" + rand, this).val(string);
        $("#rd_" + rand, this).val(string);
        $("#id_" + rand, this).keyup();
    }
});