meteor-community-packages / meteor-autoform-bs-datetimepicker Goto Github PK

how to set date picker with range with 2 date picker?
(i know for bootstrap-datetimepicker, but don't on meteor)

https://github.com/comerc/meteor-autoform-bs-datetimepicker/tree/v4beta

It solved my problems with modal dialog, Opera and much more (datepicker should burn in hell)

Prerequisites

$ meteor add comerc:bs-datetimepicker
$ cd packages
$ git clone https://github.com/comerc/meteor-autoform-bs-datetimepicker.git
$ cd meteor-autoform-bs-datetimepicker
$ git checkout v4beta

add line to ./meteor/packages

aldeed:autoform-bs-datetimepicker

Usage

  autoform:
    afFieldInput:
      type: "bootstrap-datetimepicker"
      buttonClasses: null # 'glyphicon glyphicon-calendar', 'fa fa-calendar'
      outMode: null # 'utcDate', 'utcDateTime'
      timezoneId: null # http://momentjs.com/timezone/
      dateTimePickerOptions: {}
      isReactiveValue: true

I have a full calendar plugin, and I set the doc attribute of the quickForm template as the event I just clicked. The form sets the title and description, but not the start and end dates. It comes from the helper as "invalid date", but it is a valid date in the event variable, coming from the calendar plugin.

I am using this plugin for a date field.

When I submit the form and a validation error is there the value in the date field will automaticly reset to an empty value - so every time the form gets validated and there is any problem the datefield (even when the datefield isnt the problem) value gets reset to emtpy.

When I submit a form, the form gets reset and the datetime input looks like it's reset (it's blank in the input in the form), but if I retry submit the form without the datetime filled in, it will use the previous value for this input.
What should really happen is an error, because the field is set as required, but because it remembers the previous value, there's no error, it just submits.

I'm having the problems outlined here:

http://stackoverflow.com/questions/28788837/meteor-bootstrap-datetimepicker-throwing-errors-and-positioned-incorrectly

Also when I click submit I get the following error:
Uncaught TypeError: undefined is not a function
It happens on this line:
var m = this.data("DateTimePicker").getDate();

If anyone has any insight I would greatly appreciate it. Thank you.

Could update to last of datetimepicker?

Hi!

I'm using aldeed:moment-timezone and trying to set timezoneId up on my schema, as bellow:

afFieldInput: {
      type: 'bootstrap-datetimepicker',
      timezoneId: 'America/Sao_Paulo',
    },

But my datetime-picker locale doesn't change.

Hi,

After trying changed type to number on a schema field as this:

checkpoint_time_epoch: {
type: Number,
autoform: {
afFieldInput: {
type: "bootstrap-datetimepicker"
}
},
label: "checkpoint_time_epoch"
}

The form submission stop working. I want to store the epoch on that field.

What am I doing wrong?
Joao

Hi @aldeed,

I'm having a hard time pulling this off, I have two datepicker, effectivityDate and maturityDate.

The value of maturity date is based on the sum of a duration productRange and effectivityDate.

here's my change event:

'change input[name=effectivityDate]': function ( event, template ) {
    var effectivity = $( event.target ).val();
    var range = ( $( 'select[name=productRange]' ).val() );
    var duration = moment.duration( parseInt( range, 10 ), 'months' );
    var value = moment( effectivity ).add( duration ).format( 'MM-DD-YYYY' );
    template.$( 'input[name=maturityDate]' ).val( value );
  },

The above change event is working as expected, during creation of document, the value of maturityDate is successfully saved on db even if i didn't pick a date on the picker, however, if I update the document, let say, i pick a later effectivityDate the value maturityDate is working as expected, but when I click the submit button the value of maturityDate is not updated, I noticed that even if the value of maturityDate after I pick effectivityDate is correct, the date on the actual picker is the current value on the db, see image below:

notice the value of maturityDate it's 08-18-2016 but on the picker it's 08-16-2016 which is the current value on the db.

Here's my schema for maturityDate:

maturityDate: {
    type: Date,
    label: "Maturity Date",
    optional: true,
    autoform: {
      type: "bootstrap-datepicker",
      datePickerOptions: {
        format: 'mm-dd-yyyy',
        forceParse: false,
        useCurrent: false
      },
      afFormGroup: {
        'formgroup-class': 'col-xs-4 col-sm-4 col-lg-1'
      }
    }
  },

Is there an option to tell the picker to set the date based on the computation without selecting a date?

I'm getting the following error, even though I have mrt:moment-timezone in my packages file:

