"Date has wrong format" Angular 10 Rest Django - django-rest-framework

Hi I'm new to these two frameworks and I need your help !
So I'm using Rest Django for backend and Angular for Frontent , I'm also using Angular material for the DatePicker , although I changed the format of the date to YYYY-MM-DD to the DatePicker I still receive an error message "Date has wrong format. Use one of these formats instead: YYYY-MM-DD." by the server when sending the api !
to change the date format in Angular I used this code into app.module
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '#angular/material/core';
import { MomentDateModule, MomentDateAdapter } from '#angular/material-moment-adapter';
export const DateFormats = {
parse: {
dateInput: ['YYYY-MM-DD']
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MM YYYY',
},
};
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: DateFormats }
],
After console.log('date',this.date) to see the date object entered by the datepicker I received
date
{…}
​
_d: Date Tue Aug 18 2020 00:00:00 GMT+0100 (UTC+01:00)
​
_i: Object { year: 2020, month: 7, date: 18 }
​
_isAMomentObject: true
​
_isUTC: false
​
_isValid: true
​
_locale: Object { _calendar: {…}, _longDateFormat: {…}, _invalidDate: "Invalid date", … }
​
_pf: Object { empty: false, overflow: -1, charsLeftOver: 0, … }
​
<prototype>: Object { add: createAdder(val, period), calendar: calendar$1(time, formats), clone: clone(), … }
Do you know how can I solve the problem please ?

u should create a method to trim ur date removing the timezone & other inform then call the method in ur date input field
something like this
yourDateApp.component.ts file
trimDate(myDate){
let strDate = JSON.stringfy(myDate.value)
let newDate = strDate.substring(1, 11)
//assign the new trimmed date to date value in ur form
yourForm.controls['date_field'].setValue(newDate)
}
yourDateApp.component.html file
//call your function in the html file like this
<input matInput (dateChange)="trimDate($event)">
this will accept the date trim it to a way django will recognize it

Related

How can I choose the minimum range for each month with daterangepicker?

