How to get a specific future date in date picker - javascript

I have some data comprising startdate and enddate.
When I edit that data, I want to only allow future dates in enddate datepicker, but that has to be one day greater than the startdate.
For Example: If startdate = 01/05/2020, then I want enddate to be 01/06/2020 or greater than that in datepicker.
I tried that with a function naming getNextDayToStartDate() but I know I am doing something wrong.
Thanks.
Please see the code here: https://stackblitz.com/edit/angular-dtnlyc

onEditData(data): void {
var newdate = this.getNextDayToStartDate(data.startDate);
this.editData = {
Name: data.Name,
startDate: this.getDate(data.startDate),
endDate: newdate
}
this.editDataDialog = true;
}
Your function to add a day returns a value, yet you continue with the original value. Capturing the returnvalue and using that, solves the issue.
Small sidenote: momentjs is a rather usefull thing for working with dates :) Might want to look in to that ;)

Add editData.startDate to you method call in your html, that will fix it!
<input type="date" [min]="getNextDayToStartDate(editData.startDate)" [(ngModel)]="editData.endDate">

Related

How to format a string like `2018911` into a Date?

From backend, the date format is like above, and I want to format the date using formatter into a real date. I got a datepicker in my detailpage and the datepicker wants a real date, to show it up.
So I tried a bit, but I can't get it to work. So maybe someone can help me or guide how to do it? I know I can format the date in the backend but I need it that way like above as a string.
If you are using sap.m.DatePicker here an example:
<DatePicker
id="DP2"
value="2014-03-26" valueFormat="yyyy-MM-dd" displayFormat="long"
change="handleChange"
class="sapUiSmallMarginBottom"/>
there's the valueFormat and displayFormat attribute to shape date format as you want.
valueFormat is the date format you want when user click on date and you can grab in oEvent.
displayFormat is the date format you want to show.
Reference SAPUI 5 DatePicker example
Hi you can create a date from teh string you receiving by using below js code
getDate:function(value){
//value is your string from backend "20120515"
if(value){
var dateString = value;
var year = dateString.substring(0,4);
var month = dateString.substring(4,6);
var day = dateString.substring(6,8);
var date = new Date(year, month-1, day);
return date; // Keep in mind the date returned will only be correct if the string is passed in above format
}
}
You can use the above function in formatter.js file and can use in datepicker as below
<DatePicker value="{path:'modelDateProperty', formatter:'.formatter.getDate', }" />
I hope this helps

setHours() convert my Date object in string timestamp

I try to set a date to midnight to simplify my date manipulation, for this I wrote this part of code:
var now = new Date();
today = now.setHours(0,0,0,0);
console.log(now, today);
I'm surprised to see now contains a Date object and today a timestamp. This brings errors when I want to use getMonth() or other date's functions. It's paintful to recreate a Date object with the timestamp.
Is it normal? How can I fix this?
(Feel free to update my post to correct my bad english :)
Is it normal?
Yes
How can I fix this?
You are assigning the return value of now.setHours(0,0,0,0)to today.
Maybe what you are looking for is something like this:
var now = new Date();
var today = new Date();
today.setHours(0,0,0,0);
In this way, setHours is acting upon the value you wish to have the hours set on. This is the primary manner of using setHours.
Other details
The specification doesn't appear to mention the return value. Other sites such as w3schools do.
The Chromium setHours source shows a value being return though other functions that perform similarly do not return this value. I presume that the SET_LOCAL_DATE_VALUE function found in chromium's date.js is assigning the value into the first argument.
I had a similar situation and pcnate answer didn't solved my issue...
What I did was:
var today = new Date();
today = new Date(today.setHours(0,0,0,0));
console.log('Date: '+today);
You can manipulate dates easily using datejs or momentjs
date.js:
Date.today().set({ hour : 0 });
moment.js
moment().set({ "hour": 0, "minute" : 0, "second": 0});

jQuery's datepicker "minDate" not working

I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk
I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox

Comparing 2 dates (failing if one of the dates is in following year)

The code below works fine if the 2 dates are within the same year, but seems to break if the end date is in the following year. Could anyone point me in the right direction as to why?
Both vars are date pickers in the format DD/MM/YYYY.
Thanks in advance.
$(document).ready(function() {
$("#start").change( function() {
var startDate = $('#start').val().replace('/','');
var endDate = $('#due').val().replace('/','');
if(startDate > endDate){
$("#due").val($(this).val());
}
});
});
This comparison will only work if the dates are in format YYYY-MM-DD. If val() is a string (in the format DD/MM/YYYY), you can do:
var startDate = $('#start').val().split('/').reverse().join('-');
var endDate = $('#due').val().split('/').reverse().join('-');
Then you can compare them.
if your startdate is like 10/12/2012 and your enddate is the 10/01/2013 take a look at your code and what it generates:
"10/12/2012" -> "10122012”
"10/01/2013" -> "10012013"
what you do is comparing 2 strings against each other, and at the third position the first string is bigger than the second.
you should us Date to compare dates.
if you want it easier, take a look at moment.js
Like Patrick James McDougle said, it's probably not a good idea to compare dates by strings. Try the Date object, like this:
$("#start").change( function() {
var startDate = new Date($('#start').val());
var endDate = new Date($('#due').val());
if (startDate > endDate){
$("#due").val($(this).val());
}
});
You are comparing, for example, 1232013 (1/23/2013) with 12232012 (12/23/2012). The latter is a larger numeric value, but it is an earlier date.

Validating a UK date using Javascript/jQuery

I have two jQuery datepickers that once changed, will trigger some ajax to grab all information between the two dates.
I want to run some code to check that the first date is smaller than the second, by converting to a date using this code:
function FormatUkDate(dateStr) {
dateStr = dateStr.split("/");
return new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
}
This works great, but the problem is even if I enter a date of '50/08/2011' it still validates and converts that to a Javascript date, I believe by adding the additional number of days to the start date.
Is there a way to properly validate this please?
Thanks!
you can validate using a jquery masked plugin,you can check it http://digitalbush.com/projects/masked-input-plugin/
For working with dates you can try to use datejs library. It has many features including validating dates. To solve your problem you can use Date.validateDay method. Also you can use datejs to compare dates.
hm... I guess a plugin would be a better solution, but for what it's worth:
function FormatUkDate(dateStr) {
dateStr = dateStr.split("/");
var newDate = new Date(dateStr[2], dateStr[1] - 1, dateStr[0]);
return newDate.getDate() == Number(dateStr[0]) && newDate.getMonth() == Number(dateStr[1]) - 1? newDate : null;
}
returns null if the date carries over to the next month.
Edit
New code :P

Categories

Resources