I have a Jquery datepicker for a webapplication, my question is: I want to highlight 2 days at the same time when needed. This is only for the weekend days
When I select Saturday, Sunday must be highlighted (adding a class named: "ui-state-active") too and for Sunday the same, when Sunday selected, Saturday must be highlighted too.
beforeShowDay: function(d) {
var selecteddate = $( ".datepicker" ).datepicker( "getDate" );
var day = selecteddate.getDay();
if (day == 6) { // day 6 = saturday
// Now saturday must get the class highlight
return [true, 'highlight'];
}
else if (day == 0){ // day 0 = sunday
// Now sunday must get the class highlight
return[true, 'highlight'];
}
}
Regards
Dennis
You need to implement the beforeShowDay event for the datepicker:
The function takes a date as a parameter and must return an array with
[0] equal to true/false indicating whether or not this date is
selectable, [1] equal to a CSS class name(s) or '' for the default
presentation, and [2] an optional popup tooltip for this date. It is
called for each day in the datepicker before it is displayed.
So you need to do something like:
$("#datepicker").datepicker({
beforeShowDay: function(d) {
//check if it's Sunday then highlight Saturday and vice versa.
}
});
Related
I'm working on a booking system for a client, I managed to disable sundays & mondays (days she is not open) I'm trying to tidy it up a bit and block out days that have already past.
I have the function written to block out sundays & mondays but i'm trying to integrate the block past dates into it as well. I tried adding it into the function I have but I can't seem to get it to work. (I am aware that the first 2 lines are commented out) If I leave both of them in, it only blocks out the prior dates but doesn't block out Sun & Mon
<script>
// set minDate to 0 for today's date
// $('#datepicker').datepicker({ minDate: 0 });
$(document).ready(function() {
$('#datepicker').datepicker({
beforeShowDay: function(date) {
// 0 - Sunday, 1 - Monday
return [date.getDay() == 0 || date.getDay() == 1 ? false : true];
}
});
});
</script>
I would like to get the block prior dates & block sun & mon working on this in one function is this possible?
Try using minDate
$('#datepicker').datepicker({
minDate: '0d',
beforeShowDay: function(date) {
// 0 - Sunday, 1 - Monday
return [date.getDay() == 0 || date.getDay() == 1 ? false : true];
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input id="datepicker"/>
I am trying to restrict jquery datepicker values. So the the from date can not exceed the to date and vice versa.
Demo https://jsfiddle.net/DTcHh/21594/
I've tried multiple instances of this but can not seem to get it to work. Is it because I am using the UK date format?
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#from_date').datepicker({
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
var max = new Date(min.getTime());
max.setMonth(max.getDay() + 1); // Add one month
$('#to_date').datepicker('option', {minDate: min, maxDate: max});
}
});
$('#to_date').datepicker({
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Selected date or null if none
$('#from_date').datepicker('option', {maxDate: max});
}
});
As i'm new to JavaScript i'm keen to know exactly why my code doesn't work, so i can learn from this.
You cannot initialize date picker on same element twice. First, you called the date picker on element with its class; then with its ID.
Try to move the date format to date picker default function.
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy'
});
Or, you need to set dateFormat every time you initialize a date picker element.
i am using jquery datetime picker for getting date and time using
$(document).ready(function() {
$('#pickup_date').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
but i need to enable 3 weeks from the current date only.How to solve this.thanks in advance
<script>
function DisableWeekDays(date) {
var weekenddate = $.datepicker.noWeekends(date);
// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element
var disableweek = [!weekenddate[0]];
return disableweek;
}
$(function() {
$( "#datepicker" ).datetimepicker({
beforeShowDay: DisableWeekDays
});
});
</script>
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:0, //Today You can also '+1970/01/21' or '-1970/01/21' both ended up meaning -0 or +0
maxDate:'+1970/01/21' //3*7 days from today.
});
use minDate and maxDate
0 means 1970/01/01 which is start time of Unix time.You can plus/minus the String Date to set range of selectable dates.
The case You want to set the range to be yesterday to tomorrow it'll be
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:'-1970/01/02', //Yesterday(plus one day from the 0 '1970/01/01')
maxDate:'+1970/01/02' //Tomorrow(minus one day from the 0 '1970/01/01')
});
http://xdsoft.net/jqplugins/datetimepicker/
The above answer is a good one, but if you want to set the date dynamically (based on the current date).
$(function () {
var currentDate = new Date();
var date = currentDate.toDateString();
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: date
});
});
Get the current date into a variable
Convert the date to a string
Pass the string to minDate
Or
$(function () {
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment()
});
});
Using JSMoment and pass moment.
I use JQuery-Ui Datepicker like in the following way:
$(".dateElement").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1970:2013"
});
In the above example the months, year and range are fix. Assume you want the user to insert his birthday. How can I set the lates possible month to the current month and the latest possible year to the current year?
What I want is to ensure that the user cannot insert a date that is in the future. Howcan I do that=
This will limit a datepicker to the current month and year:
var currentDate = new Date();
$(".dateElement").datepicker({
maxDate: new Date(currentDate.getFullYear(),
currentDate.getMonth() + 1,
-1) // 1st day of next month minus 1 day
});
However, if you want to limit it to no later than the current date (so days after today in the current month do not apply), you can just do this:
$(".dateElement").datepicker({
maxDate: 0 // 0 days from today
});
API docs: http://api.jqueryui.com/datepicker/#option-maxDate
maxDate: 0
jqueryui.com/datepicker/#min-max
I have a mootools datepicker (Arian / monkeyphysics) with 2 date input fields.
I want to set the date of the 2nd field one day after the first one.
So far I have:
window.addEvent("domready", function(e){
new DatePicker('#arrival_date', { positionOffset: { x: -3, y: 5 }});
new DatePicker('#departure_date', { positionOffset: { x: -3, y: 5 },onShow: function(){test();}
});
function test(){
firstvalue = Date.parse($('arrival_date').value);
newvalue = firstvalue.increment(); //ad 1 day to first input date
console.log(newvalue); // Logs ok:Fri Jan 16 1970 22:24:11 ...
$('arrival_date').set('value', newvalue ); //doesn't work
$$('#departure_date').attach('#arrival_date'); //doesn't work
$$('#departure_date').select(newvalue ); //doesn't work
}
How to do? (set the date of the 2nd field one day after the first one.)
That version of DatePicker uses hided inputs. So what you see is not what your input has as value, it has a unix datestamp.
If you noticed the Date.parse($('arrival_date').value); was in the 70's, that's because javascript uses miliseconds and unix time is in seconds. To get the "real" day from the $('arrival_date').value you need to multiply by 1000. But you actually dont need that.
To make the second DatePicker get the day from the first you can use this:
onSelect: function (){
var depDate = $('departure_date');
if (depDate.value == ""){
depDate.value = $('arrival_date').value + 86400;
}
}
This will add one day to the first datepicker date if the second is empty. The thing is that you will not see the change until the you open the datepicker, so if you change the value programatically the user will not see. Which means that without the if, in case the user changes the first input again, you loose the second date and user doesn't notice, leading to frustration/bugs.