Last active
February 1, 2016 13:16
-
-
Save at0g/db917ef76676d934a0e4 to your computer and use it in GitHub Desktop.
An example of using aldeen:autoform with dual date pickers. There is custom validation where the endDate must be between 3 days and 3 weeks from the start date.
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
| <head> | |
| <title>Datepicker range example</title> | |
| </head> | |
| <body> | |
| <h1>Welcome to Meteor!</h1> | |
| <div class="container"> | |
| {{> thingsForm }} | |
| </div> | |
| </body> | |
| <template name="exampleForm"> | |
| {{> quickForm collection="Examples" type="insert"}} | |
| </template> |
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
| Examples = new Meteor.Collection('examples'); | |
| SimpleSchema.messages({ | |
| 'endDateMin': 'The closing date must be at least 3 days after the start date', | |
| 'endDateMax': 'The closing date must be no later than 21 days after the start date' | |
| }); | |
| var getStartDate = function () { | |
| var now = moment(); | |
| now.subtract(now.minutes() % 15, 'minutes').seconds(0).milliseconds(0); | |
| return now; | |
| }; | |
| Examples.attachSchema(new SimpleSchema({ | |
| startDate: { | |
| type: Date, | |
| label: 'Start', | |
| defaultValue: getStartDate().toDate(), | |
| autoform: { | |
| afFieldInput: { | |
| type: 'bootstrap-datetimepicker', | |
| dateTimePickerOptions: { | |
| format: 'DD MMMM YYYY, h:mm a', | |
| minDate: getStartDate(), | |
| maxDate: getStartDate().add(2, 'weeks'), | |
| minuteStepping: 15 | |
| } | |
| } | |
| } | |
| }, | |
| endDate: { | |
| type: Date, | |
| label: 'Closes', | |
| defaultValue: getStartDate().add(3, 'days').toDate(), | |
| autoform: { | |
| afFieldInput: { | |
| type: 'bootstrap-datetimepicker', | |
| dateTimePickerOptions: { | |
| format: 'DD MMMM YYYY, h:mm a', | |
| minDate: getStartDate().add(3, 'days'), | |
| maxDate: getStartDate().add(3, 'weeks'), | |
| minuteStepping: 15 | |
| } | |
| } | |
| }, | |
| custom: function(){ | |
| var startField = this.field('startDate'); | |
| var val = moment(this.value); | |
| var min = moment(startField.value).add(3, 'days'); | |
| var max = moment(startField.value).add(3, 'weeks'); | |
| if (val < min) { | |
| return 'endDateMin'; | |
| } | |
| else if (val > max) { | |
| return 'endDateMax'; | |
| } | |
| } | |
| } | |
| }) ); | |
| if (Meteor.isClient) { | |
| Template.exampleForm.events({ | |
| 'dp.change [name="startDate"]': function(evt){ | |
| var $end = $('[name="endDate"]'); | |
| if ($end && $end.data('DateTimePicker')) { | |
| var data = $end.data('DateTimePicker'); | |
| var minDate = evt.date.clone().add(3, 'days'); | |
| var maxDate = evt.date.clone().add(3, 'weeks'); | |
| data.setMinDate(minDate); | |
| data.setMaxDate(maxDate); | |
| data.setDate(minDate) | |
| ; | |
| } | |
| } | |
| }) | |
| } |
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
| # file: .meteor/packages | |
| # Meteor packages used by this project, one per line. | |
| # Check this file (and the other files in this directory) into your repository. | |
| # | |
| # 'meteor add' and 'meteor remove' will edit this file for you, | |
| # but you can also edit it by hand. | |
| meteor-platform | |
| autopublish | |
| insecure | |
| aldeed:collection2 | |
| aldeed:autoform | |
| twbs:bootstrap | |
| aldeed:autoform-bs-datetimepicker | |
| tsega:bootstrap3-datetimepicker@=3.1.3_3 | |
| momentjs:moment |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Ben,
I have two little questions concerning your gist:
2 L72 and L73: evt.date is undefined when I catch the 'change...' event. Besides, I find no other way to get to the date data of the startDate datepicker other than the following ugly code. Do you have a suggestion?
var
var maxDate = $beg.data('DateTimePicker').date
BR, Carsten