One month behind date show in angular 4
Primeng Calendar Add 2018-04-30 & show {3/30/2018}
Html File:
<div class="col-md-8 noPadding">
<p-calendar dataType="date" name="PublishDate" [ngModelOptions]="{utc:
'true'}" [ngModel]="resource.PublishDate | date:'yyyy-MM-dd'"
(ngModelChange)="resource.PublishDate = $event" showOtherMonths="true"
dateFormat="yy-mm-dd" [showIcon]="true"></p-calendar>
</div>
Typescript:
update() {
this.loading = true;
this.publishDate = this.resource.PublishDate.getMonth() + '-' + this.resource.PublishDate.getDate() + '-' + this.resource.PublishDate.getFullYear();
this.resource.PublishDate = this.publishDate
let data = JSON.stringify(this.resource);
this.resourceService.putForm('Resource').subscribe((response: any) => {
detail: 'Resource is Updated' });
}, (error: any) => {
});
}
ts:
this.publishDate = this.datePipe.transform(this.resource.PublishDate);
html:
<p-calendar dataType="date" name="PublishDate" [ngModelOptions]="{utc:
'true'}" [ngModel]="resource.PublishDate | date:'yyyy-MM-dd'"
(ngModelChange)="resource.PublishDate = $event" showOtherMonths="true"
dateFormat="yy-mm-dd" [showIcon]="true">
</p-calendar>
app.module.ts
providers: [
DatePipe
]
by using angular date pipe my problem is resolved
thankyou
https://angular.io/api/common/DatePipe
Related
I would like to plot some d3js chars in vuejs after performing an API call to get some data. To do so, I created a form whose input is used to collect the data from the API. Once I submit the form, I call my d3js function to plot the charts based on the retrieved data. I want the plotting functions to be called only when the data is not empty. To do so, I used the conditional rendering v-if based on the length of the data. So far so good. My problem is that once the plots are rendered if I type anything in the form, a new plot will be created as if every time the if statement is evaluated again and again, I don't know if it is related to lifecycle or not, but how can avoid this behavior?
<template>
<meta charset="utf-8">
<h4>Associate Information</h4>
<form #submit.prevent="onSubmit">
<input placeholder="Associate Id" v-model="associateId" /> <br />
<input placeholder="Starting date" v-model="initialDate" /> <br />
<input placeholder="Ending date" v-model="finalDate" /> <br />
<button v-on:click="getAssociatesbyIdAndDates()">submit</button>
</form>
<div class="chart" v-if="dailyData.length">
{{ DailyBillabilityLinePlot() }}
{{ WeeklyMonthlyQuarterlyBarPlot(weeklyData) }}
</div>
<div class="linePlot"></div>
<div class="barPlot" v-if="weeklyData.length">
<button v-on:click="WeeklyMonthlyQuarterlyBarPlot(weeklyData)">Weekly</button>
<button v-on:click="WeeklyMonthlyQuarterlyBarPlot(monthlyData)">Monthly</button>
<svg id="chart" viewBox="0 0 960 300"></svg>
</div>
</template>
<script>
import * as d3 from 'd3'
export default {
name: 'Timecard',
props: {
msg: String
},
data() {
return {
apiUrl: "",
myNumber: 0,
environment: "",
apiTst:"",
name:"",
initialDate: "",
finalDate: "",
associateId: "",
dailyData: [],
weeklyData:[],
monthlyData:[],
}
},
methods: {
WeeklyMonthlyQuarterlyBarPlot(data){
// plot a d3 bar plot
},
DailyBillabilityLinePlot() { // plot another d3 line plot}
getAssociatesbyIdAndDates() {
// Connect to the backend and get the list of associates
// http://localhost:8080/timecards/period/test/274/2020-04-14/2020-04-22
console.log("Fetching the data for an associates from the backend based on initial date and final date...");
this.axios.get(this.apiUrl + "test/period/test/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
.then(response => {
this.dailyData = response.data;
console.log(response.status);
})
.catch(error => {
console.error(error);
})
this.axios.get(this.apiUrl + "test/weekly/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
.then(response => {
this.weeklyData = response.data;
console.log(response.status);
})
.catch(error => {
console.error(error);
})
this.axios.get(this.apiUrl + "test/monthly/" + this.associateId + "/" + this.initialDate + "/" + this.finalDate)
.then(response => {
this.monthlyData = response.data;
console.log(response.status);
})
.catch(error => {
console.error(error);
})
},}
onSubmit() {
let consultantApi = {
name: this.name,
initialDate: this.initialDate,
finalDate: this.finalDate,
}
this.$emit('consultantApi-submitted', consultantApi)
this.name = ''
this.initialDate = ''
this.finalDate = ''
}
},
mounted: function() {
this.apiUrl = process.env.VUE_APP_BACKEND_API;
this.environment = process.env.NODE_ENV;
}
Initial Form
D3 plots after submitting the completed form
Creation of new d3 plots whenever I press any key in the form
Yes, this is because updating any model will re-render the entire component.
To get around it, I find the simplest way is to put the chart into another component so that the re-render is then guarded.
Example:
var app = Vue.createApp({
data() {
return {
abc: 'ABC',
list: [1, 2, 3]
};
}
});
app.component("my-chart", {
template: `<div >{{Math.random()}}</div>`
});
app.mount("#app");
<script src="https://unpkg.com/vue#3.0.6/dist/vue.global.prod.js"></script>
<div id="app">
<input v-model="abc" />
<div v-if="list.length">
{{Math.random()}}
</div>
<my-chart></my-chart>
</div>
I think your bug is in the parent component. I would try to check how often does it emmit the consultantApi. It seems like your form keeps submitting on input change event and not on form submit.
I'm trying to update my comment system and have run in to a snag. This is the error firebug is showing : ReferenceError: comment is not defined : comment(1000);
I'm at a loss to what the issue is - any ideas?
<div class="comment_heading">Leave a Comment</div>
<div class="post_comment">
<textarea name="txtpostcomment" id="txtpostcomment-1000" class="txtpostcomment"></textarea>
<button class="btnpostcomment" id="btnpostcomment-1000" onclick="comment(1000);" type="button">Send</button>
<input type="hidden" name="token" id="token" value="19vtyWh5iOpeKamXAQl3udqU9mMjnfKv/LnWr70M2jE=">
</div>
<script>
function comment(postid1)
{
var txt = $('#txtpostcomment-'+postid1);
var btn = $('#btnpostcomment-'+postid1);
var comment1 = $(txt).val();
var token = $("#token").val();
$(btn).css('background-image', 'url(/comments/submit-busy.gif)');
$(btn).attr('disabled', true);
var dataString = 'commenting=1&postid=' + postid1 + '&comment=' + comment1 + '&name=' + name + '&token=' + token;
.ajax({
url: "/comments/submit.php",
type: "POST",
data: dataString,
cache: false,
success: function()
{
$('.post_comment .error_msg').remove();
$('.comment-list-'+postid1).prepend(msg.html);
$(txt).val('');
},
error: function()
{
$('.post_comment .error_msg').value = 'Error - Please try again';
}
});
$(btn).css('background-image', 'none');
$(btn).attr('disabled', false);
$(txt).attr('disabled', false);
}
</script>
Solved .. all I needed to change was :
.ajax({
To :
$.ajax({
this script works in jQuery 1.9, but does not work in 1.8. How to convert this script to jQuery 1.8 ?
NOT Working Demo on jsfiddle
Working Demo on jsfiddle
HTML
<div id="container">
<div id="c1" class="aaa" style="text-align:right; color:red top:100px; ">child 1</div>
<div id="c2" class="aaa" style="text-align:left; top:200px; ">child 2</div>
</div>
jQuery script
$("#container").children().each( function () {
alert("element ID = " + $(this).attr('id'));
var styleProps = $(this).css(["width",
"height",
"color",
"background-color",
"text-align",
"left",
"top",
"right",
"bottom"]);
$.each(styleProps, function (prop, value) {
alert(prop + " = " + value);
});
});
The css function accepting an array wasn't implemented until 1.9.
You'll probably have to do it by hand if you're using 1.8 (loop through the values one at a time).
var styleNames = ["width", "height", "color", ...etc... ];
var i;
var $elem = jQuery(this);
for (i = 0; i < styleNames.length; ++i) {
alert(styleNames[i] + " = " + $elem.css(styleNames[i]));
}
I'm implementing a search form that displays suggestions as you start typing but can't get it to work..the problem is that when you start typing it doesn't shows any suggestion. Can you help me to get the code right? Many thanks!
This is the code:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div><input id="autocomplete" type="text"></div>
<script>
$("input#autocomplete").autocomplete({
source: [
{ id : "Google", value : "Google"},
{ id : "Yahoo", value : "Yahoo"},
],
minLength: 1,
open: function(event, ui) {
$("ul.ui-autocomplete").unbind("click");
var data = $(this).data("autocomplete");
console.log(data);
for(var i=0; i<=data.options.source.length-1;i++)
{
var s = data.options.source[i];
$("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "/" + s.id);
}
}
});
/*
$("input#autocomplete").bind("autocompleteselect", function(event, ui) {
//alert(ui.item.id + ' - ' + ui.item.value);
//document.location.href = ui.item.id + '/' + ui.item.value;
//event.preventDefault;
} );
*/
</script>
Here Is the code:
<div id="search">
<input list="results" id="project" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }" />
</div>
The avaible results...
<datalist id="results">
<option>Demo</option>
<option>Example</option>
<option>pizza</option>
</datalist>
Finally the javascript
function checkInput(searchQuery)
{
if(searchQuery=="Home")
{
window.location = "Home.html";
}
else if(searchQuery == "Contact")
{
window.location = "Contact.html";
}
else if(searchQuery == "Sitemap")
{
window.location = "Sitemap.html";
}
else
{
window.location = "noresult.html";
}
}
So that way when ever someone goes to search they have a limited amount of options in the pre-populated list and which ever one they select leads them to your target page! I can't take all the credit, but I hope that helps!
I have an ajax form which which is currently returning errors using the S.error() method. This is fine but I also want to add a new css class to one of the elements parent div tags. I have tried to do this with the JE.Call() method with no avail. Is anyone could point me in the right direction it would be really appreciated.
Snippet Code
class Register {
private var user = User.createRecord
private var pw2 = ""
private var dob = ""
private var errors = new Array[String](7)
val whence = S.referer openOr "/"
Thread.sleep(400)
def registerUser(): JsCmd = {
errors(0) = User.validateUsername(user.username.is)
errors(1) = User.validateEmail(user.email.is)
errors(2) = User.validatePhone(user.phone.is)
errors(3) = User.validateCity(user.city.is)
errors(4) = User.validateDOB(dob)
errors(5) = User.validatePassword(user.uPw.is)
errors(6) = User.validateSecondPW(user.uPw.is, pw2)
if(errors.count(_ != "") == 0) {
user.uPw.set(User.hashPassword(user.uPw.is, user.id.is.toString))
user.dob.set(User.stringToDate(dob))
user.save
println("User id " + user.id.is.toString + " added to database")
S.redirectTo(whence)
}else{
if(errors(0) != "")
S.error("username-error", errors(0))
JE.Call("addError(username-error)")
......
}
}
def form = {
"id=username" #> SHtml.text("", user.username.set(_), "placeholder" -> "Username") &
"id=email" #> SHtml.email("", user.email.set(_), "placeholder" -> "Email") &
"id=phone" #> SHtml.text("", user.phone.set(_), "placeholder" -> "Tel") &
"id=city" #> SHtml.text("", user.city.set(_), "placeholder" -> "City") &
"id=dob" #> SHtml.text("", dob = _, "placeholder" -> "DOB") &
"id=password" #> SHtml.password("", user.uPw.set(_), "placeholder" -> "Password") &
"id=passwordCheck" #> SHtml.password("", pw2 = _, "placeholder" -> "Confirm Password") &
"type=submit" #> SHtml.ajaxSubmit("Register", () => registerUser, "class" -> "btn")
}
}
HTML Template
<h2>Register</h1>
<form class="lift:form.ajax?class=form-horizontal">
<div class="lift:Register.form">
<div id="id1" class="control-group">
<label class="control-label" for="username">Username:</label>
<div class="controls">
<input id="username">
<span id="username-error" class="help-inline"></span>
</div>
</div>
<div class="controls">
<button type="submit" ></button>
</div>
</div>
</form>
Javascript Function
<script>
function addError(id) {
$("#"+id).closest(".control-group").addClass("error");
}
addError("email-error")
</script>
Try to change the Call function.
JE.Call("addError","username-error").cmd
I recommend giving up on JavaScript abstractions in Lift and use plain Run Object everywhere. So In your case I'd use:
Run("addError(username-error)")