i have a problem when using JQXDateTimeInput in javascript
i have a date using JQXDateTimeInput which element id = datefrom
and i want to change the other JQXDateTimeInput which element id = dateto
when user changed datefrom by addition 6 month and subtract one day from datefrom that changed by user.
can some help me?
thanks
Yes, I understand what you want ot do. You have to use their API to
catch event of changing #datefrom with valueChanged for example
get selected date and add 6 month
assing new value with value property or setDate method to
#dateto
So the full code
// catch event ("change" event also works here)
$('#datefrom').on('valueChanged', function (event) {
// get selected date
var newDate = new Date(event.args.date);
// add 6 month
newDate.setMonth(newDate.getMonth() + 6);
// set another input's date
$('#dateto').jqxDateTimeInput({value: newDate});
// or
// $('#dateto').jqxDateTimeInput('setDate', newDate);
});
FIDDLE
Related
var innerDate = document.getElementById('datetimepicker3').value;
The format I get from this line is: innerDate: "2021/07/07 14:00"
But I need to parse the date and time information here. How can I convert Start Date and Start Time into two separate variables?
I would recommend to parse that string with moments.js and then depending on your needs either get the individual parts for calculations or apply needed formatting
Example available at https://jsfiddle.net/Ly6qen3w/
let innerDateInput = "2021/07/07 14:00";
let innerDateMoment = moment(innerDateInput, "YYYY/MM/DD hh:mm");
console.log("Date:"+innerDateMoment.format("YYYY-MM-DD"));
console.log("Time:"+innerDateMoment.format("hh:mm"));
Try this:
var innerDate = new Date(document.getElementById('datetimepicker3').value)
Or you can attach an event handler to get the date whenever it changes
<script type="text/javascript">
$("#datetimepicker3").on("dp.change", function (e) {
let date = e.date;
console.log(date);
// no need to convert to a date
});
</script>
You can simple get that in different variable using various methods that are provided by JavaScript to get everything.
You can do is(id it's a date object else you have to convert it to date object)
let startDate = new Date(innerDate).getDate() + "/" + new Date(innerDate).getMonth() + "/" + new Date(innerDate).getFullYear();
let startTime = new Date("2021/07/07 14:00").getHours() +":"+ new Date("2021/07/07 14:00").getMinutes()
If you want something else you can retrieve that too with methods such as milliseconds,UFC time etc.
If you find this messy I would suggest you to use moment.js.
https://momentjs.com/
I used the following code to add one year from input date:
this.maxDate = this.drop.startDate;
this.maxDate.setDate(this.maxDate.getDate() + 365);
In this context, drop.startDate is the input variable. But when I run this code, 1 year will be added to the maxDate variable, and drop.startDate value will changed to maxDate value. Look at the images. Any guidelines guys?
Before run the code
After run the code
You have to 'clone' the date object. Otherwise the startDate will have the same reference as maxDate
this.maxDate = new Date(this.drop.startDate.getTime());
I have a form, where I need to do some validations by getting the current date and next date separately using javaScript.
I tried this code but it does not work correctly.
var currentDate = new Date();//get current date
var validdate=currentDate;
validdate.setDate(validdate.getDate()+1);
But what happens is when valid date changes to +1, then current date also changes to +1.
But I need it separately, means when I print the output: I get
currentDate = 5th May 2014;
validdate = 6th May 2014;
Then when again I print currentDate, it changes to "6th May 2014".
How to get the current date and next date without affecting each other?
instead of validdate = currentDate; try validdate = new Date();.
Your problem happens because in javascript when you pass an object to a value it is passed by reference and not by value. So when you change it you change even the original object because you don't actually have two different objects.
you are refering to same object instance for currentDate and validdate.
initialise them seperatly like below
currentDate = new Date();
validdate = new Date();
also rename your validdate to validDate for more readability.
to make a new copy of a Date object use following code
var validdate = new Date(currentDate.getTime());
now when you modify the validdate object it will not update currentDate
Try This
var currentDate = new Date();//get current date
alert(currentDate.toString());
var validdate=new Date();
validdate.setDate(currentDate.getDate()+1);
alert(validdate.toString());
alert(currentDate.toString());
The jQuery Datepicker is working great, but I would like the submit button to read different text based on whether or not the day selected is today. The submit button is a <button> and the text is the value attribute.
Is there any way to do this? My web searches haven't turned up any results.
Try like below
var dp = $('#datepicker').datepicker("getDate");
1) using the above statement, you can get the date that has be selected in datepicker (ie., parsed as date datatype)
2) Using date.toDateString(), you can get the date string which can be used to compare with datepicker's date.
$('#datepicker').datepicker();
$('button').on('click', function () {
var dp = $('#datepicker').datepicker("getDate");
var today = new Date();
if (today.toDateString() == dp.toDateString()) {
//write your code to change the text in div
}
});
FYI: value attribute is not associated with div element, I guess you're referring to custom data* value attribute.
If so then you can change it using .data() method of jQuery. Example
$('div').data('value', 'whatever you wish');
JSFiddle
If I Understood your question correctly, You want to make sure that date picked is today or not, upon submission of form.
I've gone through google, ended up with an answer, Hope It work out.
function ValidRange(date1)
{
var date=new date(); //Today
//Convert these dates into milliseconds
var date1_ms=date1.getTime();
var date_ms=date.getTime();
//Calculate difference between them
var difference_ms = date_ms - date1_ms;
return difference_ms; // It will return 0 if date is today.
}
Note: You then need to parse the strings you are getting from the UI, with Date.parse, like this:
ValidRange(Date.parse(Date_Picked));
Try this.
I have the jquery ui datepicker in my page and use two input elements id of 'startDate' and 'endDate'. My javascript has a function 'setRange()' in which min date is defined but I want to define max date that should be startDate+6 days only. I mean user must not select the date after 6 days of start date.
Please Help me. Thanks
I built something similar the other day. Basically you need to set the maxDate option on the endDate element, every time startDate is changed.
I like using moment.js for dates, since it allows you to do things like date.add('days',6)
Here's something to start you off:
$(function() {
$('#start_date').change(function() {
var start = $(this).val();
var maxDate = new Date(); // I'll leave this to you...
$('#end_date').datepicker('option','maxDate',maxDate);
}).trigger('change'); // this sets the constraint on load, too
});