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);
});
});
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>
Here is my question. I've written a drop-down select that shows months by numbers. I would like to apply a filter to the drop-down so that it displays the numbers as full month names.
Here is the initial code:
<select ng-model="month" ng-options="month as month for month in months" ng-change="updateMonth()">
<option value="">Choose Month</option>
</select>
I added this, experimenting, and surprisingly it did something, but not what I wanted... it changed the name of every select option in the list to December - the app still functions properly but it isn't showing all the different names:
<select ng-model="month" ng-options="month as month | date: 'MMMM' for month in months" ng-change="updateMonth()">
<option value="">Choose Month</option>
</select>
The js 'months' is just an array from 0-11 of the month numbers.
To clarify
The initial display in the dropdown select for months is this:
0
1
2
3
4
5
6
7
8
9
10
11
With the filter I wrote in there, this is what displays:
December
December
December
December
December
December
December
December
December
December
December
when angular filter date receives an integer as in your case, it is considered to be a timestamp (milliseconds), milliseconds from 0 to 11 belongs to the same month, that is why your result is 12 same month names.
To solve it create an array of timestamps for 12 month of the current year:
let d = new Date();
// create array of timestamps for 12 month of thr current year
$scope.months = Array.apply(null, Array(12)).map((v, k) => d.setMonth(k));
now in HTML:
<select ng-model="month"
ng-options="month as timestamp | date: 'MMMM' for (month, timestamp) in months"
ng-change="updateMonth()">
<option value="">Choose Month</option>
</select>
plunker: http://plnkr.co/edit/dhAoiRUHzLPlskh1iwKq?p=preview
May be it will be useful for someone, my decision:
<select (change)="onChange($event)">
<option *ngFor="let i of [].constructor(12); let j = index;" value="{{j}}"
[selected]="j+1 == currentMonth.numberOfMonth">
{{currentMonth.year + '-' + j==0?12:j+1 + '-' + 01|date:'MMMM'}}
</option>
</select>
How can I disable a select option field if day is a Saturday?
I have one input and one select.
<input type="text" name="date">11/15/2016
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>
Here is my javascript:
if(???) {
$("option[value='boat']").attr("disabled", "disabled");
}
What should i put in the if statement if the input date is a Saturday?
var today = new Date('2016-11-15');
if(today.getDay() == 6) {//6 is saturday
...// disable the option value
}
Convert it to a date object using selected value.
var selectedDate = new Date("11/15/2016");
// Use the get day method that will give you the day of the week.
if(selecteddate.getDay() === 6) {
// your code
}
You can use:
Date.prototype.getUTCDay()
The getUTCDay() method returns the day of the week in the specified
date according to universal time, where 0 represents Sunday.
Date Instance new Date(dateString)
Creates a JavaScript Date instance that represents a single moment
in time. Date objects are based on a time value that is the number of
milliseconds since 1 January, 1970 UTC.
prop() instead of attr() when dealing with boolean properties.
var $dateInput = $("#dateInput"),
$option = $("option[value='boat']");
$dateInput.on("change", function() {
var date = new Date($dateInput.val());
if (date.getUTCDay() === 6) {
$option.prop("disabled", true);
} else {
$option.prop("disabled", false);
}
console.log(date);
console.log(date.getUTCDay());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="date" name="date" id="dateInput">
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>
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.
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