I have code to disable specific dates on jquery datepicker. code runs fine on my local environment but not working on GoDaddy windows hosting
var disableddates = result; //result is array of dates ["1/7/2018","1/8/2018","1/9/2018"]
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay : DisableSpecificDates
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay : DisableSpecificDates
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
console.log(string); //this string return with leading zero 01/07/2018...
return [disableddates.indexOf(string) == -1];
}
This code run fine on local but when making it live it is not disabling specific dates in jQuery datepicker.
You do not need to format the date if it's already in a date format. For example, if result contains an array date like "1/7/2018", you can create a Date object from this:
var newDate = new Date(result[0]);
With this in mind, you can easily make and manipulate a Date. DatePicker passes a Date object to the function too. Here is a solution you might try:
$(function() {
var disableddates = ["1/7/2018", "1/8/2018", "1/9/2018"];
$("#txtFromdate, #txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: "m/d/yy"
});
$("#txtFromdate").change(function() {
$("#txtTodate").datepicker("option", "minDate", $(this).val());
});
function DisableSpecificDates(date) {
var result = [true];
$.each(disableddates, function(k, v) {
var exclude = new Date(v).toString();
var today = date.toString();
if (exclude == today) {
console.log("Match", exclude, today);
result = [false];
}
});
return result;
}
});
label {
width: 60px;
}
input {
width: 10em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="txtFromdate">From:</label>
<input type="text" id="txtFromdate" />
<label for="txtTodate">To:</label>
<input type="text" id="txtTodate" />
My Testing done here: https://jsfiddle.net/95t81vzq/3/
Hope that helps.
Related
I am trying to disable future hours within today using disabledTimeIntervals but it doesn't seem to work.
What I need to do is disable future hours in timepicker for today only, because disabling dates I can do with maxDate.
<input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">
$('#dp').datetimepicker({
maxDate: '0',
disabledTimeIntervals: [[moment(), moment().hour(24).minutes(0).seconds(0)]],
format: 'm/d/Y H:i A',
timepicker: true,
});
JSFIDDLE: https://jsfiddle.net/3oxmccjq/1/
You can use maxTime option and function onChangeDateTime to set the minTime according to the selected date.
The comparison between dates is up to you :-)
var today = new Date();
var options = {
maxDate: new Date(),
maxTime: new Date(),
disabledTimeIntervals: [
[moment(), moment().hour(24).minutes(0).seconds(0)]
],
format: 'm/d/Y H:i A',
timepicker: true,
onChangeDateTime: function(date) {
// Here you need to compare date! this is up to you :-)
if (date.getDate() === today.getDate()) {
this.setOptions({maxTime: new Date()});
} else {
this.setOptions({maxTime: false});
}
}
};
$('#dp').datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" rel="stylesheet" />
<input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">
The datetimepicker you are using in your jsfiddle have no options as disabledTimeIntervals and that's why it is not working. You should use disabledMinTime & disabledMaxTime
As for the solution I am guessing you want to disable all future hours for today but still want to allow future dates with all the possible time. Here is a jsfiddle for same :-
https://jsfiddle.net/sahilbatla/zpzL2po3/
Code looks like this :-
var today = new Date();
var todayEndOfDay = new Date().setHours(23,59,59,999);
$('#dp').datetimepicker({
disabledMinTime: today,
disabledMaxTime: todayEndOfDay,
format: 'm/d/Y H:i A',
timepicker: true,
onChangeDateTime: function(date) {
if (date.getDate() !== today.getDate()) {
this.setOptions({disabledMinTime: false, disabledMaxTime: false})
} else {
this.setOptions({disabledMinTime: today, disabledMaxTime: todayEndOfDay})
}
}
});
I have jQuery Datepicker with unavailable dates:
var disabledDates = ["23.05.2017", "24.05.2017"];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
The only way i found to update disabledDates was to destroy datepicker, update unavailable dates and re-init.
// Destroy
$("#datepicker").datepicker("destroy");
// Update unavailable times
disabledDates = ["23.05.2017", "24.05.2017", "25.05.2017", "26.05.2017"];
// Re-init
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disabledDates.indexOf(string) == -1];
}
});
Is there a other/better way to do it?
You don't need to destroy it, simply change the beforeShowDay property, see following please:
var disableddates = ["20-05-2017", "21-05-2017"];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
$(function() {
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
});
$("#btn1").click(function(){
disableddates = ["01-05-2017", "02-05-2017"];
$("#datepicker").datepicker({
beforeShowDay: DisableSpecificDates
});
console.log("Disabled dates changed");
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
<input type="button" id="btn1" value="Change dates">
I hope it helps you, bye.
This question already has answers here:
Validate that end date is greater than start date with jQuery
(16 answers)
Validate end_date is after start_date [duplicate]
(1 answer)
Closed 5 years ago.
I've an input field where users can insert a date between a date range.
So I added a new method on JQuery validator object:
$.validator.addMethod("dateRange", function(value, element, from, to){
try {
var date = new Date(value);
if(date >= from && date <= to)
return true;
} catch(e) {
}
return false;
}
Then I added a new class rules:
$.validator.addClassRules({
myDateFieldRangeValidate: {
dateRange: {fromDate, toDate}
}
});
And finally I added the class to the input:
$("#myField").addClass("myDateFieldRangeValidate");
So, how can I pass the two dates to the validation function?
UPDATE: Added a code snippet
$.validator.addMethod("dateRange", function(value, element, from, to){
try {
var date = new Date(value);
if(date >= from && date <= to)
return true;
} catch(e) {
}
return false;
});
var fromDate = new Date("2017-02-01");
var toDate = new Date("2017-12-31");
$.validator.addClassRules({
myDateFieldRangeValidate: {
dateRange: {fromDate, toDate}
}
});
$("#myField").addClass("myDateFieldRangeValidate");
$("#btnValidate").click(function(){
$("#frm1").validate();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form id="frm1">
Date <input type="text" id="myField">
<input type="button" id="btnValidate" value="Validate">
</form>
Thanks to Arun P Johny, I post here his fiddle:
$.validator.addMethod("dateRange", function(value, element, params) {
try {
var date = new Date(value);
if (date >= params.from && date <= params.to) {
return true;
}
} catch (e) {}
return false;
}, 'message');
var fromDate = new Date("2017-02-01");
var toDate = new Date("2017-12-31");
$.validator.addClassRules({
myDateFieldRangeValidate: {
dateRange: {
from: fromDate,
to: toDate
}
}
});
$("#myField").addClass("myDateFieldRangeValidate");
$("#frm1").validate();
$("#btnValidate").click(function() {
console.log($("#frm1").valid())
});
jQuery(function($) {
var validator = $('#myform').validate({
rules: {},
messages: {}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<form id="frm1">
Date
<input type="text" id="myField" value="16 Feb 2017">
<input type="button" id="btnValidate" value="Validate">
</form>
Here is a way to have jQuery validator with the feature to give the start date and the end date
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script>
$( document ).ready(function() {
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
var startDate= new Date(jQuery(element)[0].attributes['data-rule-startDate'].value);
var endDate= new Date(jQuery(element)[0].attributes['data-rule-endDate'].value);
var d = new Date(value);
console.log(d)
return (d.getTime() <= endDate.getTime() && d.getTime() >= startDate.getTime())
}, "Please enter a valid date."
);
$('#frm1').validate();
});
</script>
<html>
<form id="frm1">
Date <input type="text" id="myField" name="myField" data-rule-optdate="true" data-rule-startDate="2017-12-12" data-rule-endDate="2018-12-12">
</form>
</html>
I'm trying to disable few date range arrays using BeforeShowDay fucntion in Bootstrap-Datepicker.
I have such code:
var dateArray2 = getDates(new Date("2016-12-20 14:57:28"), (new Date("2016-12-22 14:57:28")).addDays(0));
var dateArray3 = getDates(new Date("2016-12-22 14:57:28"), (new Date("2016-12-25 14:57:28")).addDays(0));
var dateArr = new Array();
dateArr.push(dateArray2);
dateArr.push(dateArray3);
//Datepicker init
$('.date').datepicker({
format: 'dd-mm-yyyy',
startDate: date,
autoclose: true,
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
$.each(dateArr,function (key, value) {
return value.indexOf(string) == -1;
});
}
});
But looping the array with dates not working and I have no dates disabled.
How can I disable 2,3 or more arrays with dates?
Thanks.
Instead of jQuery.each you may use jQuery.inArray.
In order to convert the date parameter to the format 'yy-mm-dd' you can use moment.js.
The snippet:
var date = new Date();
var forbiddeneDates = ['16-12-18','16-12-19','16-12-20'];
$('.date').datepicker({
format: 'dd-mm-yyyy',
startDate: date,
autoclose: true,
beforeShowDay: function (date) {
var dateStr = moment(date).format('YY-MM-DD');
return $.inArray(dateStr,forbiddeneDates) == -1;
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<div class="input-group date">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
I want to disable date_dis array from datepicker. I have tried following code.but when i press on txtdate it is showing whole the dates without disable.
<script language="javascript">
var date_dis = ["02-04-2016","03-04-2016","04-04-2016","05-04-2016","06-04-2016","07-04-2016","08-04-2016","09-04-2016","10-04-2016","11-04-2016","12-04-2016","14-04-2016","15-04-2016","17-04-2016","18-04-2016","19-04-2016","20-04-2016","21-04-2016","22-04-2016","23-04-2016","24-04-2016","25-04-2016","26-04-2016","27-04-2016","28-04-2016","29-04-2016","30-04-2016"];
$(document).ready(function () {
$('#txtdate').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('d-m-Y', date);
return [ date_dis.indexOf(string) == -1 ]
}
});
});
</script>
Use this dd-mm-yy
<script language="javascript">
var date_dis = ["02-04-2016","03-04-2016","04-04-2016","05-04-2016","06-04-2016","07-04-2016","08-04-2016","09-04-2016","10-04-2016","11-04-2016","12-04-2016","14-04-2016","15-04-2016","17-04-2016","18-04-2016","19-04-2016","20-04-2016","21-04-2016","22-04-2016","23-04-2016","24-04-2016","25-04-2016","26-04-2016","27-04-2016","28-04-2016","29-04-2016","30-04-2016"];
$(document).ready(function () {
$('#txtdate').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ date_dis.indexOf(string) == -1 ]
}
});
});
</script>
DEMO