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.
Related
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 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)
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
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.