I'm setting up a datepicker, but I only want the user to be able to select dates from a pre-determined date array I have populated. These are dates where relevant events happened. Nothing happened on the other dates outside of the array.
Below is an example array that I would have.
dateArr = ["2015-10-27", "2015-10-29", "2015-11-10", "2016-11-30", "2016-12-07", "2017-06-29", "2017-06-30", "2017-10-23", "2017-12-13", "2018-03-27", "2018-03-29", "2018-03-30", "2018-03-31", "2018-04-02", "2018-04-07", "2018-04-08", "2018-04-09"]
I've looked at other examples, but none seem to do what I'm trying to do. The array dates would be selectable, and the rest would be grayed out.
Try with below Jquery code:
HTML Code:
<div id="datepicker"></div>
Jquery Code :
jQuery(function(){
var enableDays = ["7-8-2019", "13-8-2019"];
function enableAllTheseDays(date) {
var sdate = $.datepicker.formatDate( 'd-m-yy', date)
console.log(sdate)
if($.inArray(sdate, enableDays) != -1) {
return [true];
}
return [false];
}
$('#datepicker').datepicker({dateFormat: 'dd-mm-yy', beforeShowDay: enableAllTheseDays});
});
JFiddle Code Here:
http://jsfiddle.net/qampw1n5/
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 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.
Using JS to generate a list of input fields that have the name of:
name="date_from[]"
The class, 'date_picker', is instantiated using:
$( ".date_picker" ).datepicker({ dateFormat: "dd-mm-yy" });
When a new record is generated using JS the new input field does in deed display the Date Picker but the date selected is inserted into the first field, always.
Is there any solution, or maybe an option in the date_picker to make it insert into the currently selected field?
The datepicker has a onClose event wich provide a variable with the result. You need to take it, split it, and set it to your inputs :
var $input = $('input')
$input.datepicker({
dateFormat: 'dd-mm-yy'
, onClose: function(dateText) {
for (var i = 0, date = dateText.split('-'), item; item = $input[i];) {
item.value = date[i++];
}
}
})
Here is a live example.
Right now, the End Date selection is disabled. I want to only enable this when a Start Date is selected.
if( $('#datepicker1').val().length === 0) {
$('#datepicker2').datepicker("disable");
} else {
$('#datepicker2').datepicker("enable");
}
This clearly does not work. If I insert value = 'random date' into my first input field, it works fine. I'm not too sure on how do this. Clearly not as easy as I had hoped.
My other problem, or hope, is to disable the dates including and before the first selection.
You know, pick Start Date, and every date before and said date for the next picker would be disabled. But that is a whole other problem.
You can use something like this:
var end = $('#end').datepicker();
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
$('#start').datepicker({
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
It's not really a good idea to enable the datepicker in the second field only after the first has been filled in, because the user can still add things into the second field manually, and you lose the format validation usually offered by jQuery UI datepicker. Instead, we disable the second input element directly.
See it working here: http://www.jsfiddle.net/yijiang/KwhLw/
Also note that we're using the input event here, because although it has less broad compatibility, is better than the usual methods used for keyboard event capturing. See a full discussion on this here: http://whattheheadsaid.com/tag/oninput
Just try this approach -
$('#datepicker1').datepicker({
//your other configurations.
onSelect: function(){
//enable datepicker 2 over here.
}
});
I would use the getDate method and see if it's null (nothing selected/entered), like this:
if($('#datepicker1').datepicker("getDate") === null)
For the other issue, check out the date range demo for the datepicker, it has a start/end date like you're aiming for.
Well, question is answered. For those who want to know what I have, here it is.
To change a Start Date and an End Date (A date range if you will) into an array of individual dates, I used this:
function createDateRangeArray($strDateFrom,$strDateTo) //Changes a Range of Dates to Specific Dates
{
static $aryRange = array(); //Creates an Array
$iDateFrom = mktime(1,0,0,substr($strDateFrom,5,2), substr($strDateFrom,8,2),substr($strDateFrom,0,4));
$iDateTo = mktime(1,0,0,substr($strDateTo,5,2), substr($strDateTo,8,2),substr($strDateTo,0,4));
if ($iDateTo >= $iDateFrom)
{
array_push($aryRange,date('Y-m-d',$iDateFrom)); // first entry
while ($iDateFrom<$iDateTo)
{
$iDateFrom += 86400; // add 24 hours
array_push($aryRange,date('Y-m-d',$iDateFrom));
}
}
return $aryRange; //Returns to step 1 and adds another value into the array
}
To get every date from my SQL Database and push them into a single array, this was used:
$query = "SELECT startdate, enddate FROM classdetails";
$results = mysql_query($query);
while ($arrays = mysql_fetch_array($results))
{
$aryDates = createDateRangeArray($arrays['startdate'],$arrays['enddate']);
echo "<br />";
}
So now I have managed to get every date range from an entire list of classes and made one huge array.
Now I had to use this array to actually disable the dates. Using the functions of which Yi Jiang has no generously wrote (thank you to everyone who helped me), the next step is:
$(function()
{
//To enable End Date picker only when Start Date has been chosen (And to disable all dates prior of said date)
var end = $('#enddate').datepicker( {numberOfMonths: 3, beforeShowDay: checkAvailability,});
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
//End of function
// Datepicker
$('#startdate').datepicker({
numberOfMonths: 3,
beforeShowDay: checkAvailability,
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() {$(this).toggleClass('ui-state-hover');}
);
});
//End of Function
//Disabling all dates where selected room and speaker is unavailable
var $myBadDates = new Array (<?php foreach($aryDates as $disabledate) { echo " \"$disabledate\","; } echo " 1"; ?>); //Creates the array (The echo " 1"; is merely to close the array and will not affect the outcome
function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
//End of function
The only thing in my body right now, for testing purposes, are:
<!-- Datepicker -->
<h2 class="header">Datepicker</h2>
<span>
Start Date: <input type="text" id="startdate" />
</span>
<span>
End Date: <input type="text" id="enddate" disabled="disabled" />
</span>
It's long, yes, but it works. Thank you to everyone who helped me get this working.
The edit was me changing a function to a JQuery function that exists (of which for some reason I did not use in the first place); toggleClass. Thanks for picking that out.