diff --git a/README.md b/README.md index 6fe2f30..a9a8e58 100644 --- a/README.md +++ b/README.md @@ -61,31 +61,32 @@ This method creates a calendar instance and associates it to the provided `elem` Creating a calendar has a ton of options. These have reasonable defaults that are easy to adjust, too. The options are listed below. -Option | Description --------------------|-------------------------------------------------------------------------------------------------- -`appendTo` | DOM element where the calendar will be appended to. Takes `'parent'` as the parent element -`autoClose` | When set to `true`, the calendar is auto-closed when picking a day _(or a time if `time: true` and `date: false`). A value of `'time'` will only auto-close the calendar when a time is picked. -`autoHideOnBlur` | Hides the calendar when focusing something other than the input field -`autoHideOnClick` | Hides the calendar when clicking away -`date` | The calendar shows days and allows you to navigate between months -`dateValidator` | Function to validate that a given date is considered valid. Receives a native `Date` parameter. -`dayFormat` | Format string used to display days on the calendar -`initialValue` | Value used to initialize calendar. Takes `string`, `Date`, or `moment` -`inputFormat` | Format string used for the input field as well as the results of `rome` -`invalidate` | Ensures the date is valid when the field is blurred -`strictParse` | Compares input strictly against `inputFormat`, and partial matches are discarded -`max` | Disallow dates past `max`. Takes `string`, `Date`, or `moment` -`min` | Disallow dates before `min`. Takes `string`, `Date`, or `moment` -`monthFormat` | Format string used by the calendar to display months and their year -`monthsInCalendar` | How many months get rendered in the calendar -`required` | Is the field required or do you allow empty values? -`styles` | CSS classes applied to elements on the calendar -`time` | The calendar shows the current time and allows you to change it using a dropdown -`timeFormat` | Format string used to display the time on the calendar -`timeInterval` | Seconds between each option in the time dropdown -`timeValidator` | Function to validate that a given time is considered valid. Receives a native `Date` parameter. -`weekdayFormat` | Format used to display weekdays. Takes `min` _(Mo)_, `short` _(Mon)_, `long` _(Monday)_, or an array with seven strings of your choosing. -`weekStart` | Day considered the first of the week. Range: Sunday `0` - Saturday `6` +Option | Description +----------------------|-------------------------------------------------------------------------------------------------- +`appendTo` | DOM element where the calendar will be appended to. Takes `'parent'` as the parent element +`autoClose` | When set to `true`, the calendar is auto-closed when picking a day _(or a time if `time: true` and `date: false`). A value of `'time'` will only auto-close the calendar when a time is picked. +`autoHideOnBlur` | Hides the calendar when focusing something other than the input field +`autoHideOnClick` | Hides the calendar when clicking away +`date` | The calendar shows days and allows you to navigate between months +`dateValidator` | Function to validate that a given date is considered valid. Receives a native `Date` parameter. +`dayFormat` | Format string used to display days on the calendar +`initialValue` | Value used to initialize calendar. Takes `string`, `Date`, or `moment` +`inputFormat` | Format string used for the input field as well as the results of `rome` +`invalidate` | Ensures the date is valid when the field is blurred +`strictParse` | Compares input strictly against `inputFormat`, and partial matches are discarded +`max` | Disallow dates past `max`. Takes `string`, `Date`, or `moment` +`min` | Disallow dates before `min`. Takes `string`, `Date`, or `moment` +`monthFormat` | Format string used by the calendar to display months and their year +`monthsInCalendar` | How many months get rendered in the calendar +`required` | Is the field required or do you allow empty values? +`styles` | CSS classes applied to elements on the calendar +`time` | The calendar shows the current time and allows you to change it using a dropdown +`timeFormat` | Format string used to display the time on the calendar +`timeInterval` | Seconds between each option in the time dropdown +`timeValidator` | Function to validate that a given time is considered valid. Receives a native `Date` parameter. +`weekdayFormat` | Format used to display weekdays. Takes `min` _(Mo)_, `short` _(Mon)_, `long` _(Monday)_, or an array with seven strings of your choosing. +`weekStart` | Day considered the first of the week. Range: Sunday `0` - Saturday `6` +`horizontalAlignment` | Defines the alignment of calendar with the `input` element: `left`, `center`, `right` Note that in the case of input fields, when `initialValue` isn't provided the initial value is inferred from `elem.value` instead. In the case of inline calendars, `new Date()` will be used as a default if none is provided. diff --git a/src/calendar.js b/src/calendar.js index b7595c5..63a25b9 100644 --- a/src/calendar.js +++ b/src/calendar.js @@ -72,6 +72,7 @@ function calendar (calendarOptions) { api.getDate = getDate; api.getDateString = getDateString; api.getMoment = getMoment; + api.getRefCal = getRefCal api.hide = hide; api.next = addMonth; api.options = changeOptions; @@ -81,6 +82,10 @@ function calendar (calendarOptions) { api.setValue = setValue; api.show = show; + api.changeMonth = changeMonth; + api.subtractMonth = subtractMonth; + api.addMonth = addMonth; + eventListening(); ready(); @@ -116,6 +121,11 @@ function calendar (calendarOptions) { api.restore = init; api.setValue = napi; api.show = napi; + + api.changeMonth = napi; + api.subtractMonth = napi; + api.addMonth = napi; + api.off(); if (silent !== true) { @@ -167,8 +177,13 @@ function calendar (calendarOptions) { renderMonth(i); } - crossvent.add(back, 'click', subtractMonth); - crossvent.add(next, 'click', addMonth); + // Have to pass in functions that call the API otherwise you can't overload + crossvent.add(back, 'click', function () { + api.subtractMonth(); + }) + crossvent.add(next, 'click', function () { + api.addMonth(); + }); crossvent.add(datewrapper, 'click', pickDay); function renderMonth (i) { @@ -314,7 +329,7 @@ function calendar (calendarOptions) { function subtractMonth () { changeMonth('subtract'); } function addMonth () { changeMonth('add'); } - function changeMonth (op) { + function changeMonth (op, silent) { var bound; var direction = op === 'add' ? -1 : 1; var offset = o.monthsInCalendar + direction * getMonthOffset(lastDayElement); @@ -322,7 +337,7 @@ function calendar (calendarOptions) { bound = inRange(refCal.clone()); ref = bound || ref; if (bound) { refCal = bound.clone(); } - update(); + update(silent); api.emit(op === 'add' ? 'next' : 'back', ref.month()); } @@ -426,12 +441,18 @@ function calendar (calendarOptions) { return api; } - function setValue (value) { + function setValue (value, force) { var date = parse(value, o.inputFormat); if (date === null) { return; } - ref = inRange(date) || ref; + + if (force) { + ref = value + } else { + ref = inRange(date) || ref; + } + refCal = ref.clone(); update(true); @@ -591,7 +612,9 @@ function calendar (calendarOptions) { if (classes.contains(target, o.styles.dayDisabled) || !classes.contains(target, o.styles.dayBodyElem)) { return; } - var day = parseInt(text(target), 10); + var t = text(target) + var parsed = ref.localeData().preparse(t) + var day = parseInt(parsed, 10); var prev = classes.contains(target, o.styles.dayPrevMonth); var next = classes.contains(target, o.styles.dayNextMonth); var offset = getMonthOffset(target) - getMonthOffset(lastDayElement); @@ -662,6 +685,10 @@ function calendar (calendarOptions) { function getMoment () { return ref.clone(); } + + function getRefCal () { + return refCal + } } module.exports = calendar; diff --git a/src/defaults.js b/src/defaults.js index 2117b92..b224953 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -73,6 +73,8 @@ function defaults (options, cal) { if (o.monthFormat === no) { o.monthFormat = 'MMMM YYYY'; } if (o.dayFormat === no) { o.dayFormat = 'DD'; } if (o.styles === no) { o.styles = {}; } + + if (o.horizontalAlignment === no) { o.horizontalAlignment == 'left'; } o.styles._isStylesConfiguration = true; diff --git a/src/input.js b/src/input.js index 9725a9c..12c6307 100644 --- a/src/input.js +++ b/src/input.js @@ -39,7 +39,7 @@ function inputCalendar (input, calendarOptions) { input.value = o.initialValue.format(o.inputFormat); } - eye = bullseye(api.container, input); + eye = bullseye(api.container, input, { horizontalAlignment: o.horizontalAlignment }); api.on('data', updateInput); api.on('show', eye.refresh);