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.
Related
apologies in advance if this question's already been answered. I searched but couldn't find an answer.
I use datepicker on a webpage with the code below.
$(function() {
$("#datepicker").datepicker({
dateFormat:"DD, MM d, yy",
minDate: 0,
});
});
I also have the following form.
<select id="language">
<option value="english">English</option>
<option value="french">French</option>
</select>
<button onclick="showDate()">Submit</button>
I would like to change the datepicker format and dayNames values based on the option selected. I believe I need an if operator for this, but can't seem to get it working properly.
So, if the option "french" were selected, the dateFormat would be "DD d MM yy" and the dayNames would be set as "dayNames: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"]".
The date generated would then appear in a paragraph. So if French were selected the date would read "mercredi 25 décembre 2019" and if English were selected the date would read "Wednesday, December 25, 2019" due to the default date format.
I'm fairly new to JavaScript and jQuery and would appreciate any insight with this. I originally thought about changing the localization of the calendar upon selection of "french", but that may overcomplicate things.
Thanks for the clarification! Here's an answer that should help you with what you're looking for. All the major browsers can translate dates with javascript, using .toLocaleDateString(language, options), so I have written you a snippet to run that you can play around with.
Note: I have changed your select to have values that are the locale strings required for the toLocaleDateString function, and you can play around with the formatting with the dateOptions object. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
So the getDate method for the datepicker returns a javascript Date object, which is what is needed for toLocaleDateString. And the currentLanguage variable is set using jquery to get the value of the selected dropdown item.
Hope this helps!
$(function() {
$("#datepicker").datepicker({
dateFormat:"DD, MM d, yy",
minDate: 0,
});
});
function showDate() {
var dateOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
var selectedDate = $("#datepicker").datepicker("getDate");
var currentLanguage = $("#language option:selected").val();
alert(selectedDate.toLocaleDateString(currentLanguage, dateOptions));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="datepicker">
<select id="language">
<option value="en-US">English</option>
<option value="fr-FR">French</option>
</select>
<button onclick="showDate()">Submit</button>
I am using the following code to set a drop-down value to the current month, it is working in Chrome and Edge but in IE 11 the value is empty.
month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month
month contains the value "Jul" and is of type string, and I can set it as the value of a text box.
If I manually assign month = "Jul", it does set the value on the drop-down.
IEs toLocalString() adds some invisible Unicode characters to the string so the value of the dropdown-option and the value of month are not actually the same.
If it won't cause cross-locale compatibility issues then you can trim these characters with replace.
Alternatively, if you know the order of your dropdown list then get the month as a number and use selectedIndex
currentDate = new Date()
locale = 'en-US'
month = currentDate.toLocaleString(locale, {month:"short"})
document.getElementById("month").value = month.replace(/[^A-z]/g,'')
// Alternatively
//document.getElementById("month").selectedIndex = currentDate.getMonth();
<select name="dates" id="month">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
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
}
}
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
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);
});
});