how to display date in set time
{{ mydate | date : DATE_FORMAT.DD_MMM_YYYY : 'America/New_York'}}
not working.
Pls try this, it worked for me
in your component,
import { DatePipe } from '#angular/common';
private myDate:any = new Date();
constructor() {
if(this.myDate != ""){
this.myDate = new DatePipe("en-US").transform(this.myDate, 'dd-MM-yyyy');
}else{
this.myDate = "";
}
}
In your html,
<div> {{myDate}} </div> /* you get your date in dd-mm-yyyy format*/
Hope this helps
Related
Just a quick question,
I know that Vue3 doesn't use filters anymore and notes says use computed or methd instead. but also there is a globalProperties we can use,
I used this globalProperties but keep getting this error
Uncaught TypeError: Cannot read property 'globalProperties' of undefined
Does anyone know where is the bug in my code?
const app = {
data() {
return {
message: ""
}
}
}
app.config.globalProperties.$filters = {
formatDate(value) {
if (value == "0001-01-01T00:00:00")
return "";
var today = new Date(value);
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = dd + '/' + mm + '/' + yyyy;
return today;
}
}
Vue.createApp(app).mount('#app');
And I am using the filter in my table like this
<td>
{{ $filters.formatDate(incident.incidentData) }}
</td>
The config field belongs to the root instance not to the root component so you should do:
const app = {
data() {
return {
message: ""
}
}
}
const myApp=Vue.createApp(app)
myApp.config.globalProperties.$filters = {
formatDate(value) {
if (value == "0001-01-01T00:00:00")
return "";
var today = new Date(value);
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = dd + '/' + mm + '/' + yyyy;
return today;
}
}
myApp.mount('#app');
Vue.createApp(app) return the root instance
myApp.mount('#app'); after mounting root app to an element it returns the root component
When working with a Faunadb record that contains a date value, I struggled with using that date in JavaScript. Eventually I got it working like so:
project.shipDate = new Date(await client.query(q.Format('%t', project.shipDate)));
This seems fine, but I also noticed I could do this:
let test = JSON.parse(JSON.stringify(project.created));
console.log(test);
datetest = new Date(test["#date"]);
Which seems wonky (grin), but may be quicker as it's not using the Fauna client library. Which should I prefer?
The JS driver has several helper classes that let you cast the javascript Time and Date objects to their FQL counterparts.
Here is an example.
From Fauna to JS
You can create a new document that contains a date value.
const project = await client.query(
q.Create(
q.Collection("projects"),
{ data: { shipDate: q.ToDate(q.Now()) } }
)
)
You can retrieve the date value and use as a javascript Date object by using the value property
const shipDate = new Date(project.data.shipDate.value)
From JS to Fauna
The date value can be modified however you want, and you can pass it back to FQL using the values.FaunaDate class.
const { values } = require('faunadb')
/* ... */
let nextDay = new Date(shipDate.getTime() + 86400000)
const faunaDate = new values.FaunaDate(nextDay)
Full Example
const project = await client.query(
q.Create(
q.Collection("projects"),
{ data: { shipDate: q.ToDate(q.Now()) } }
)
)
console.log(project)
const shipDate = new Date(project.data.shipDate.value)
console.log(shipDate)
let nextDay = new Date(shipDate.getTime() + 86400000)
console.log(nextDay)
const projectRef = project.ref
const projectUpdate = await client.query(
q.Update(
projectRef,
{ data: { shipDate: new values.FaunaDate(nextDay) } }
)
)
console.log(projectUpdate)
{
ref: Ref(Collection("projects"), "307924674409398337"),
ts: 1629918703380000,
data: { shipDate: Date("2021-08-25") }
}
2021-08-25T00:00:00.000Z
2021-08-26T00:00:00.000Z
{
ref: Ref(Collection("projects"), "307924674409398337"),
ts: 1629918703470000,
data: { shipDate: Date("2021-08-26") }
}
I have two text boxes with a datetimepicker hooked up to them. The text boxes are for start date and end date. The first datetimepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datetimepicker so that it cannot choose a date before the date chosen in the first date picker and whatever date is selected in first datetimepicker, the second datetimepicker date should be exactly 1 month from the first datetimepicker(User can then select the second datetimepicker to be 1 month or less than 1 month)?
Here's what I have so far:
Tried it via datetimepicker and onChangeDateTime function
<script src="~/Scripts/jquery.datetimepicker.js"></script>
<script>
$(document).ready(function () {
$('#ValidFrom').datetimepicker({
datepicker: true,
timepicker: false,
format: 'm/d/Y',
step: 30,
minDate: new Date(),
onChangeDateTime: function (dp, $input) {
var date = new Date($input.val());
$('#ValidTo').datetimepicker("option", "minDate", date);
//alert(date);
var date2 = new Date($input.val());
date2.setMonth(date.getMonth() + 1);
$('#ValidTo').datetimepicker("option", "maxDate", date2);
//alert(date2);
date2 = (date2.getMonth() + 1) + '/' + date2.getDate() + '/' + date2.getFullYear();
$('#ValidTo').val(date2);
}
});
$('#ValidTo').datetimepicker({
datepicker: true,
timepicker: false,
format: 'm/d/Y',
step: 30,
minDate: new Date()
});
});
</script>
If today is 1/16/2019 and I choose 1/28/2019 in the first datetimepicker, then the second date picker shouldn't be able to choose anything before 1/28/2019, second datetimepicker date should be 2/28/2019 or the user if wants, can select the date as less than 1 month.
You can use this function and use startdate id as date_timepicker_startend and enddate id as date_timepicker_end
<input type="text" class="form-control" id="date_timepicker_start">
<input type="text" class="form-control" id="date_timepicker_end">
These are the plugins you have to call
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.js"></script>
Date Logic with date and time validation
jQuery(function(){
var logic_start = function( currentDateTime ){
var d = new Date(currentDateTime); var date = d.getDate();
var month = d.getMonth(); var year = d.getYear();
var hours = d.getHours(); var minutes = d.getMinutes();
var dd = new Date($('#date_timepicker_end').val()); var end_date = dd.getDate();
var end_month = dd.getMonth(); var end_year = dd.getYear();
var end_hours = dd.getHours(); var end_minutes = dd.getMinutes();
var endtime= end_year+'/'+end_month+'/'+end_date;
var starttime= year+"/"+month+"/"+date;
if(starttime==endtime){
this.setOptions({
maxTime:end_hours+":00"
});
}else
this.setOptions({
maxTime:"23:00"
});
this.setOptions({
maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
});
};
var logic_end = function( currentDateTime ){
var d = new Date(currentDateTime); var date = d.getDate();
var month = d.getMonth(); var year = d.getYear();
var hours = d.getHours(); var minutes = d.getMinutes();
var dd = new Date($('#date_timepicker_start').val()); var end_date = dd.getDate();
var end_month = dd.getMonth(); var end_year = dd.getYear();
var end_hours = dd.getHours(); var end_minutes = dd.getMinutes();
var starttime= end_year+'/'+end_month+'/'+end_date;
var endtime= year+"/"+month+"/"+date;
if(starttime==endtime){
this.setOptions({
minTime:end_hours+":00"
});
}else
this.setOptions({
minTime:"00:00"
});
this.setOptions({
minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
});
};
jQuery('#date_timepicker_start').datetimepicker({
format:'Y/m/d H:i:s',
onChangeDateTime:logic_start,
onShow:logic_start
});
jQuery('#date_timepicker_end').datetimepicker({
format:'Y/m/d H:i:s',
onChangeDateTime:logic_end,
onShow:logic_end
});
});
let DateInitial = $("#DateInitial");
let DateEnd = $("#DateEnd");
let dateNow = new Date();
/* click start clear end */
DateInitial.on("click", function(){
DateEnd.val(" ");
DateInitial.datetimepicker({
onShow:function( ct ){
this.setOptions({
format: 'd-m-Y H:i',
closeOnDateSelect : true,
validateOnBlur : true,
minDate: -0,
minTime: dateNow.getTime(),
onClose: function($input){
dateAllowPlusOne($input);
}
});
}
});
});
function dateAllowPlusOne(dateStart){
if(DateInitial.val()=="")
{
DateInitial.focus();
return false;
}
DateEnd.datetimepicker({
'format': 'd/m/Y H:i',
'minDate': -0,
startDate: dateStart,
'closeOnDateSelect' : true,
'validateOnBlur' : true,
'minDateTime': new Date()
});
DateEnd.attr("disabled", false);
}
I am getting date like this 2018-10-17T00:00:00.000Z i should convert to 17.10.18 and send through [(ngModel)] by using my date picker
Can you help me.
got solution.
var availYear = moment(availDate).format("YYYY");
var availMonth = moment(availDate).format("M");
var availDay = moment(availDate).format("DD");
this.model = { date: { year: availYear, month: availMonth, day: availDay } };
I'm running into this error when trying to use datePickerAndroid and setting the state afterwards.
Error Message
I feel like the problem may be from the initial state being a new Date() but not 100% sure.
_isAndroid = async () => {
let {action, year, month, day} = await DatePickerAndroid.open({
date: this.props.startDate,
});
if (action === DatePickerAndroid.dismissedAction) {
this.props.closeModal()
} else {
const date = year + "-" + month + "-" + day
this.props.onDateChange(date)
}
}
Prop Function:
onDateChange = (newDate) => {
this.setState({currentDate: newDate}) // <- This one is breaking
let dates = this.state.dates;
let index = this.state.currentIndex;
if (this.state.currentKey === "start") {
dates[index].start = newDate
} else {
dates[index].end = newDate
}
this.setState({dates: dates});
}
I've narrowed it down to the first setState, and I've tried making the initial state a string as well as setting the state to a simple string but still getting the error.
For DatePickerAndroid
expected dynamic type double
In other words native component wants time, but you put string. You this.props.startDate is string, transfer time in time format. Example:
const {action, year, month, day} = await DatePickerAndroid.open({
date: new Date() // <- This is Date, not string!
});
Good luck!