Convert Rails style date input to jQuery Tools' dateinput

dateinput_converter.js

// Based on http://snipt.net/boriscy/datetime-jquery-formtastic/

$.tools.dateinput.localize("ja", {
  months: '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',
  shortMonths: '1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月',
  days: '日曜日,月曜日,火曜日,水曜日,木曜日,金曜日,土曜日',
  shortDays: '日,月,火,水,木,金,土'
});
$.tools.dateinput.conf.format = 'yyyy-mm-dd';

$(document).ready(function() {
  $.tools.dateinput.conf.lang = $('html').attr('lang');
  $('div.date, div.datetime').each(function(i, el) {
    var sels = $(el).find("select:lt(3)");
    var d = new Date(sels[0].value, parseInt(sels[1].value) - 1, sels[2].value);
    var dateinput = $("<input type='date'>").dateinput({ value: d} );

    // Without this, the field is initially blank
    dateinput.val(dateinput.data().dateinput.getValue($.tools.dateinput.conf.format));

    dateinput.change(function(event, date) {
      $(sels[0]).val(date.getFullYear());
      $(sels[1]).val(date.getMonth() + 1);
      $(sels[2]).val(date.getDate());
    });
    $(sels[0]).before(dateinput);
    $(sels).hide();
  });
});

Post JQuery Tools 1.2.6, replace line 21 with:

dateinput.bind('beforeChange', function(event, date) {

Does this work when displaying a new form which has blank values for the day, month and year dropdowns? If not, have you any idea what it would take to fix it?

Thanks Col

This is what I've got if it's any use to anyone or anyone wants to point out any issues I've missed. It uses .delegate for my dynamically added date fields and works with empty fields or if there's a date when loading (dynamic fields are empty anyway). Considering I'm doing "$(new element).dateinput()", I don't understand why I still need to bind .dateinput to the new element using .delegate if anyone can explain.

$(document).ready(function() {
  $.tools.dateinput.conf.format = 'ddd, d mmmm yyyy';

  $('.date').each(function(i, el) {
    var sels = $(el).find("select:lt(3)");
    var d = new Date(sels[2].value, parseInt(sels[1].value) - 1, sels[0].value);
    var initDate = (isValidDate(d)) ? d : '';
    var dateField = $("<input type='text' class='date-field'>").dateinput({ value: initDate} );

    // adapted from http://stackoverflow.com/questions/7313573/jquery-delegate-and-datepicker
    $("body").delegate(".date-field", "load focusin", function(){
       $(this).dateinput();
    });

    // Without this, the field is initially blank
    if (initDate !== '') {
      dateField.val(dateField.data().dateinput.getValue($.tools.dateinput.conf.format));
    }

    dateField.bind('beforeChange', function(event, date) {
      $(sels[2]).val(date.getFullYear());
      $(sels[1]).val(date.getMonth() + 1);
      $(sels[0]).val(date.getDate());
    });
    $(sels[0]).before(dateField);
    $(sels).hide();
  });

  function isValidDate(d) {
    return (Object.prototype.toString.call(d) === "[object Date]" && !isNaN(d.getTime()));
  }

});