Created
July 27, 2015 07:59
-
-
Save simahawk/6dbe6755f846d55284fb to your computer and use it in GitHub Desktop.
Plone z3c.form datetime widget pure JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| "use strict"; | |
| if ((typeof window.widgets) === 'undefined') { | |
| window.widgets = {}; | |
| } | |
| var widgets = window.widgets; | |
| widgets.CalendarWidget = function (wrapper, settings) { | |
| var self = this; | |
| self.$wrapper = $(wrapper); | |
| self.$year_sel = $('[name$="-year"]', self.$wrapper); | |
| self.$month_sel = $('[name$="-month"]', self.$wrapper); | |
| self.$day_sel = $('[name$="-day"]', self.$wrapper); | |
| // inject calendar trigger and date keeper | |
| var calendar_input = document.createElement('input'); | |
| calendar_input.type = 'hidden'; | |
| calendar_input.name = 'calendar-starter'; | |
| self.$year_sel.after(calendar_input); | |
| self.$cal_starter = $('input[name="calendar-starter"]', self.$wrapper); | |
| self.init(); | |
| }; | |
| widgets.CalendarWidget.prototype = { | |
| init: function () { | |
| var self = this; | |
| // XXX: we need to get this from some plone JS var | |
| jQuery.tools.dateinput.localize("it", { | |
| months: "gennaio,febbraio,marzo,aprile,maggio,giugno,luglio,agosto,settembre,ottobre,novembre,dicembre", | |
| shortMonths: "gen,feb,mar,apr,mag,giu,lug,ago,set,ott,nov,dic", | |
| days: "domenica,lunedì,martedì,mercoledì,giovedì,venerdì,sabato", | |
| shortDays: "dom,lun,mar,mer,gio,ven,sab" | |
| }); | |
| self.$cal_starter.dateinput({ | |
| selectors: true, | |
| trigger: true, | |
| format: 'mm/dd/yyyy', | |
| yearRange: [-10, 10], | |
| firstDay: 1, | |
| lang: 'it', | |
| value: new Date(), | |
| change: function() { | |
| var value = this.getValue("yyyy-m-d").split("-"); | |
| self.$year_sel.val(value[0]); | |
| self.$month_sel.val(value[1]); | |
| self.$day_sel.val(value[2]); | |
| } | |
| }).unbind('change') | |
| .bind('onShow', function(event) { | |
| var trigger_offset = jQuery(this).next().offset(); | |
| jQuery(this).data('dateinput').getCalendar().offset({ | |
| top: trigger_offset.top + 20, | |
| left: trigger_offset.left | |
| }); | |
| }); | |
| self.updateCalendar(); | |
| self.$wrapper.addClass('calendar-on'); | |
| }, | |
| updateCalendar: function () { | |
| var self = this, | |
| y = self.$year_sel.val(), | |
| m = self.$month_sel.val(), | |
| d = self.$day_sel.val(); | |
| if (!y || !m || !d) { | |
| return; | |
| } | |
| var newDate = new Date(m + '/' + d + '/' + y); | |
| if (newDate.getYear()) { // return NaN (which is false) if the date is invalid | |
| self.$cal_starter.val(m + '/' + d + '/' + y); | |
| self.$cal_starter.data()['dateinput'].setValue(newDate); | |
| } | |
| } | |
| } | |
| $.fn.extend({ | |
| calendarwidget: function (options) { | |
| return this.each(function () { | |
| var settings = $.extend(true, {}, options), | |
| $this = $(this), | |
| data = $this.data('calendarwidget'), | |
| calendarwidget; | |
| // If the plugin hasn't been initialized yet | |
| if (!data) { | |
| calendarwidget = new widgets.CalendarWidget(this, settings); | |
| $(this).data('calendarwidget', { | |
| target: $this, | |
| calendarwidget: calendarwidget | |
| }); | |
| } | |
| }); | |
| } | |
| }); | |
| widgets.init_datagrid_calendar = function () { | |
| $('.datagridwidget-row:visible').calendarwidget(); | |
| // this event is triggered every time you initialize a calendar widget | |
| // leading to recursion errors due to infinite row appending! | |
| // $(document).on('afteraddrowauto', | |
| // '.datagridwidget-table-view', | |
| // function(event, dgf, row) { | |
| // console.log(row); | |
| // $(row).calendarwidget(); | |
| // }); | |
| $('.datagridwidget-table-view').bind('DOMNodeInserted', function(evt){ | |
| //do what you want. | |
| if(evt.target.tagName == 'TR'){ | |
| // new row added | |
| $(evt.target).calendarwidget(); | |
| } | |
| }); | |
| }; | |
| $(document).ready(function () { | |
| widgets.init_datagrid_calendar(); | |
| }); | |
| }(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment