Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Convert Rails style date input to jQuery Tools' dateinput
// 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();
});
});
@micahcraig

This comment has been minimized.

Copy link

commented Jan 28, 2012

Post JQuery Tools 1.2.6, replace line 21 with:

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

This comment has been minimized.

Copy link

commented Mar 14, 2012

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

@amnesia7

This comment has been minimized.

Copy link

commented Mar 16, 2012

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()));
  }

});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.