JQuery Datepicker change value attribute of div when current date is selected - javascript

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.

Related

Add class to element based on date

I have a span element that looks like this.
html
<span class="tribe-event-date-start">September 5 # 7:00 pm</span>
I would like to target that element by its date and add a class to its parent container.
The class is intended to highlight the container if the current date matches the date in the element. Note, I can only get the Month and Day here, so that's all that needs to match. I am not a JS or JQuery expert at all, but get the basics, I know I can utilize one of the two to produce the end result.
This is the output of the WordPress plugin "The Events Calendar" widget to display upcoming events.
The end result should be a class added to the parent div IF the element date matches the actual day's date.
If you can trust the output will always look like that you can do something like:
var _dateToCheck = $(".tribe-event-date-start").text();
_dateToCheck = _dateToCheck.substring(0,_dateToCheck.indexOf("#"));
_dateToCheck.trim();
var _current = new Date();
console.log(_dateToCheck.getMonth(), _dateToCheck.getDate(), _current .getMonth(), _current.getDate());
so then you can do your comparison checks against the month, then followed by the date.
If that class "tribe-event-date-start" is actually what needs to be applied to the element, then you would do that after your date comparison logic... but you still need something to seach on, so if you don't have a class or an ID to start with then you're going to have to use the actual element, but I'd still try and whittle that list down a bit - something like:
var _allTheRows = $("#my-calendar-plugin-thing span");
_allTheRows.each(checkDate);
function checkDate(el){
var _dateToCheck = $(el).text();
_dateToCheck = _dateToCheck.substring(0,_dateToCheck.indexOf("#"));
_dateToCheck.trim();
var _current = new Date();
console.log(_dateToCheck.getMonth(), _dateToCheck.getDate(), _current
.getMonth(), _current.getDate());
//... check if date is greater or smaller or the same, or whatever your logic is
if(meetsMyCondition){$(el).parent().addClass("tribe-event-date-star")}
}

getElementByName() for date

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.

How can I get date and time separately using jQuery?

In my table date is listed as "2015-07-31 06:02:20". How can I get date and time separately using jQuery?
I used some code but it shows some errors.
var timestamp = new Date(data.responsecusthistory.created_at);
var date = timestamp.toDateString();
Error: Invalid Date
var date = data.responsecusthistory.created_at.split(" ")[0];
var time = data.responsecusthistory.created_at.split(" ")[1];
If you want to have a time string (i.e. HH:MM:SS), try e.g. this:
var timestampTime = timestamp.toTimeString().split(' ')[0];
Anyway, there's no obvious reason why you get the "Error: Invalid Date", as long as
data.responsecusthistory.created_at
is a correct value, such as "2015-07-31 06:02:20". Please consider double-checking this variable.
Try this:
dateString= "2015-07-31 06:02:20";
temp = new Date(dateString);
dateStr= $.datepicker.formatDate('mm/dd/yy', temp );
for getting different formats check the link https://github.com/phstc/jquery-dateFormat.
Using different formats we will get different date, time etc in which ever forms we need it.

Full Calendar Get current date

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

How to set max date for jquery ui datepicker

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
});

Categories

Resources