Некоторое время назад, задавшись вопросом, как самым удобным образом предоставить оператору вводить дату, я наткнулся на 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(); } });