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
});
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 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"
}
}
}
});
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 need to set slugs of my subcategories ,and i am using autovalue for this. I need to know the index of actual field for when i use arrays. There is a wild card for this?
Eg:
subcategories.$.subs.$.name
subcategories: {
type: [Object],
optional: true,
},
"subcategories.$.name": {
type: String,
optional: true,
},
"subcategories.$.slug": {
type: String,
optional: true,
autoform: {
omit: true
},
autoValue: function() {
if (this.field('subcategories.$.name').isSet) {
return s.slugify( (this.field('subcategories.$.name').value).toLowerCase() );
}
},
},
"subcategories.$.subs": {
type: [Object],
optional: true,
},
"subcategories.$.subs.$.name": {
type: String,
optional: true,
},
"subcategories.$.subs.$.slug": {
type: String,
optional: true,
autoform: {
omit: true
},
autoValue: function(i) {
if (this.field('subcategories.$.subs.$.name').isSet) {
return s.slugify( (this.field('subcategories.$.subs.$.name').value).toLowerCase() );
}
},
},
Thanks,
I got the expected result by changing the schema. Besides getting more organized, this.siblingField('name') works!
Code:
Categories = new Mongo.Collection('categories');
Schemas = {};
Schemas.Subs = new SimpleSchema({
"name": {
type: String,
optional: true,
},
"slug": {
type: String,
optional: true,
autoform: {
omit: true,
},
autoValue: function() {
if (this.siblingField('name').isSet) {
return s.slugify( (this.siblingField('name').value).toLowerCase() );
}
},
},
});
Schemas.Subcategories = new SimpleSchema({
"name": {
type: String,
optional: true,
},
"slug": {
type: String,
optional: true,
autoform: {
omit: true,
},
autoValue: function() {
if (this.siblingField('name').isSet) {
return s.slugify( (this.siblingField('name').value).toLowerCase() );
}
},
},
"subs": {
type: [Schemas.Subs],
optional: true,
},
});
Schemas.Categories = new SimpleSchema({
name: {
type: String,
},
slug:{
type: String,
unique: true,
index: 1,
autoform: {
omit: true
},
autoValue: function() {
if (this.field('name').isSet) {
return s.slugify( (this.field('name').value).toLowerCase() );
}
},
},
subcategories: {
type: [Schemas.Subcategories],
optional: true,
},
});
Categories.attachSchema(Schemas.Categories);
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.