I'm currently using aldeed:autoform-bs-datepicker and rajit:bootstrap3-datepicker. I would like to limit the date range to year and month. I've tried this in the helpers but it doesn't work. Any thoughts?
Template.user.helpers({
datePicker: function() {
$("#datepicker").datepicker( {
format: "mm/yyyy",
startView: "months",
minViewMode: "months"
});
}
});
Path: Schema.js
Schema.Date = new SimpleSchema({
startDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true"
}
}
});
Try this:
Template.user.onRendered(function() {
$("#datepicker").datepicker( {
format: "mm/yyyy",
startView: "months",
minViewMode: "months"
});
});
You should initialize the datepicker when the template is rendered and not on the helper. Hope it helps. Also, make sure the datepicker has id="datepicker"
If still doesn't work, modify your schema as follows and get rid of $("#datepicker"):
Schema.Date = new SimpleSchema({
startDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
datePickerOptions: {
format: "mm/yyyy",
startView: "months",
minViewMode: "months"
}
}
}
});
Related
I have a strange situation. When I fill in the date field and click the autoform-add-item button the date data disappears but the qualification field data doesn't. The only way to keep the date field entry is to submit the form. Any thoughts.
Path: dbExample
"profile": {
"CV": {
"education": [
{
"qualification": "Arts Degree",
"startDate": "2009-01-01T00:00:00.000Z",
"endDate": "2013-12-01T00:00:00.000Z"
},
{
"qualification": "Science Degree",
"startDate": "2007-01-01T00:00:00.000Z",
"endDate": "2008-12-01T00:00:00.000Z"
}
]
}
}
Path: autoform.html
<template name="education">
{{#autoForm collection="Meteor.users" id="educationForm" doc=currentUser type="update"}}
{{> afQuickField name='profile.CV.education'}}
<button type="submit" class="btn btn-primary submit">Update</button>
{{/autoForm}}
</template>
Path: Schema.js
Schema.Education = new SimpleSchema({
qualification: {
type: String,
optional: true
},
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "M yyyy",
startView: "months",
minViewMode: "months"
}
}
},
endDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "M yyyy",
startView: "months",
minViewMode: "months"
}
}
},
});
Schema.CV = new SimpleSchema({
education: {
type: [Schema.Education],
optional: true
}
});
I think you need to do something like this:
{{#autoForm collection="Meteor.users" id="educationForm" doc=currentUser type="update"}}
{{#afEachArrayItem name="profile.CV.education"}}
{{> afFieldInput name=this.current.qualification}}
{{> afFieldInput name=this.current.startDate}}
{{> afFieldInput name=this.current.endDate}}
{{/afEachArrayItem}}
{{/autoForm}}
Autoform can't handle arrays of objects by default with quick field, so you need to construct it more manually.
I'm using autoform and I have two date fields, startDate and endDate. Most of the time there will be an endDate however in certain circumstance the user will need to set the end date to 'present'.
For instance, if you are currently studying a subject and have not completed it, there would be a startDate and the endDate that would say something like 'currently studying'.
Is there a way to do this?
Path: Schemas.js
Schema.Dates = new SimpleSchema({
startDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "MMM yyyy",
startView: "months",
minViewMode: "months"
}
}
},
endDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "mm/yyyy",
startView: "months",
minViewMode: "months"
}
}
}
});
Yes. Set the todayBtn option to true.
https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#todaybtn
Edit: update after more detail given
Try this.
Schema.Dates = new SimpleSchema({
startDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "MMM yyyy",
startView: "months",
minViewMode: "months"
}
}
},
endDate: {
type: Date,
optional: true,
autoform: {
type: "bootstrap-datepicker",
"data-date-autoclose": "true",
datePickerOptions: {
format: "mm/yyyy",
startView: "months",
minViewMode: "months"
}
}
},
inProgress: {
type: Boolean,
optional: true
});
I am having problems with Collection2 and autoform. Here is my collection
Customers = new Mongo.Collection("customers");
Customers.allow({
insert: function(userId, doc) {
return !!userId;
}
});
CustomerSchema = new SimpleSchema({
name: {
type: String,
label: "Name"
},
address: {
type: String,
label: "Address"
},
amount: {
type: Number,
label: "Amount"
},
bvn: {
type: String,
label: "BVN"
},
type: {
type: String,
label: "Sale Type"
},
saleDate: {
type: Date,
label: "Transaction Date",
autoValue: function() {
return new Date()
},
autoform: {
type: "hidden"
}
},
passport: {
type: String,
label: "Passport Number"
},
source: {
type: String,
label: "Source"
},
tickets: {
type: Boolean,
label: "Tickets"
},
visa: {
type: Boolean,
label: "Visa"
},
invoice: {
type: Boolean,
label: "Invoice"
},
nextSaleDate: {
type: Date,
label: "Next Sale Date",
autoValue: function () {
var thisDate = new Date();
var dd = thisDate.getDate();
var mm = thisDate.getMonth() + 3;
var y = thisDate.getFullYear();
var nextDate = dd + '/'+ mm + '/'+ y;
return nextDate;
},
autoform: {
type: "hidden"
}
},
author: {
type: String,
label: "Author",
autoValue: function () {
return this.userId
},
autoform: {
type: "hidden"
}
}
});
Customers.attachSchema(CustomerSchema);
I have published and subscribed to the collections in separate publish and subscribe javascript files with methods Meteor.publish('customers', function() {
return Customers.find({author: this.userId});
}); and Meteor.subscribe("customers"); respectively. Here is the html code for insert
<template name="NewCustomer">
<div class="new-customer">
{{>quickForm collection="Customers" id="insertCustomerForm" type="insert" class="new-customer-form"}}
</div>
</template>
But when i bootup the server and add a new customer, it doesn't work. Can anyone help me out? Thank you
I sorted it out. This field in the collection
nextSaleDate: {
type: Date,
label: "Next Sale Date",
autoValue: function () {
var thisDate = new Date();
var dd = thisDate.getDate();
var mm = thisDate.getMonth() + 3;
var y = thisDate.getFullYear();
var nextDate = dd + '/'+ mm + '/'+ y;
return nextDate;
},
autoform: {
type: "hidden"
}
},
is the one causing the issue. Thank you all for your input
I have a kendo grid with data being populated using ajax request.
the model returned from the controller has a java.util.Date field called someDate and the returned data in json for that field is like
{"total":3,
"data":[
{"someDate":1433116800000,"someValue":111.00},
{"someDate":1444116800000,"someValue":222.00},
{"someDate":1455116800000,"someValue":333.00}]}
The dataSouce is as below:
"dataSource": {
"schema": {
"total":"total",
"data":"data"
},
"transport":{
"parameterMap":function parameterMap(options, operation) {
if(operation==="read"){
return JSON.stringify(options);
} else {
return JSON.stringify(options.models);
}
},
"read":{
"dataType":"json",
"contentType":"application/json",
"type":"POST",
url : "${ajaxGetData}¶m="+someParam
}
}
columns in the grid is like this
"columns":
[{
"field":"someValue",
"title":"Some Value",
"type":"numeric"
},{
"field":"someDate",
"title":"Date",
"type":"date",
format:"{0:yyyy-MM-dd hh:mm:ss tt}"
}
The issue is that the date and time is not displayed properly. If I use a template, I have to remove the "type":"date" for it to work however the filters don't work properly.
template:'#= kendo.toString( new Date(someDate), "yyyy/MM/dd hh:mm:ss tt") #'
How to show Date in a specific format "yyyy/MM/dd hh:mm:ss tt".
This JS Fiddle might help (but doesn't have the exact json structure with data and total)
Would it be possible to use ISO 8601 format for you dates, if that's possible the type date in the model definition should work (if you're using GSON library take a look here)
edit
According to the comments you can make use of the schema.parse, a sample of this using your provided fiddle will look like this:
var grid = $("#grid").kendoGrid({
dataSource: {
data: createRandomData(10),
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" },
Age: { type: "number" }
}
},
parse: function(response) {
var products = [];
for (var i = 0; i < response.length; i++) {
response[i].BirthDate = new Date(response[i].BirthDate);
}
return response;
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
change:onChangeSelection,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{
field: "City"
},
{
field: "Title"
},
{
field: "BirthDate",
title: "Birth Date",
//template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
},
{
field: "Age"
}
]
}).data("kendoGrid");
I hope it works.
I'm trying to do the autoform books example using Meteor. How exactly should I do the Books.insert ?
I see the example:
Books.insert({title: "Ulysses", author: "James Joyce"}, function(error, result) {
//The insert will fail, error will be set,
//and result will be undefined or false because "copies" is required.
//
//The list of errors is available on
//`error.invalidKeys` or by calling
Books.simpleSchema().namedContext().invalidKeys()
});
I'm not entirely sure how I should hook this up with the rest of my code:
if (Meteor.isClient) {
Books = new Meteor.Collection("books");
var Schemas = {};
Schemas.Book = new SimpleSchema({
title: {
type: String,
label: "Title",
max: 200,
optional: true
},
author: {
type: String,
label: "Author",
optional: true
},
copies: {
type: Number,
label: "Number of copies",
min: 0,
optional: true
},
lastCheckedOut: {
type: Date,
label: "Last date this book was checked out",
optional: true
},
summary: {
type: String,
label: "Brief summary",
optional: true,
max: 1000
}
});
Books.attachSchema(Schemas.Book);
}
Can anyone give me any advice on this?
I'm thinking that I would need something like this:
Template.bookform.events({
'click btn.submit': function () {
var form = document.getElementById("formID").value;
Books.insert(form);
}
});
Thanks in advance! :)
I have never used autoform but in the documentation it says that it already gives you "automatic insert and update events, and automatic reactive validation".
So there should be no need to specify your own event handler.
In the docs you will also find the books example. I am just copying from there:
JS
Books = new Meteor.Collection("books", {
schema: {
title: {
type: String,
label: "Title",
max: 200
},
author: {
type: String,
label: "Author"
},
copies: {
type: Number,
label: "Number of copies",
min: 0
},
lastCheckedOut: {
type: Date,
label: "Last date this book was checked out",
optional: true
},
summary: {
type: String,
label: "Brief summary",
optional: true,
max: 1000
}
}
});
if (Meteor.isClient) {
Meteor.subscribe("books");
}
if (Meteor.isServer) {
Meteor.publish("books", function () {
return Books.find();
});
}
HTML
<head>
<title>Book example</title>
</head>
<body>
{{> insertBookForm}}
</body>
<template name="insertBookForm">
{{> quickForm collection="Books" id="insertBookForm" type="insert"}}
</template>