When I click the Create new Ticket #1,
I'm able to automatically display the current year/month/day as show here: But I need the time aswell.
Here is how I've implemeted it:
My Java Pojo:
public class Ticket implements Serializable {
#Column(name = "jhi_date")
private LocalDate date;
//getters and setters
}
My ticket-popup.service.ts
setTimeout(() => {
// populate date with current date if new
const tickets = new Ticket();
const now = new Date();
tickets.date = {
year: now.getFullYear(), // works fine
month: now.getMonth() + 1, // works fine
day: now.getDate(), // works fine
time: now.getTime(), // doesnt return anything as shown in image
hour: now.getHours() // doesnt return anything as in image
};
this.ngbModalRef = this.ticketModalRef(component, tickets);
resolve(this.ngbModalRef);
}, 0);
It's most probably caused by the ngbDatepicker component. What could be it's equivalent to replace ?
<div class="form-group">
<label class="form-control-label" for="field_date">Date</label>
<div class="input-group">
<input id="field_date" type="text" class="form-control" name="date" ngbDatepicker #dateDp="ngbDatepicker" [(ngModel)]="ticket.date"
/>
<span class="input-group-append">
<button type="button" class="btn btn-secondary" (click)="dateDp.toggle()"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
Github sample here
Here is how I managed to get the time:
public class Ticket implements Serializable {
//#Column(name = "jhi_date")
//private LocalDate date;
#Column(name = "jhi_timestamp")
private ZonedDateTime timestamp; // used ZonedDateTime instead of LocalDate
//getters and setters
}
Used Angular Date Pipe in My ticket-popup.service.ts
setTimeout(() => {
// populate date/time with current time if new
const ticket = new Ticket();
ticket.timestamp = this.datePipe // used Pipe date format
.transform(new Date(), 'yyyy-MM-ddThh:mm');
this.ngbModalRef = this.ticketModalRef(component, ticket);
resolve(this.ngbModalRef);
}, 0);
Got rid of ngbDatepicker from
ticket-dialog.component.html
<div class="form-group">
<label class="form-control-label" for="field_timestamp">Timestamp</label>
<div class="d-flex">
<input id="field_timestamp" type="datetime-local" class="form-control" name="timestamp" [(ngModel)]="ticket.timestamp"
/>
</div>
</div>
result:
Related
I feel like the answer to this is probably gonna be a pretty duh thing, but i played endlessly with trying to get the universal date picker to show the proper date in react and came up with INTL.datetime('fr-ca' etc etc) and then replace the slashes with -. Great it works on the searches involving dates. I try to do the get for no date ranges and it spits back an error and wont display the return
Here is error
react-dom.development.js:1383 The specified value "Tue Dec 01 2020 09:52:36 GMT-0800 (Pacific Standard Time)" does not conform to the required format, "yyyy-MM-dd".
Here is my code for the entire component. Should i useeffect for getDups() and just set the time value to nothing?
import React, { useState,useContext, useEffect } from "react";
import ListItem from "./ListItem";
import KeyModal from "./KeyModal";
import LeadContext from "../context/lead/leadContext";
const ListViewer = () => {
const leadContext = useContext(LeadContext);
const { leads, clearLeads, getLexs, keys, postLeads, getDups,sendTodays,getReleases } = leadContext;
const [startDate, setStartDate] = useState(new Date(Date.now()))
const [endDate, setEndDate] = useState(new Date(Date.now()))
const onChange = e =>{
setStartDate(e.target.value)
}
const onChange2 = e =>{
setEndDate(e.target.value)
}
console.log(leads)
const dates = {startDate, endDate}
return (
<div className='grid-2'>
<div>
<button className="p-2 btn btn-sm btn-danger" onClick={()=>getDups()}> Get All Dups </button>
<button className="p-2 btn btn-sm btn-success" onClick={()=>sendTodays()}>Send Todays Scrapes</button>
<button className="p-2 btn btn-sm btn-primary" onClick={()=>getReleases(dates)}>Get Range Releases</button>
<button className="btn btn-sm btn-dark" onClick={()=>getLexs(dates)}>Get Range Lexis Info</button>
</div>
<div>
<form>
<div className='grid-2'>
<div>
<label>Enter a Date Range </label>
<input
type='date'
name='startDate'
value={
startDate &&
Intl.DateTimeFormat("fr-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}).format(new Date(startDate).replace(/-/, '/').replace(/-/,'/'))
}
id='startDate'
onChange={onChange}
/>
</div>
<div>
<input
type='date'
name='endDate'
value={
startDate &&
Intl.DateTimeFormat("fr-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}).format(new Date(endDate).replace(/-/, '/').replace(/-/,'/'))
}
id='endDate'
onChange={onChange2}
/>
</div>
</div>
</form>
).format(new Date(e.target.value.replace(/-/, '/').replace(/-/,
</div>
{keys.length > 0 ? <KeyModal keys={keys}/> :''}
<br/>
<br/>
{leads.length > 0 ?
<div className='grid-2'>
<div> <button onClick={()=>clearLeads()} className='btn btn-dark btn-block'>Clear Leads</button></div>
<div> <button onClick={()=>postLeads(leads)}className='btn btn-success btn-block'>Post Leads</button></div>
</div>:''}
<div className = 'grid-2'>
<div> {leads.length > 0 ? leads.filter(function(item) {
return item["dob"] === undefined;
}).map((lead) => <ListItem key={lead.dupId} lead={lead} />)
: ""}</div>
<div>
{leads.length > 0 ?
leads.filter(function(item) {
return item["dob"] !== undefined;
}).map((lead) => <ListItem key={lead.dupId} lead={lead} />)
: ""}</div>
</div>
</div>
);
};
export default ListViewer;
The MDN docs on <input type="date"> state that:
the parsed value is always formatted yyyy-mm-dd
So you shouldn't pass a Date object in your inputs' value attribute, since a Date's default string representation is something like:
Tue Dec 01 2020 09:52:36 GMT-0800 (Pacific Standard Time)
when value should be:
2020-12-01
What appears in the <input type="date"> text box is up to the browser locale, you cannot change the way the date appears in a native date picker.
A few other pointers as well:
new Date(Date.now()) is redundant, you may use new Date() without any arguments to get a Date object pointing to the present instead.
You cannot use replace() functions on Date objects - not before turning them into Strings, you'll get an Error otherwise. You probably meant to do:
Intl.DateTimeFormat("fr-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}).format(new Date(endDate)).replaceAll('-', '/')
Speaking of replace(), you don't have to chain replace() twice to substitute all dashes (-) for slashes (/). You can use a replaceAll() like above, or type replace(/-/g, '/') (notice the "g" after the regular expression object).
Not that the above pointers solve your problem. You still have to convert your Date in a "yyyy-MM-dd" string.
I have written few lines of code using javascript in Vue framework. I can not display date on html from var. I used vue-bootstrap for styles. Any suggestion is app?
<template>
<div class="app">
<b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en"></b-form-datepicker>
<div class="w-75 p-3 mb-1 text-light">
<b-form-select class="weekpicker" onfocus="myFunction()">
<b-form-select-option hidden value="">Select a week</b-form-select-option>
<b-form-select-option id="mydate" value="">{{ myFunction() }}</b-form-select-option>
<b-form-select-option type="date" value=""></b-form-select-option>
<b-form-select-option type="date" value=""></b-form-select-option>
</b-form-select>
</div>
<button><span>Submit</span></button>
</div>
</template>
<script>
export default {
name: 'TS_home',
data() {
return {
};
},
methods: {
myFunction() {
let x = new Date();
let current_date = x.toDateString();
x.setDate(x.getDate() + 7);
let seventh_date = x.toDateString()
document.getElementById("mydate").innerHTML = current_date + " - " + seventh_date;
}
}
};
</script>
As #Phil said since you are using Vue you should define the data property for the date like so:
data() {
return {
myDate: null
}
}
When it comes to date pickers it is usually #change event or v-model.
Try:
<b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en" #change="myDate=$event"></b-form-datepicker>
Then display the property in your HTML template like:
{{myDate}}
Another possibility is to use vue-bootstrap if that is not what you have installed already. You would do it like this:
npm install vue-bootstrap-datetimepicker --save
then in your component
// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css';
// Import this component
import datePicker from 'vue-bootstrap-datetimepicker';
then in your data
data() {
return {
myDate: new Date(),
options: {
format: 'DD/MM/YYYY',
useCurrent: false,
}
}
}
and in your HTML template
<date-picker v-model="myDate" :config="options"></date-picker>
and to display that date you would again use:
{{myDate}}
Please refer to the documentation for more detailed information.
I hope it helps. Good luck.
You should use the data property instead of manipulating the dom
data() {
return {
myDate: ''
}
}
Inside the function
myFunction() {
let x = new Date();
let current_date = x.toDateString();
x.setDate(x.getDate() + 7);
let seventh_date = x.toDateString()
this.myDate = current_date + " - " + seventh_date;
}
In the html, use the vue-event handler
<b-form-select class="weekpicker" #focus="myFunction()">
<b-form-select-option id="mydate" value="">{{ myDate }}</b-form-select-option>
Hope this will help :)
When the user clicks the button I want it to copy the vm.checkin (unix date) to the angular type=date field.
<input type="date" ng-model="vm.receiptForm.paidDate" id="receiptPaidDate">
<button ng-click="vm.receiptForm.paidDate = (vm.checkin * 1000) | date:'yyyy-MM-dd HH:mm:ss Z'">
<span class="size-tiny">Copy Date</span>
</button>
Is that possible to do? I cant seem to make it work.
The model for input[type=date] must always be a Date object, but date filter formats date to a string based on the provided format. You just need to convert your timestamp to a date as described here and then assign it to vm.receiptForm.paidDate.
UPDATE: as an option you can create your custom filter to achieve the desired functionality, see the code snippet below:
var module = angular.module("demo", []);
module.filter('tsToDate', function () {
return function (timestamp) {
return new Date(timestamp);
};
});
module.controller('Demo', [function Demo() {
var vm = this;
vm.checkin = 1529442000000;
vm.receiptForm = {
paidDate: ''
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="demo" ng-controller="Demo as vm">
<div>
<button ng-click="vm.receiptForm.paidDate = (vm.checkin | tsToDate)">Copy Date</button>
</div>
<input type="date" ng-model="vm.receiptForm.paidDate" />
<code>
{{ vm.receiptForm }}
</code>
</div>
I want to limit the Angular UI Datepicker to be between two dates passed in as variables. Preferably I'd like to get it working without adding a library like momentjs, because this is the only field in which I need to work with dates.
Here is a plunker of this problem:
http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview
here are the variables:
mycurrentdate = '2016-04-18'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'
mymaxdate will be calculated from mymaxmonth to be
mymaxdate = '2016-05-31'
My actual max date will be the the last day of mymaxmonth
$scope.maxDate = new Date(
$scope.mymaxmonth + (TO THE END OF THE MONTH)
);
One thing to note is that running it through new Date() returns a date that is the day before the given date. For example:
$scope.minDate = new Date(
$scope.mymindate
);
$scope.minDate returns Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) I looked up the reason for why it returns March 30 instead of April 1st and it seems like a timezone error?
I want to set a mymindate of '2016-04-01' and get mymaxdate = '2016-05-31' and disable all dates outside of this range. I've read Beginners Guide to Javascript Date and Time and tried it out here.
In the controller I have:
$scope.mymindate = '2016-04-01';
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31'
$scope.minDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth(), 1);
$scope.maxDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth() + 1, 0);
In the template I have:
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
you need to set datepicker-options with proper option for your input to disable date. In your example used datepicker-options="dateOptions" but in your controller didn't declare dateOptions.
So you need to set dateOptions for maxDate and minDate. like
$scope.dateOptions = {
maxDate: new Date($scope.maxDate),
minDate: new Date($scope.mymindate)
};
and set maxDate and minDate like:
$scope.mymindate = new Date('2016-04-01');
$scope.mymaxmonth = new Date('2016-05-01'); //wanted mymaxdate to be '2016-05-31'
$scope.minDate = new Date($scope.mymindate);
$scope.maxDate = new Date($scope.mymaxmonth.getFullYear(),$scope.mymaxmonth.getMonth()+1,0);
and HTML:
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Can see Plunker Demo and hopefully it will help you :)
After some annoying date manipulations, I got it.
Here is the working plunker:
http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview
In my controller I have:
var mindate = new Date($scope.mymindate);
$scope.minDate = new Date(mindate.getTime()+(1*24*60*60*1000)); //Due to poor design by the authors of ECMA-262 the date is parsed to be a day behind, so we must add a day
var maxdate = new Date($scope.mymaxmonth);
$scope.maxDate = new Date(maxdate.getFullYear(), maxdate.getMonth() + 2, 0); //Add a month to get to the end of the month.
$scope.dateOptions = {
maxDate: $scope.maxDate,
minDate: $scope.minDate,
};
In my template:
datepicker-options="dateOptions"
I didn't end up needing min-date or max-date because dateoptions covers both. I'll be honest, not sure why you have to add two to the macdate.getMonth() instead of just one, but it worked out.
UPDATE:
I have added additional code for clarification, which is annotated with * NEW *.
I was asked to clarify what this code is doing. A series of data is inputted into a collection called posts. On the postsList template the code is outputted when the timeToEnable field is less than the current time, which allows us to delay posts based on a specified date using this javascript time picker. The issue I have resides in /client/posts/post_edit.js where I am trying to set the value of one of the pickers from data in the collection which I don't know how to retrieve in javascript but I do in html simply using {{fieldHere}} and using the postsList template helper.
Hopefully this new code and info helps.
ORIGINAL QIUESTION.
I have a form that submits 5 fields in a posts collection. I have a edit page that, auto populates the tile, and content. However I have two separate Date/Time pickers. There is a function available to me to properly set the Date/Time pickers with the specific posts data when I am on the edit page. I cant output Date/Time data the usual way using {{date}} because it is stored in a particular format 2015-05-25T17:50:00.000Z I have created separate fields in the collection that separates day, month, year for do so using datepicker function.
This function will allow me to set the Date picker.
picker.set('select', new Date(year, month, date));
My Issue resides in getting the year, month and date data, based on the id that the post I am editing is using. I can place them in html using {{title}}, however I don't know how I would identify the id, and grab that post in the collection, and allow me to use picker.set like above.
Here is my code that I think will explain best what I have so far.
client
/client/posts/post_submit.js
Template.postSubmit.events({
'submit form' : function(e){
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
postContent: $(e.target).find('[name="postContent"]').val(),
timeToEnable: new Date(year, month, day, hours, minutes),
timeDisplay : timeDisplay,
year : year,
month : month,
day : day,
hours : hours
};
////console.log(post.timeToEnable);
Meteor.call('postInsert', post, function(error, result) {
// display the error to the user and abort
if (error){
return alert(error.reason);
}
// show this result but route anyway
if (result.postExists){
alert('This link has already been posted');
}
Router.go('postPage', {_id: result._id});
});
}
});
/client/posts/posts_list.html * NEW *
<template name="postsList">
<div class="posts page">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
/client/posts/post_item.html * NEW *
<template name="postItem">
{{> dashboard}}
<article>
<div class="post">
<div class="post-content">
<h1>{{title}}</h1>
<h3>{{timeDisplay}}</h3>
<p>{{{postContent}}}</p>
View
{{#if ownPost}}<a class="editPost" href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
</div>
</div>
</article>
</template>
/client/posts/posts_list.js * NEW *
Template.postsList.helpers({
posts: function() {
//return Posts.find({}, {sort: {submitted: -1}});
//
var data = new ReactiveDict();
data.set("now", new Date());
return Posts.find({timeToEnable: {$lt: data.get("now")}});
}
});
/client/posts/post_edit.html
<template name="postEdit">
{{> dashboard}}
<div class="container">
<form id="editForm">
<div class="postTitle">
<label class="titleLabel">Press Release Title.</label>
<div class="input">
<input name="title" id="title" type="text" value="{{title}}" placeholder=""/>
</div>
</div>
<div class="postTime">
<label class="titleLabel">Pick A time to post</label>
<div class="input">
<input class="timepicker" name="" id="" type="text" value="Click for a Time to Post" placeholder=""/>
</div>
</div>
<div class="postDay">
<label class="">Pick A Date to post</label>
<div class="input">
<input class="datepicker" name="" id="" type="text" value="Click for a Date to Post" placeholder=""/>
</div>
</div>
<div>
<div class="textarea">
<label class="contentLabel">Press Release content.</label>
<!-- <input name="postContent" id="postContent" type="text" value="" placeholder="Enwave has released a..."/> -->
<textarea name="postContent" id="postContent" type="text"></textarea>
</div>
</div>
<div id="submit">
<input type="submit" value="Submit"/>
</div>
<div class="deletePost">
<a class="btn btn-danger delete" href="#">Delete post</a>
</div>
</form>
</div>
</template>
This is where I want to retrieve the post fields for year, month, date. So I can set the picker to that date, all based off the specific post ID.
/client/posts/post_edit.js
This is the crucial part I need to output the fields from the collection here based on its specified id
Template.postEdit.rendered = function(){
picker.set('select', new Date(year, month, day));
}
lib
This Route outputs code to the html when using {{title}}.
/lib/router.js
Router.route('/posts/:_id/edit', {
name: 'postEdit',
data: function() { return Posts.findOne(this.params._id); }
});
lib/collections/posts.js * NEW *
Posts = new Mongo.Collection('posts');
Posts.allow({
update: function(userId, post) { return ownsDocument(userId, post); },
remove: function(userId, post) { return ownsDocument(userId, post); },
});
Posts.deny({
update: function(userId, post, fieldNames) {
// may only edit the following two fields:
return (_.without(fieldNames, 'title', 'postContent','timeToEnable','timeDisplay','year','month','day','hours').length > 0);
}
});
Meteor.methods({
postInsert: function(postAttributes) {
check(Meteor.userId(), String);
check(postAttributes, {
title: String,
postContent: String,
timeToEnable: Date,
timeDisplay:String,
year: Number,
month: Number,
day: Number,
hours: Number
});
var user = Meteor.user();
var post = _.extend(postAttributes, {
userId: user._id,
author: user.username,
submitted: new Date()
});
var postId = Posts.insert(post);
return {
_id: postId
};
}
});
server
~/server/publications.js`
Meteor.publish('posts', function() {
return Posts.find();
});
So I would like to grab the collection fields for posts into postEdit when the template is rendered, which will set the value of day input picker.
Thanks for help in advance.
This is what ended up working for me in the end.
client
/posts/post_edit.js
Template.post_edit.rendered = function(){
var year = (postObject.year);
var month = (postObject.month) -1;
var day = (postObject.day);
var hours = (postObject.hours);
var $input = $('.datepicker').pickadate();
var $inputTime = $('.timepicker').pickatime();
// Use the picker object directly.
var picker = $input.pickadate('picker');
var pickerTime = $inputTime.pickatime('picker');
picker.set('select', new Date(year, month, day));// Get on screen image
pickerTime.set('select', [hours,0]);// Get on screen image
}
lib
/lib/router.js
Router.route('/posts/:_id/edit', {
name: 'postEdit',
data: function() {
postObject = Posts.findOne(this.params._id);
return postObject;
}
});