I am adding a project start and project end date picker, <input type="date">, to a quote page for my web clients, however, I have never worked with these before. How can I use the data from these date pickers to create an if statement that if the project end date is earlier than the end date or vice versa, it will display an error message?
This is what you want. Add ids to your date pickers, get their value using simple selectors and add them to the variables. Compare the variables in the if function
var startDate = document.getElementById('startDate_id').value
var endDate = document.getElementById('endDate_id').value
if(startDate > endDate){display error}
else{do nothing}
Related
Using the moment.js library say i have a datetime with today's date and i would like to replace only the date part of the datetime with another value and keep the time portion the same
I don't want to subtract or add days etc - i have a 3rd party time picker that when you select a time it creates a datetime that is always the current day. I need to send back to server a different datetime - the date is different but keep the time portion from the picker.
example code:
let myDate = "2019-03-15T00:00:00"
let selectedDateTime = "2019-04-04T12:30:00"
expected result would be:
"2019-03-15T12:30:00"
Thank you
The following should solve your problem:
let myDate = moment("2019-03-15T00:00:00")
let selectedDateTime = moment("2019-04-04T12:30:00")
selectedDateTime.date(myDate.date());
selectedDateTime.month(myDate.month());
selectedDateTime.year(myDate.year());
As #JeremyThille suggested, you should take a look at the documentation.
Ngx Bootstrap Datepicker returns a JS Date object.
I have a custom Time picker that returns a string formatted as HH:mm.
What I need to do right now is to create a JS Date object with the selected Date, selected Time and a specific TimeZone.
I'm trying to use moment (cause we use that for dates in the whole application) but I'm having not expected behaviours.
I'm trying to:
const specificMoment = moment.tz(date, timeZone); // date is the Ngx Bootstrap selected date
specificMoment.set('hour', +time.split(':')[0]); // time is HH:mm string
specificMoment.set('minute', +time.split(':')[1]);
return specificMoment.toDate
*timeZone changes according to the user, not due to it's browser, it's an attribute of the user, so I can't set moment.tz.setDefault(...);.
What I'm facing is that .toDate is returning my current timeZone, event though it appears my different timeZone inside the moment object.
Why is it working like this and what would be a working implementation for what I need?
Ps: console.log(specificMoment.format()); returns wrong timeZone as well 2018-12-20T23:00:30-02:00.
EDIT
Turns out using const specificMoment = moment(date).tz(timeZone); and then return specificMoment.toDate() "works". It returns a Date object with 2018-12-21T05:00:00.323-0200, which is the date with specified timezone (GMT -8:00) but displayed on my current timezone (GMT -2:00).
The data is stored on my DB correctly.
Can someone explain why?
Thx.
It looks like you haven't setup moment-timezone with any data about the timezone to use.
Check out this link on Data Loading in momentjs.
I've created a JS Bin for your example that shows how to use Data Loading. Check it out here.
e.g.
moment.tz.add([
'America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0',
'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);
I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.
I am developing a site where i am using jQuery-UI datepicker, the problem is i have to select all dates and put it into an array when the user select a start date and end date using a aingle jquery UI datepicker.
i checked the jQuery-UI documentation but found nothing that solve my problem.
I want date-range to be picked up like this.
i have to use jQuery-UI, so any useful idea will be appreciated,
Thanks
you can use this method:
1.The user clicks the 2 dates
2.You save them as two variables(startDate,endDate)
3.you make a loop:
var numberOfDaysToAdd=0
var startDate;
var endDate;
var dateCheck=startDate;
var DatetoAddInArray = startDate;
var array = [];
while(DatetoAddInArray!=endDate){
//every time you check if the date is equal to the endDate
//if is not you add it in the array with the dates and then
//you increase the index.
//the while loop ends when you find the end Date
//You can change your code to add or not the start and the end dates
numberOfDaysToAdd++;
DatetoAddInArray.setDate(DatetoAddInArray.getDate()+numberOfDaysToAdd);
array[numberOfDaysToAdd-1]=DatetoAddInArray;
}
The above could be an easy way to store all the dates from the start to the end date.
(!) If the datepicker allows the user to click a startDate and then click a endDate that is before the startDate, you have to alert a message to the user to select a correct range.
Thanks.
I created datepicker like this, so no need for more answers. Thanks
Here is working Fiddle
Ok, so I am attempting to test if a date is older than today. I am using jQuery UI's Datepicker to parse the date and assign it to a variable:
//Get Date as String
var $strDate = $(".pmt-date").text();
//Parse Date
var $dtDate = $.datepicker.parseDate("mm/dd/yy", $strDate);
Then I get today's date and assign it to a variable:
//Get Today's Date
var $strToday $.datepicker.formatDate('mm/dd/yy', new Date());
var $tDate = $.datepicker.parseDate('mm/dd/yy', $strToday);
Now I would like to compare $dtDate with $tDate. This is what I have tried:
if($dtDate > $tDate)
{
alert("Payment Date is Greater");
}
else
{
alert("Today's Date is Greater");
}
When I test this, I ALWAYS get the alert "Today's Date is Greater". I can display my two date variables via an alert, and I see the dates in correct format. So why does this comparison fail to work when the parse is working correctly?
Assuming that the field with class "pmt-date" is the datepicker-controlled <input> element, you need to fetch its value with .val(), not .text().
var $strDate = $(".pmt-date").val();
Your next line of code refers to a variable called "$date", not "$strDate", so:
var $dtDate = $.datepicker.parseDate("mm/dd/yy", $strDate);
Once you've got that, you can just directly compare the Date objects:
if ($dtDate < new Date())
There's no need to turn a newly-constructed Date object into a string and then back into a date. I guess you're Date to string and back in order to strip off the time-of-day part of the date, so that's not really a bad way to do it.
In date comparisons, more than means the date comes after, and less than means the date comes before. Older than would imply that the date comes before, and thus you want to use less than
if($dtDate < $tDate)