Using this http://www.daterangepicker.com/
How can I choose the minimum selection for each month? For example I'm using this code;
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
I want this code like this;
$('.date-picker input').daterangepicker({
if(this.month==5){
"minSpan": {
"days": 5
},
}
showDropdowns: true,
locale: {
format: 'DD/MM/YYYY'
}
});
The pull request fixing this was not implemented yet, so you will have to change the source file by yourself. Install Date Range Picker via npm
bootstrap-daterangepicker
Link the js-file in your html (if you are working with html)
<script type="text/javascript" src="node_modules/bootstrap-daterangepicker/daterangepicker.js"></script>
Go to the daterangepicker.js file and add the missing code:
https://github.com/dangrossman/daterangepicker/pull/2173/files
Then your js code must work
$('.date-picker input').daterangepicker({
"minSpan": {
"days": 5
},

How do I initialize a variable in Apollo Client 3

Hey I'm trying to learn Apollo Client v3 but I can't wrap my head around the docs and the new local state management.
I want to have a state which remembers the month and the year last used.
This is what I have in my old Apollo when I create a new ApolloClient
clientState: {
defaults: {
currentMonth: 8,
currentYear: 2020,
},
},
So trying to understand the new docs this is what I tried
const cache = new InMemoryCache({
typePolicies: {
clientState: {
fields: {
month: 8,
year: 2020,
},
},
},
});
But with no luck. I feel really dumb for not understanding the docs but it's hard to find anything that resembles my question.
Right now I'm really close to swap to Redux but still hoping for a solution.
You can use reactive variables in the Apollo Client 3.
https://www.apollographql.com/docs/react/local-state/reactive-variables/#:~:text=New%20in%20Apollo%20Client%203,application%20without%20using%20GraphQL%20syntax.
For your example:
Define
import { makeVar } from '#apollo/client';
export const currentMonth = makeVar(8);
export const currentYear = makeVar(2020);
Get
import { currentMonth, currentYear } from "./yourPath/yourFile";
// Output: 8
console.log(currentMonth());
// Output: 2020
console.log(currentYear());
Set
import { currentMonth, currentYear } from "./yourPath/yourFile";
currentMonth(9);
// Output: 9
console.log(currentMonth());
currentYear(2021);
// Output: 2021
console.log(currentYear());

validate date in vuelidate or any other way

I am trying to validate date in vuelidate. I want to select today's date or a date in the past. But it's not working. Here is my minimal code:
import { required, maxValue } from 'vuelidate/lib/validators'
validations: {
operationalsince: { required, maxValue: maxValue(new Date()) }
},
computed: {
operationalsinceErrors () {
!this.$v.operationalsince.maxValue && errors.push('Date is invalid')
}
I also tried v-date-picker attributes:
:max-date="new Date()" :disabled-dates="{ start: new Date(), end: null }"
But I am not achieving what I want to achieve. Thanks for any suggestions.
As far as I can tell the v-date-picker does not support validation error messages, however you can limit the selection with the max, min, or the allowed-dates properties.
The max and min are taking the date in the ISO format (e.g. max="2018-03-20"), so you need to use:
<v-date-picker
label="operationalsince"
v-model="operationalsince"
:max="new Date().toISOString()"
#input="$v.operationalsince.$touch()"
#blur="$v.operationalsince.$touch()"
required
></v-date-picker>
Working CodePen

Spring mvc | Mongo query returns null [duplicate]

I've been playing around storing tweets inside mongodb, each object looks like this:
{
"_id" : ObjectId("4c02c58de500fe1be1000005"),
"contributors" : null,
"text" : "Hello world",
"user" : {
"following" : null,
"followers_count" : 5,
"utc_offset" : null,
"location" : "",
"profile_text_color" : "000000",
"friends_count" : 11,
"profile_link_color" : "0000ff",
"verified" : false,
"protected" : false,
"url" : null,
"contributors_enabled" : false,
"created_at" : "Sun May 30 18:47:06 +0000 2010",
"geo_enabled" : false,
"profile_sidebar_border_color" : "87bc44",
"statuses_count" : 13,
"favourites_count" : 0,
"description" : "",
"notifications" : null,
"profile_background_tile" : false,
"lang" : "en",
"id" : 149978111,
"time_zone" : null,
"profile_sidebar_fill_color" : "e0ff92"
},
"geo" : null,
"coordinates" : null,
"in_reply_to_user_id" : 149183152,
"place" : null,
"created_at" : "Sun May 30 20:07:35 +0000 2010",
"source" : "web",
"in_reply_to_status_id" : {
"floatApprox" : 15061797850
},
"truncated" : false,
"favorited" : false,
"id" : {
"floatApprox" : 15061838001
}
How would I write a query which checks the created_at and finds all objects between 18:47 and 19:00? Do I need to update my documents so the dates are stored in a specific format?
Querying for a Date Range (Specific Month or Day) in the MongoDB Cookbook has a very good explanation on the matter, but below is something I tried out myself and it seems to work.
items.save({
name: "example",
created_at: ISODate("2010-04-30T00:00:00.000Z")
})
items.find({
created_at: {
$gte: ISODate("2010-04-29T00:00:00.000Z"),
$lt: ISODate("2010-05-01T00:00:00.000Z")
}
})
=> { "_id" : ObjectId("4c0791e2b9ec877893f3363b"), "name" : "example", "created_at" : "Sun May 30 2010 00:00:00 GMT+0300 (EEST)" }
Based on my experiments you will need to serialize your dates into a format that MongoDB supports, because the following gave undesired search results.
items.save({
name: "example",
created_at: "Sun May 30 18.49:00 +0000 2010"
})
items.find({
created_at: {
$gte:"Mon May 30 18:47:00 +0000 2015",
$lt: "Sun May 30 20:40:36 +0000 2010"
}
})
=> { "_id" : ObjectId("4c079123b9ec877893f33638"), "name" : "example", "created_at" : "Sun May 30 18.49:00 +0000 2010" }
In the second example no results were expected, but there was still one gotten. This is because a basic string comparison is done.
To clarify. What is important to know is that:
Yes, you have to pass a Javascript Date object.
Yes, it has to be ISODate friendly
Yes, from my experience getting this to work, you need to manipulate the date to ISO
Yes, working with dates is generally always a tedious process, and mongo is no exception
Here is a working snippet of code, where we do a little bit of date manipulation to ensure Mongo (here i am using mongoose module and want results for rows whose date attribute is less than (before) the date given as myDate param) can handle it correctly:
var inputDate = new Date(myDate.toISOString());
MyModel.find({
'date': { $lte: inputDate }
})
Python and pymongo
Finding objects between two dates in Python with pymongo in collection posts (based on the tutorial):
from_date = datetime.datetime(2010, 12, 31, 12, 30, 30, 125000)
to_date = datetime.datetime(2011, 12, 31, 12, 30, 30, 125000)
for post in posts.find({"date": {"$gte": from_date, "$lt": to_date}}):
print(post)
Where {"$gte": from_date, "$lt": to_date} specifies the range in terms of datetime.datetime types.
db.collection.find({"createdDate":{$gte:new ISODate("2017-04-14T23:59:59Z"),$lte:new ISODate("2017-04-15T23:59:59Z")}}).count();
Replace collection with name of collection you want to execute query
MongoDB actually stores the millis of a date as an int(64), as prescribed by http://bsonspec.org/#/specification
However, it can get pretty confusing when you retrieve dates as the client driver will instantiate a date object with its own local timezone. The JavaScript driver in the mongo console will certainly do this.
So, if you care about your timezones, then make sure you know what it's supposed to be when you get it back. This shouldn't matter so much for the queries, as it will still equate to the same int(64), regardless of what timezone your date object is in (I hope). But I'd definitely make queries with actual date objects (not strings) and let the driver do its thing.
Use this code to find the record between two dates using $gte and $lt:
db.CollectionName.find({"whenCreated": {
'$gte': ISODate("2018-03-06T13:10:40.294Z"),
'$lt': ISODate("2018-05-06T13:10:40.294Z")
}});
Using with Moment.js and Comparison Query Operators
var today = moment().startOf('day');
// "2018-12-05T00:00:00.00
var tomorrow = moment(today).endOf('day');
// ("2018-12-05T23:59:59.999
Example.find(
{
// find in today
created: { '$gte': today, '$lte': tomorrow }
// Or greater than 5 days
// created: { $lt: moment().add(-5, 'days') },
}), function (err, docs) { ... });
db.collection.find({$and:
[
{date_time:{$gt:ISODate("2020-06-01T00:00:00.000Z")}},
{date_time:{$lt:ISODate("2020-06-30T00:00:00.000Z")}}
]
})
##In case you are making the query directly from your application ##
db.collection.find({$and:
[
{date_time:{$gt:"2020-06-01T00:00:00.000Z"}},
{date_time:{$lt:"2020-06-30T00:00:00.000Z"}}
]
})
You can also check this out. If you are using this method, then use the parse function to get values from Mongo Database:
db.getCollection('user').find({
createdOn: {
$gt: ISODate("2020-01-01T00:00:00.000Z"),
$lt: ISODate("2020-03-01T00:00:00.000Z")
}
})
Save created_at date in ISO Date Format then use $gte and $lte.
db.connection.find({
created_at: {
$gte: ISODate("2010-05-30T18:47:00.000Z"),
$lte: ISODate("2010-05-30T19:00:00.000Z")
}
})
use $gte and $lte to find between date data's in mongodb
var tomorrowDate = moment(new Date()).add(1, 'days').format("YYYY-MM-DD");
db.collection.find({"plannedDeliveryDate":{ $gte: new Date(tomorrowDate +"T00:00:00.000Z"),$lte: new Date(tomorrowDate + "T23:59:59.999Z")}})
mongoose.model('ModelName').aggregate([
{
$match: {
userId: mongoose.Types.ObjectId(userId)
}
},
{
$project: {
dataList: {
$filter: {
input: "$dataList",
as: "item",
cond: {
$and: [
{
$gte: [ "$$item.dateTime", new Date(`2017-01-01T00:00:00.000Z`) ]
},
{
$lte: [ "$$item.dateTime", new Date(`2019-12-01T00:00:00.000Z`) ]
},
]
}
}
}
}
}
])
For those using Make (formerly Integromat) and MongoDB:
I was struggling to find the right way to query all records between two dates. In the end, all I had to do was to remove ISODate as suggested in some of the solutions here.
So the full code would be:
"created": {
"$gte": "2016-01-01T00:00:00.000Z",
"$lt": "2017-01-01T00:00:00.000Z"
}
This article helped me achieve my goal.
UPDATE
Another way to achieve the above code in Make (formerly Integromat) would be to use the parseDate function. So the code below will return the same result as the one above :
"created": {
"$gte": "{{parseDate("2016-01-01"; "YYYY-MM-DD")}}",
"$lt": "{{parseDate("2017-01-01"; "YYYY-MM-DD")}}"
}
⚠️ Be sure to wrap {{parseDate("2017-01-01"; "YYYY-MM-DD")}} between quotation marks.
Convert your dates to GMT timezone as you're stuffing them into Mongo. That way there's never a timezone issue. Then just do the math on the twitter/timezone field when you pull the data back out for presentation.
Why not convert the string to an integer of the form YYYYMMDDHHMMSS? Each increment of time would then create a larger integer, and you can filter on the integers instead of worrying about converting to ISO time.
Scala:
With joda DateTime and BSON syntax (reactivemongo):
val queryDateRangeForOneField = (start: DateTime, end: DateTime) =>
BSONDocument(
"created_at" -> BSONDocument(
"$gte" -> BSONDateTime(start.millisOfDay().withMinimumValue().getMillis),
"$lte" -> BSONDateTime(end.millisOfDay().withMaximumValue().getMillis)),
)
where millisOfDay().withMinimumValue() for "2021-09-08T06:42:51.697Z" will be "2021-09-08T00:00:00.000Z"
and
where millisOfDay(). withMaximumValue() for "2021-09-08T06:42:51.697Z" will be "2021-09-08T23:59:99.999Z"
i tried in this model as per my requirements i need to store a date when ever a object is created later i want to retrieve all the records (documents ) between two dates
in my html file
i was using the following format mm/dd/yyyy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
//jquery
$(document).ready(function(){
$("#select_date").click(function() {
$.ajax({
type: "post",
url: "xxx",
datatype: "html",
data: $("#period").serialize(),
success: function(data){
alert(data);
} ,//success
}); //event triggered
});//ajax
});//jquery
</script>
<title></title>
</head>
<body>
<form id="period" name='period'>
from <input id="selecteddate" name="selecteddate1" type="text"> to
<input id="select_date" type="button" value="selected">
</form>
</body>
</html>
in my py (python) file i converted it into "iso fomate"
in following way
date_str1 = request.POST["SelectedDate1"]
SelectedDate1 = datetime.datetime.strptime(date_str1, '%m/%d/%Y').isoformat()
and saved in my dbmongo collection with "SelectedDate" as field in my collection
to retrieve data or documents between to 2 dates i used following query
db.collection.find( "SelectedDate": {'$gte': SelectedDate1,'$lt': SelectedDate2}})

Sort by Formatted DateTime with Kendo UI DateSource

In an attempt to create a list sortable by date, I created the following datasource:
sort: { field: 'dateTime', dir: 'asc' },
schema: {
model: {
id: 'Id',
fields: {
dateTime: {
field: 'DateTime',
type: 'Date',
parse: function (value) {
return kendo.toString(kendo.parseDate(value), 'MM/dd/yyyy hh:mm tt');
}
},
stuff: 'Stuff'
}
}
}
After filling it with data, I noticed that the rows in the bound list were sorting alphabetically like:
01/02/2015 08:22 PM
12/12/2014 09:00 PM
12/18/2014 08:22 PM
How can I get these dates to sort in ascending chronological order?
I imagine this occurred because the value was converted to a string in the parse function so it was no longer sorting like a date so I removed the parsing code from the field:
sort: { field: 'dateTime', dir: 'asc' },
schema: {
model: {
id: 'Id',
fields: {
dateTime: {
field: 'DateTime',
type: 'Date'
},
stuff: 'Stuff'
}
}
}
This reverted the dates shown in the listview to the default format: (Fri Dec 12 2014 21:00:00 GMT-0500 (Eastern Standard Time)), but it now sorted correctly. The final piece of the puzzle is to instead bind my element to a calculated property that parses the date instead of the dateTime field like so:
HTML
<!-- The element: -->
<td data-bind="html: myDate" style="width: auto;"></td>
JavaScript
// And in the observable:
myDate: function(e) {
return kendo.toString(kendo.parseDate(e.dateTime), 'MM/dd/yyyy hh:mm tt');
}
This worked like a charm and I got this:
12/12/2014 09:00 PM
12/18/2014 08:22 PM
01/02/2015 08:22 PM
Optionally, if you have a DateTimePicker bound to your dateTime property your myDate calculated property will not update when you change it. I solved this by listening for the change and triggering the change event manually:
viewModel.bind('change', function (e) {
if (e.field == 'selectedEvent.dateTime') // or whatever your property comes out as
viewModel.trigger('change', { field: 'myDate' });
});

Resources