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.
Related
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.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want 2 textboxs where I can insert checkin & checkout date. Checkin date should be current or future date and checkout date should be greater then selected checkin date
Its simple using default datepicker plugins of JQuery. Code in jsfiddle contains 2 text box one for checkin and another for checkout.
$( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});
Hit Me !! For code..
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtCheckin").datepicker({
dateFormat: "dd-M-yy",
onSelect: function (date) {
var date2 = $('#txtCheckin').datepicker('getDate');
date2.setDate(date2.getDate());
$('#txtCheckout').datepicker('setDate', date2);
//sets minDate to dateofbirth date + 1
$('#txtCheckout').datepicker('option', 'minDate', date2);
}
});
$('#txtCheckout').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#txtCheckin').datepicker('getDate');
console.log(dt1);
var dt2 = $('#txtCheckout').datepicker('getDate');
if (dt2 <= dt1) {
var minDate = $('#txtCheckout').datepicker('option', 'minDate');
$('#txtCheckout').datepicker('setDate', minDate);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="txtCheckin" />
<input type="text" id="txtCheckout" />
</body>
</html>
Src: http://jsbin.com/seduseqici/edit?html,output
Include jquery & jquery ui and try this.
HTML
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Inside script tag, try this.
<script>
$(function () {
var dateFormat = "mm/dd/yy",
from = $("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
</script>
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>
Im trying to pass a user selected date using Pikaday into a variable to be processed in a form using the following javascript, but my page is returning "Invalid Date".
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
field.value = moment(picker.toString()).format("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
Can anyone see what I'm doing wrong here?
You put a new option "format" and change "onSelect":
Example
<html>
<head>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.js"></script>
</head>
<body>
<div>
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
</div>
<script>
var picker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
format:'MM/DD/YY',
minDate: moment().add({days: 20}).toDate(),
disableDayFn: function(date){// Disable Monday
return date.getDay() === 0 || date.getDay() === 6;
},
onSelect: function(date) {
this._o.field.value =this.getMoment().format("MM/DD/YY");
document.getElementById('datepicker2').value = picker.toString("MM/DD/YY");
}
});
var selecteddate = moment(picker.toString()).format("MM/DD/YY");
</script>
</body>
</html>
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