Exception in template helper: Error: If you specify a timezoneId, make sure that you've added a moment-timezone package to your app
    at Object.dateToNormalizedLocalDateAndTimeString (http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:483:15)
    at Object.AutoForm.addInputType.valueIn (http://localhost:3000/packages/aldeed_autoform-bs-datetimepicker.js?279246d1cf7d4b5603ac030d7466e9bc6e5ac0d1:79:40)
    at getInputValue (http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:1881:22)
    at Object.afFieldInputContext (http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:6028:17)
    at bindDataContext (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:2727:16)
    at Blaze._wrapCatchingExceptions (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1606:16)
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?7f53771c84a2eafac2b561c9796dda0d8af8e7f5:171:18)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?7f53771c84a2eafac2b561c9796dda0d8af8e7f5:108:25)
    at Object.Spacebars.dataMustache (http://localhost:3000/packages/spacebars.js?7f53771c84a2eafac2b561c9796dda0d8af8e7f5:140:39)
    at http://localhost:3000/packages/aldeed_autoform.js?b2b90d28d5cc29be68358bb3c8bb8a337992a7dd:5922:24

This is the collection: https://github.com/obvio171/rideboard/blob/master/lib/collections/rides.js

And this is the template: https://github.com/obvio171/rideboard/blob/master/client/rides/templates/rides_list.html

This error only happens when editing, not when inserting.

Any ideas on how to fix this? Thanks!

Please change condition valueOut = this.data("DateTimePicker").getDate() to valueOut = this.data("DateTimePicker") && this.data("DateTimepicker").getDate()

When using the datetimepicker in a dynamic template i get "Cannot read property 'destroy' of undefined" when i leave a dynamic template by clicking on a different tab. When i enter the tab with the datetimepicker again i get "Cannot read property 'setDate' of undefined".

The error only exists with the datetimepicker. Not with the datepicker.

{{> DynamicTemplate template=getTemplate}}

getTemplate: function () {

    if(Session.get('selectedPanel') === 1){
      return "firstPanel";
    };

    if(Session.get('selectedPanel') === 2){
      return "QaPanel";
    };

 ...


  firstPanelActive:function(){
    if(Session.get('selectedPanel') === 1){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },

  QaPanelActive:function(){
    if(Session.get('selectedPanel') === 2){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },
...

I would like to set default value on date picker:

// Schema
    datepicker: {
        type: Date,
        optional: true,
        autoform: {
            afFieldInput: {
                type: "bootstrap-datetimepicker",
                dateTimePickerOptions: {
                    pickTime: false
                }
            }
        }
    }

// Form
{{> afQuickField name='datepicker' value="01/15/2015"}}

Is there any way to bypass timezone detection, and take input as UTC time?

It would be nice if one could also pass the dateTimePickerOptions directly through the Schema definition similar to other autoform widgets like:
https://atmospherejs.com/ctjp/autoform-bootstrap-switch

{
    date: {
        type: Date,
        autoform: {
            afFieldInput: {
                type: "bootstrap-datetimepicker",
                timezoneId: "America/New_York",
                dateTimePickerOptions: {
                    // Options come here...
                }
            }
        }
    }
}

I'ts simple to customize look of picker using aldeed:template-extension like in readme but how to add event to open picker when clicked on calendar icon?

I am not sure which repository to post this issue so I am starting here. I have a project using

• twbs:bootstrap
• fezvrasta:bootstrap-material-design
• This datetime picker + its dependencies.

When only picking a "day" on hover Blaze goes into an endless loop re-rendering the table elements. This happens about 80% of the time. Sometimes you need to click a date first to trigger the endless loop. It only happens when hovering over a day <td> element.

Removing Material.js from fezvrasta:bootstrap-material-design stops the bug.

My question is, why does this only happen on the day <td> element and not on any of the other datetime picker elements?

If you install mrt:moment-timezone package, it will throw an error.
Use risul:moment-timezone instead, it has proper dependencies!

show

Exception from Tracker afterFlush function:
debug.js:41 TypeError: dtp.setDate is not a function
    at null.<anonymous> (aldeed_autoform-bs-datetimepicker.js:141)
    at blaze.js:1844
    at Function.Template._withTemplateInstanceFunc (blaze.js:3643)
    at blaze.js:1842

Any ideas on how I can fix this?

Hello.

As we can see at https://eonasdan.github.io/bootstrap-datetimepicker/#custom-formats, they use "format: 'LT'" when they do not want to show dates. How am I supposed to pick only the time? I'm using LT format but nothing happens.

Thanks.

Hello,

gooseman fork throws an Error: datetimepicker component should be placed within a relative positioned container.

I am using quickform with following schema:

"date": {
type: Date,
autoform: {
type: "bootstrap-datetimepicker",
dateTimePickerOptions: {
format: "DD.MM.YYYY",
showTodayButton: true,
showClear: true,
showClose: true
}
}
}

Dynamically added div contains only script="display: block;".

Any advices?

I have multiple text box on my form, and the datetimepicker is on the bottom of the form (bottom of screen).
So when i focus on this, it show the popup date on the top of form/screen that so far with datetimepicker of text box (I think that, it don't have free space for display because it is nearly of bottom of screen).
How to solve this???

Some resources called in the most recent code of autoform-bs-datetimepicker are deprecated in relation to the newer versions of tsega:bootstrap3-datetimepicker and momentjs:moment (my error in particular says that setDate and getDate are not functions, for example). Is anyone working on this fix?

When I have 2 or more datetime fields in the same form, I get the following error:

Exception from Tracker afterFlush function: Cannot read property 'getDate' of undefined TypeError: Cannot read property 'getDate' of undefined at AutoForm.addInputType.valueOut (http://localhost:3000/client/lib/autoform/datetimepicker.js?6fa47ef1e66e00501f0dffd331630b69ad89e540:19:40)

It's probably an easy fix, but I'm pretty new to the package.
Any suggestions?
Thanks!

Below is my Schema

  Players = new Meteor.Collection('players');
  MatchSchema = new SimpleSchema({
    title: {
      max: 50,
      type: String
    },
    start: {
      type: Date,
      autoform: {
        afFieldInput: {
          type: "bootstrap-datetimepicker"
        }
      },
      label: "Start date"
    }
  });

  PlayerSchema = new SimpleSchema({
    name: {
      max: 50,
      type: String
    },
    match: {
      type: [MatchSchema],
      min: 1
    }
  });

  Players.attachSchema(PlayerSchema);

I have created example app here. When user try to add a new date the previous selected date is getting reset.

I think in new 4 version setDate func doesnt exists. use date()

Any chance you can enable compatibility with the latest version of tsega:bootstrap3-datetimepicker? When I use version 3.1.3_3, the values I set for the "stepping" option have absolutely no effect; but the timepicker has the desired intervals when I install version 4.14.30_4. Problem is, with that version, a lot of meteor-autoform-bs-datetimepicker stops working correctly.

Hello Eric! Everything was working fine until I updated to AutoForm 5.0 today. I get this when using this component (the bootstrap-datetimepicker):

Exception from Tracker afterFlush function: undefined is not a function

Steps to reproduce:

1. A schema like this:

Schemas.someDate = new SimpleSchema({
  start: {
    type: Date
  }
});

2. In the template I use:

{{#autoForm schema=Schemas.someDate id="loginForm"}}
{{> afFieldInput name='start' type="bootstrap-datetimepicker" }}
{{/autoForm}}

3. Full stacktrace below:

Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function
    at null.<anonymous> (http://localhost:3000/packages/aldeed_autoform-bs-datetimepicker.js?279246d1cf7d4b5603ac030d7466e9bc6e5ac0d1:171:11)
    at http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1808:16
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:2043:12)
    at viewAutorun (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1807:18)
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:296:36)
    at new Tracker.Computation (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:214:10)
    at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:487:11)
    at Blaze.View.autorun (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1806:19)
    at Blaze.TemplateInstance.autorun (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:3116:20)
    at Template.afBootstrapDateTimePicker.rendered (http://localhost:3000/packages/aldeed_autoform-bs-datetimepicker.js?279246d1cf7d4b5603ac030d7466e9bc6e5ac0d1:163:8)

Any ideas?

If my main html page has a navbar on it as follows:

<body>
  <div class="container">
    <header>
      <div class="navbar navbar-inverse" role="navigation">
  ~ ~ ~

The navbar will not drop down below the box, it will go off the screen at the top, if your date time picker is close enough to the top of the screen.

I imagine this is due to some of the styling on the main body of the html that bootstrap3 puts on there. And it's probably fixable by going into the CSS and overriding some styling on this form - however as this is a bootstrap package, you'd think it would be compatible with other bootstrap elements on the page...

I haven't worked with css in a while, any ideas what would be causing this?

datepicker template

<template name="workout">
  <div class="container">
    {{#unless currentUser}}
    <div class="alert alert-warning well-lg">
      <span class="glyphicon glyphicon-flash" aria-hidden="true"></span> Please log in.
    </div>

    {{else}}
      {{> insertWorkoutForm}}
    {{/unless}}<!--currentUser -->
  </div>
</template>

<template name="insertWorkoutForm">
  <div class="container">
    {{#autoForm collection="Workouts" id="insertWorkoutForm" type="insert"}}
    <fieldset>
      <legend>Add a Workout</legend>
      {{> afQuickField name="date" type="bootstrap-datepicker" buttonClasses="glyphicon glyphicon-calendar"}} {{> afQuickField name='minutes'}}
    </fieldset>
    <button type="submit" class="btn btn-primary">Insert</button>
    {{/autoForm}}
  </div>
</template>

I dug into the code a bit, and the problem seems to be due to the call to setDate(...) here.

Unlike regular html inputs, bs-datetimepicker fires a change event whenever javascript code sets its value, so calling setDate() always causes a change event to fire, which
causes a form.submit() in meteor-autoform, which causes a write to minimongo, which invalidates the autorun(...) that our setDate(...) is inside of, and we spin around doing this all day =).

This appears to also be an issue in https://github.com/aldeed/meteor-autoform-bs-datepicker. Should I create a separate issue over there?