We Keep Coding

jQuery DatePicker restrict dates

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.

Jquery Datetimepicker disable dates

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.

jQuery Datepick (Keith Wood) highlight defaultDate with a CSS-class

I am using the inline version of Keith Woods jquery datepick plugin.
The default value for the picker is set like this:
var dpInputField = $('input#datepicker-value');
var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00
$('#datepicker').datepick({
dateFormat: $.datepick.TIMESTAMP,
monthsToShow: 2,
changeMonth: false,
altField: '#datepicker-value',
onDate: showDayAndMonth,
defaultDate: defaultDate,
}, $.extend($.datepick.regional[window.language]));
Theres a form submit after selecting a date. If I debug the defaultDate its correct! Just a CSS-class is missing somehow.

Solved it. I am using the onShow: event to call a function which is selecting the HTML object by its class.
for example: class="dp1403344800000", as theres the timestamp as part of the css class, it was no problem to .addClass(datepicker-selected)

JQuery-UI Datepicker Bound Lates possible Date to Now?

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

Jquery Date picker is Selecting today and default date given

I am using Jquery date picker for selecting a date, and I'd like to be able to default the selection to a given date.
Here's my code:
var SelectDate=new Date(2013, 06,25 , 0, 0, 0, 0) ;
$("#OnwardTravelDate").datepicker({
numberOfMonths: 2,
dateFormat: 'dd/mm/yy',
minDate: datePickMinDate_DT,
maxDate: datePickMaxDate_DT,
defaultDate: SelectDate
});
But the date selector control highlights both today's date and the date 'selectDate' . I want only 'selectDate' as highlighted

removeClass("ui-state-highlight"); should fix your problem.
but if you just want the highlight of today never show again, you may get the datepicker's source (jquery.ui.datepicker.js) and find this line to remove:
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
then compile it to use.

Datepicker assigns different classes to "today" and "selected day":
today - ui-state-highlight
selected day - ui-state-active
You can either remove or override styling of ".ui-datepicker .ui-state-highlight" or remove the class:
$("#OnwardTravelDate a.ui-state-highlight").removeClass("ui-state-highlight");

What about setting the value of #OnwardTravelDate in html or jquery?
HTML:
<input type="text" id="OnwardTravelDate" value="25/06/2013" />
jQuery:
$("#OnwardTravelDate").val("25/06/2013"); // Before datepicker code
Then you don't need your defaultDate: SelectDate at all :)
Hope that helps.
Edit: (more info)
You could also try the setDate method:
$("#OnwardTravelDate").datepicker("setDate", SelectDate); // After datepicker code
Edit: jsfidle
This JS fidle seems to work for me: jsfiddle
Maybe the styling on your theme makes it look like it's selected?

EDIT1: From here I found just a fix, but I'm not able to handle with your code.
$( "#datepicker" ).datepicker({
beforeShow: function(input, inst) {
window.setTimeout(function(){
$(inst.dpDiv).find('.ui-state-highlight.ui-state-hover').removeClass('ui-state-highlight ui-state-hover')
},0)
},
});
Check this JSFiddle and if possible update it with your code you trying.
EDIT2: By overriding the default css .ui-datepicker-today and a.ui-state-highlight of with the below one.
.ui-datepicker-today a.ui-state-highlight {
border-color: #d3d3d3;
background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
color: #555555;
}
Check out this JSFiddle