I'm pulling a JSONP date for different events and workshops from RegOnline, which gives me:
/DATE(1408545000000)/
I'm using Handlebars to list the different events, and I'm attempting to use MomentJS as a registerHelper. objs is the array of objects I'm pulling from RegOnline:
function bindEvents(objs) {
Handlebars.registerHelper('formatDate', function(objs){
return new Handlebars.SafeString(
moment(objs.StartDate).format("LL")
);
});
var eventHost = $("#eventHost").html();
var eventTpl = Handlebars.compile(eventHost);
$(".event-list").append(eventTpl(objs));
}
Here's my template:
<span class="timestamp">{{City}}, {{State}} - {{formatDate StartDate}}</span>
This gives me the current date, instead of the date of the event. What am I missing?
Figured it out! I didn't need to define objs.StartDate in the Moment line. Handlebars takes care of that for me, so I just needed to use objs.
Related
I faced a problem while trying to calculate between 2 different times.
I am using vue-moment, and i tried to calculate the time with diffs but with no success.
data() {
return {
date: moment('12-11-2019').format("DD-MM-YYYY"),
date2: moment('13-11-2019').format("DD-MM-YYYY"),
startTime: this.date.diff(this.date2)
what is the right way of using moment in data and methods?
P.S.
i want to calculate the hours also and parse it with the date in the same argument, but i couldnt do it right.
You should be able to make it work with a computed property no problem:
computed: {
startTime() {
return this.date.diff(this.date2);
}
}
Working example
I'm using FullCalendar library with Vue.js
Is it possible to use the default prev, next and today buttons that are default to trigger my own actions.
I have created my customs buttons that do what I want, but prefer to use the default buttons.
Current I have a button linked to a method:
<button #click="handleMonthIncrement">Next Month</button>
And this calls this method:
handleMonthIncrement: function(arg) {
// update month and year
this.incrementMonth();
// update calendar
let calendarApi = this.$refs.fullCalendar.getApi();
calendarApi.next();
// updateCurrentSummary (mapped to store)
this.updateCurrentSummary();
}
I'm using the ref=fullCalendar which ties into the jQuery reference of the Calendar to change the view.
If I could listen to the next, prev buttons then I could remove that code as the buttons already change the calendar view.
Is this possible? I'm aware that viewRender (https://fullcalendar.io/docs/v1/viewRender) can be used to note when the calendar has changed view, but am not sure if this is something that can be used for my requirements above.
Thanks in advance.
Thanks
I achieved this by looking up the Events Emitted here: https://github.com/fullcalendar/fullcalendar-vue/blob/master/src/fullcalendar-options.js
And I found datesRender - which can be added to the FullCalendar element prefaced by # to trigger when the dates re-render. Because I have this on month only view I can then trigger a method which I called handleMonthChange.
See here:
<FullCalendar
defaultView="dayGridMonth"
#datesRender="handleMonthChange"
/>
Then within handleMonthChange I had the following:
handleMonthChange: function(arg) {
var currentStart = arg.view.currentStart;
var check = moment(currentStart, "YYYY/MM/DD");
var currentMonth = check.format("M");
// load action
this.updateCurrentMonth(currentMonth);
// refresh summaries
this.updateSummary();
}
I used moment to determine the month from the date (from the view object.
See more info here on what is passed back here https://fullcalendar.io/docs/datesRender
I then used this to change the month in my Vuex state by calling a Vuex action, then I updated my summary section as required.
Hope that helps someone else too. Big thanks to #ADyson for helping me get here!
I have a page built in ASP.NET MVC 4 that uses the jquery.validate.unobtrusive library for client side validation. There is an input that needs to be within a range of numbers. However, this range can change dynamically based on user interactions with other parts of the form.
The defaults validate just fine, however after updating the data-rule-range attribute, the validation and message are still triggered on the original values.
Here is the input on initial page load:
<input id="amount" data-rule-range="[1,350]" data-msg-range="Please enter an amount between ${0} and ${1}">
This validates correctly with the message Please enter an amount between $1 and $350 if a number greater than 350 is entered.
After an event fires elsewhere, the data-rule-range is updated and the element looks as such:
<input id="amount" data-rule-range="[1,600]" data-msg-range="Please enter an amount between ${0} and ${1}">
At this point if 500 is entered into the input it will fail validation with the same previous message stating it must be between $1 and $350. I have also tried removing the validator and unobtrusiveValidation from the form and parsing it again with no luck.
$('form').removeData('validator');
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
Is there a clean way to change the validation behavior based on the input attributes dynamically?
As Sparky pointed out changing default attributes dynamically will not be picked up after the validation plugin has been initialized. To best work around this without rewiring how we register validated fields and rules, I found it easiest to register a custom adapter in the unobtrusive library:
jQuery.validator.unobtrusive.adapters.add("amount", {}, function (options) {
options.rules["amount"] = true;
options.messages["amount"] = function () { return $(options.element).attr('data-val-amount'); };
});
jQuery.validator.addMethod("amount", function (val, el, params) {
try {
var max = $(el).attr('data-amount-max');
var min = $(el).attr('data-amount-min');
return val <= max && val >= min;
} catch (e) {
console.log("Attribute data-amount-max or data-amount-min missing from input");
return false;
}
});
Because the message is a function, it will be evaluated every time and always pick up the latest attribute value for data-val-amount. The downside to this solution is that everytime there is a change we need to change all three attributes on the input: data-amount-min, data-amount-max, and data-val-amount.
Finally here is the input markup on initial load. The only attribute that needs to be present on load is data-val-amount.
<input id="amount" data-val-amount="Please enter an amount between ${0} and ${1}" data-val="true">
You cannot change rules dynamically by changing the data attributes. That's because the jQuery Validate plugin is initialized with the existing attributes on page load... there is no way for the plugin to auto re-initialize after dynamic changes are made to the attributes.
You must use the .rules('add') and .rules('remove') methods provided by the developer.
See: http://jqueryvalidation.org/rules/
you can try this one:
// reset the form's validator
$("form").removeData("validator");
// change the range
$("#amount").attr("data-rule-range", "[1,600]");
// reapply the form's validator
$.validator.unobtrusive.parse(document);
charle's solution works! you cannot have model attributes to use it though, I build my inputs like:
#Html.TextBoxFor(m => Model.EnterValue, new
{
#class = "form-control",
id="xxxx"
data_val = "true",
data_val_range = String.Format(Messages.ValueTooBig, Model.ParamName),
data_val_range_max = 6,
data_val_range_min = 2,
data_val_regex_pattern = "^\\d+(,\\d{1,2})?$"
})
and then in javascript:
$("form").removeData("validator");
$("#xxxx").attr('data-val-range-max', 3)
$("#xxxx").attr('data-val-range-min', 0)
$.validator.unobtrusive.parse(document);
I have a ctrl that pulls a json array from an API. In my code I have an ng-repeat that loops through results.
This is for a PhoneGap mobile app and I'd like to take a single element from the array so that I can use it for the page title.
So... I'm wanting to use 'tool_type' outside of my ng-repeat.
Thanks in advance - I'm just not sure where to start on this one.
Example json data
[{ "entry_id":"241",
"title":"70041",
"url_title":"event-70041",
"status":"open",
"images_url":"http://DOMAIN.com/uploads/event_images/241/70041__small.jpg",
"application_details":"Cobalt tool bits are designed for machining work hardening alloys and other tough materials. They have increased water resistance and tool life. This improves performance and retention of the cutting edge.",
"product_sku":"70041",
"tool_type": "Toolbits",
"sort_group": "HSCo Toolbits",
"material":"HSCo8",
"pack_details":"Need Checking",
"discount_category":"102",
"finish":"P0 Bright Finish",
"series_description":"HSS CO FLAT TOOLBIT DIN4964"},
..... MORE .....
Ctrl to call API
// Factory to get products by category
app.factory("api_get_channel_entries_products", function ($resource) {
var catID = $.url().attr('relative').replace(/\D/g,'');
return $resource(
"http://DOMAIN.com/feeds/app_productlist/:cat_id",
{
cat_id: catID
}
);
});
// Get the list from the factory and put data into $scope.categories so it can be repeated
function productList ($scope, api_get_channel_entries_products, $compile) {
$scope.products_list = [];
// Get the current URL and then regex out everything except numbers - ie the entry id
$.url().attr('anchor').replace(/\D/g,'');
$scope.products_list = api_get_channel_entries_products.query();
}
Angular works as following:
Forgiving: expression evaluation is forgiving to undefined and null, unlike in JavaScript, >where trying to evaluate undefined properties can generate ReferenceError or TypeError.
http://code.angularjs.org/1.2.9/docs/guide/expression
so you only need to write:
<title>{{products_list[0].tool_type}}</title>
if there is a zero element the title will be the tool_type, if not, there is no title.
Assuming you want to select a random object from the list to use something like this should work:
$scope.product-tool_type = products_list[Math.floor(Math.random()*products_list.length)].tool_type
Then to display the result just use
<h1>{{product-tool_type}}</h1>
Or alternatively:
<h1>{{products_list[Math.floor(Math.random()*products_list.length)].tool_type}}</h1>
Is there any way to find an "item" inside an Dojo Store (Version 1.1!!).
The Format of the Json Data is like: name/id.
So far if tryed it with:
var storeItem = this.myFilteringSelect.store.fetch({query: {name: "Alpha"}});
But fetch does not return the item? Btw. i need the "ID" of the Item to set an default value for the filteringSelect (but the id can change from time to time...)
Let me preface my answer in that I can't speak to 1.1 specifically. But in 1.6...
store.fetch is coded in an asynchronous manner. It does not return the item. You must provide a callback that will iterate over the items returned from the query.
store.fetch({
query: {/*queryParams*/},
onComplete: function(items, findResult){
dojo.forEach(items, function(item){
// work with your item
}
}
});
https://dojotoolkit.org/reference-guide/1.6/dojo/data/api/Read.html#dojo-data-api-read
I don't believe this API had changed much over time, so if it is present in 1.1, then I think this should help.