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
});
Related
I am new to javascript or jQuery, I am trying to place a date picker on my website and I am able to place a datepicker with calendar, but I need it without a calendar and as a select box.
Any idea how to do it in javascript or jQuery?
Thanks
You probably aren't going to be able to modify datepicker to do this (I will gladly concede to anyone proving otherwise), but you can easily add dates to a standard select control.
In this code, I have used the formatDate from the datepicker UI, so you'll need to include jQuery UI, or at least the datepicker component, for it to work.
The following example adds 10 days, starting with the current day to a select element with an ID of "mySelect".
$(function () {
var today = new Date();
var date = new Date();
for (x = 0; x <= 9; x++) {
date.setDate(today.getDate() + x);
textDate = $.datepicker.formatDate('D, dd-M', date);
$('#mySelect')
.append($("<option></option>")
.attr("value", textDate)
.text(textDate));
}
});
I am trying to evaluate inputs on client side using javascript. The getElementByName() method is working for text type inputs. But I want to compare two dates using JS. But getElementByName() is not working for date type inputs!
Someone please help!
Here is my code:
<script type="text/javascript">
function validate()
{
var startdate = document.getElementByName("startdate").valueOf();
alert(startdate);
var enddate = document.getElementByName("enddate").value;
submitOK=true;
if(startdate>enddate)
{
alert("start date should not be greater than end date");
submitOK=false;
}
return submitOK;
}
</script>
If you want to get started quickly, add unique ids to both your date inputs, and then use
document.getElementById("startdate").value;
for example to get both values.
And then regarding of their format, a string comparison can be enough (I don't know because you did not mention anything about that), or then you could do something like
var endDate = document.getElementById("startdate").value;
endDate = new Date(endDate);
That will give you access to date specific methods that can be handy.
More on this here.
I've been learning Ruby over the last year and I'm very new to JS so I'll try to explain this as best I can.
I am using Adam Shaw's full calendar plugin. All I want to do is get the current month I am viewing (and use that to limit how far in the future or past a user can navigate, but that's not the problem).
I can get the current date, sort of. But, because of my lack of JS knowledge I'm not sure how to access the date.
Here is the relevant section of the config file,
viewRender: function(view){
var maxDate = "<%= finish.strftime('%Y/%m/%d') %>";
var currentDate = $('#calendar').fullCalendar('getDate');
console.log(currentDate);
if (view.start > maxDate){
header.disableButton('prev');
}
}
When I inspect the console log I see this being output as I click through the months.
So as you can see it is displaying the current date in view. My question is how do I access the _d bit of the Moment variable so I can use it?
My understanding would be that the Moment is class instance and the stuff in the dropdown is like its attributes, would this be a correct interpretation?
To get the current date of the calendar, do:
var tglCurrent = $('#YourCalendar').fullCalendar('getDate');
This will return the date as a moment object. You can then format it as a string in the usual date format like so:
var tgl=moment(tglCurrent).format('YYYY-MM-DD');
For the actual time, use the format: YYYY-MM-DD LTS
FullCalendar's getDate returns a moment object, so you need moment's toDate() method to get date out of it.
So, in you code try:
console.log(currentDate.toDate());
and that should return a date object.
var moment = $('#YourCalendar').fullCalendar('getDate');
var calDate = moment.format('DD.MM.YYYY HH:mm'); //Here you can format your Date
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
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.