I have a jquery datepicker which is already getting quite complicated but I want to add in another attribute to the td of certain dates
I already show certain dates as green based on a set of dates in an array (created based on options in a select menu), but I also want to add attributes with other info to these dates.
Here's the code I have so far (including the array for a price which I want to add):
$('.propertyAvailabilityCal').datepicker({
beforeShow: function(input, inst) {
startDates = [];
startPrice = [];
selectdatesElem = $(input).siblings("select.startdates");
$(input).siblings("select.startdates").find("option").each( function() {
var startdateParts = $(this).val().split(', ');
startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
});
$(input).siblings("select.startprice").find("option").each( function() {
startPrice.push($(this).val());
});
},
beforeShowDay: function(date) {
for (i = 0; i < startDates.length; i++) {
if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
return [true, 'eventDay', date];
}
}
return [false, ''];
}
});
And:
<select class="startPrice">
<option value="274.95"></option>
<option value="274.95"></option>
<option value="274.95"></option>
<option value="274.95"></option>
<option value="274.95"></option>
</select>
<select class="startdates">
<option value="2013, 06, 28"></option>
<option value="2013, 07, 01"></option>
<option value="2013, 07, 08"></option>
<option value="2013, 07, 11"></option>
<option value="2013, 07, 18"></option>
</select>
I want to be able to add the price as an attribute to that date. Is this even possible and if so does anyone know how?
Here's a jsfiddle to show what I want to achieve but with the price appearing rather than the date when you hover over a date...
http://jsfiddle.net/9tapA/
Thanks
try this
FIDDLE
btw, $(input).siblings("select.startPrice"). remember css selectors are case sensitive
Related
I'm creating a form for a credit card payment.
As part of the form, I also collect the expiration date details of the client's card.
The month and year fields are both of a Select element type within the HTML.
What I want to do, using jQuery or JavaScript, is, in case the client chooses current year from the list of available years, previous months will be removed from the list of options, and if a past month was already selected, the value in the month field should reset by default to be current month selected.
In case he changes the year value again to a future year, all months should be shown again.
Basically what I'm trying to achieve here is, making sure the client can't choose a past date for a CC expiry date, instead of using validations and showing alerts in case he does.
EDIT
Well, I haven't tried anything yet as I'm not experienced much with front-end, but I assume I will have to use something like:
$(document).ready(function () {
$("#year").change(function () {
var date = new Date();
var currentmonth = date.getMonth();
var currentyear = date.getFullYear();
var year = $(this).val();
if (year == currentyear) {
$("#month").html('add a loop here to add options from currentMonth to 12');
} else {
$("#month").html('same as above but from 1 to 12');
}
});
});
I'm just not sure if it's the right way to do it and if so, how to write the loop properly. Also, I don't know if I'm missing something in order for it to work.
This is what I did eventually:
PHP (using Laravel framework), HTML and jQuery *
First of all I created an array of all month names starting from index 1 and on. ([1]=>January, [2]=>February, ...) => $months
I also saved the int value of the current as $currentMonth
HTML:
<select id="year" name="..." class="...">
<option value="">Choose...</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
<select id="month" name="..." class="...">
<option value="">Choose</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
jQuery:
$("#year").change(function () {
var date = new Date();
var currentyear = date.getFullYear();
var year = $(this).val();
if (year == currentyear) {
$("#month").html("#for($i=(int)$currentMonth;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>#endfor");
} else {
$("#month").html("#for($i=1;$i<=12;$i++)<option value='{{$i}}'>$months[$i]</option>#endfor");
}
});
I'm not sure what you were having trouble with, but here's an example of what you could do: (Untested)
// get current date
var now = new Date();
var day = now.getDate(); // day of the month
var month = now.getMonth()+1; // this is normally 0-based, added 1 for 1-based months
var year = now.getFullYear(); // four digit year
// compare user date to current date
if(year === userYear){
if(userMonth<=month){
userMonth = month;
if(userDay<day){
userDay = day;
}
}
for(var i=0;i<month;i++){ // remove all months before current month
monthArray.remove(i);
}
} else {
// reset the array
for(var i in monthArray){
monthArray.remove(i); // remove all the elements
}
for(var i=1;i<13;i++){
var option = document.createElement("option");
option.text = i;
x.add(option); // add all the months
}
}
This code below is suppose to show an alert box if an incorrect date and/or time is selected.
The problem I'm having is, If I selected 25/11/2015 and choose 11:00 It shows "Please change date or Time". If I then select 25/11/2015 and choose 21:00 it shows "That's Fine".
The function is ignoring the date and just checking the time.
It should show a message saying "Please change date or time" if the user selects a time that is gone already or a date that is before today.
I hope I can get help with this issue. Thanks in advance.
function myFunction() {
var today = new Date();
var select_text = document.getElementById("datepicker-leave").value;
var select_date = new Date(select_text);
var select_time = document.getElementById("leavedrop").value;
var curr_time = today.getHours() + 1;
if ((select_date.getTime() <= today.getTime()) && select_time < curr_time) {
alert("Please change Date or Time")
} else {
alert("That's Fine")
}
}
<script>
$(function() { //datepickers
$( "#datepicker-leave).datepicker({
dateFormat: 'd-M-yy'});
});
</script>
<input type="text" id="datepicker-leave">
<select id="leavedrop">
<option value="0">00:00</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
<option value="5">05:00</option>
<option value="6">06:00</option>
<option value="7">07:00</option>
<option value="8">08:00</option>
<option value="9">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="24">23:00</option>
</select>
<input type="button" value="Submit" onClick="myFunction()" />
try the below structure for the date
**$( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });**
Then try this
$(function() {
$( "#date" ).datepicker({
dateFormat: 'd MM, yy',
onSelect: function(dateText, inst) {
var stop = dateText.indexOf(',');
alert( dateText.substring(0, stop));
}
});
});
In side on select you trigger the alert.
I hope this should help
Thanks
Its not working because you are not entering date in proper format
You need to use (YYYY-MM-DD) format to make it work
for your example put date as 2015-11-25
It seems like date object in JavaScript is pretty weak without any additions.
I found the pretty useful library DateJS which gives you some powerful methods to solve your problem.
Here is also a little guide from Datejs.
For example you could use the equals method: Date.equals(Date.today(), pickedDate());
You have to read a little bit through the documentation to reach your goal.
Html:
<select id="days" multiple="multiple" data-placeholder="Select days...">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
Javascript:
$("#days").kendoMultiSelect({
autoClose: false
});
var days = $("#days").data("kendoMultiSelect");
How do I find out if a specific item was selected? For instance, how do I know if user selected Friday?
Note that I can select multiple items here.
There's no API method to check whether a specific item is selected, but you can easily create one, e.g. like this:
kendo.ui.MultiSelect.fn.isSelected = function (key) {
var selectedItems = this.value();
return selectedItems.indexOf(key) > -1;
};
which you can then use like this:
$("#days").kendoMultiSelect({
autoClose: false
});
var days = $("#days").data("kendoMultiSelect");
$("#button").click(function() {
console.log("is it friday?", days.isSelected("Friday"));
});
Look at the dataItems() function:
http://docs.telerik.com/kendo-ui/api/web/multiselect#methods-dataItems
And then you can iterate the selected items like this:
days.dataItems().forEach(function(element, index, array) {
//dataItems() returns the selected items
// Work on each element, element.value
});
Here is a jsbin:
http://jsbin.com/vijiq/1/edit?html,js,output
You could give the switch a try.
var day = document.getElementById("days").value;
switch(day) {
case "Monday":
yourFunction();
break;
case "Tuesday":
anotherFunction();
break;
... etc.
}
Alright, Try something like this instead? Untested, mind you.
var days = [];
var options = document.querySelectorAll("#days option");
var i = 0, length = options.length;
for (i; i < length; i++) {
if (options[i].selected) {
days.push(options[i].value);
}
}
alert(days);
I want to have two select tags in html, one for hour and one for minutes. I want the default value of hour to be set on current hour and the value of minute to be set on current minute. I think with default time to be set for example on 3, i should have some thing like this:
<select name="hour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
...
<option value="23">23</option>
</select>
now my question is how can i use javascript to show the current hour and minutes by default?
There are JavaScript Date methods called .getHours() and .getMinutes(). So given:
<select id="hour" name="hour">...</select>
<select id="minute" name="minute">...</select>
You can do something like the following in a script block that appears after the selects (or is called onload or on DOM ready):
var currentDateTime = new Date();
document.getElementById("hour").value = currentDateTime.getHours();
document.getElementById("minute").value = currentDateTime.getMinutes();
Depending on how you're creating the option elements, one approach is to use:
var now = new Date(),
// we're adding one because JavaScript returns zero-based hours, 0-23
hour = now.getUTCHours() + 1,
sel = document.getElementById('hours'),
opt;
for (var i=0; i<24; i++){
opt = document.createElement('option');
opt.value = i;
opt.textContent = i;
sel.appendChild(opt);
if (i == hour) {
opt.selected = true;
}
}
JS Fiddle demo.
This uses the JavaScript Date() methods, getUTCHours()
If your option elements are already set in the HTML, and you're simply changing which is selected by default:
var now = new Date(),
hour = now.getUTCHours() + 1,
sel = document.getElementById('hours'),
curHour = sel.getElementsByTagName('option')[hour];
curHour.selected = true;
JS Fiddle demo.
References:
Date().
I'm using the JQuery DatePicker to have the user pick a date and have that show up in a textbox. Easy enough. However a restriction I'm working on is that the date range is restricted based on the month that's currently picked out in a user dropdown menu to the month beginning and end dates.
So for example if someone selects "Aug/2010" in the dropdown then the Datepicker for the textbox must be between August 1st and August 31st - the beginning and end of the month. This
Textbox outputted HTML:
<select id="ctl00_contentlocalnav_Menu_selectmonth">
<option value="NA">-- Select Month --</option>
<option value="Jun/2010">Jun/2010</option>
<option selected="selected" value="May/2010">May/2010</option>
<option value="Aug/2009">Aug/2009</option>
<option value="Jul/2009">Jul/2009</option>
</select>
JQuery:
jQuery(document).ready(function() {
$("#ctl00_contentactual_txtDate").datepicker({ minDate: new Date(2010, 8 - 1, 1), maxDate: new Date(2010, 8 - 1, 31) });
});
As you see the JQuery range is hard coded. What's the best way to solve this?
Here's what I would do.
Change the drop down values to contain a min/max date range that is able to be parsed by JavaScript.
For example:
<select id="ctl00_contentlocalnav_Menu_selectmonth">
<option value="NA">-- Select Month --</option>
<option value="06/01/2010-06/30/2010">Jun/2010</option>
<option selected="selected" value="05/01/2010-05/31/2010">May/2010</option>
<option value="08/01/2009-08/31/2009">Aug/2009</option>
<option value="07/01/2009-07/31/2009">Jul/2009</option>
</select>
You can then bind to the change event of the drop down, and alter the date picker range.
$(function() {
$('#ctl00_contentlocalnav_Menu_selectmonth').change(function() {
var ranges = $(this).val().split('-');
var minDate = new Date();
minDate.setTime(Date.parse(ranges[0]));
var maxDate = new Date();
maxDate.setTime(Date.parse(ranges[1]));
$("#ctl00_contentactual_txtDate").datepicker('option', 'minDate', minDate);
$("#ctl00_contentactual_txtDate").datepicker('option', 'maxDate', maxDate);
});
});