I would like to create a landing page where I gradually show our winnings for the advent calendar. For this I have prepared images, which will then be revealed in a DIV.
So until 01 December you will not see any pictures.
On 01 December one sees then picture 01
On 02. December one sees picture 01 & picture 02
and so on
I have found the following code so far. Unfortunately only the DIV with today's date is shown to me. What do I have to do so that the images stay with?
Here is my fiddle: https://jsfiddle.net/bkoenig/m2pzqjrs/14/
<div class="imageClass image1">
1
</div>
<div class="imageClass image2">
2
</div>
<div class="imageClass image3">
3
</div>
var now = new Date().toDateString();
var october1 = new Date("November 22, 2022").toDateString();
var october2 = new Date("November 23, 2022").toDateString();
var october3 = new Date("November 24, 2022").toDateString();
if(now != october1) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image1').hide();
}
if(now != october2) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image2').hide();
}
if(now != october3) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image3').hide();
}
.imageClass {
display: ;
}
I have an example for your problem, hope it helps you
(function () {
const now = new Date();
$("#imageDate img").each(function () {
const el = $(this);
const date = new Date(el.attr('data-date'));
console.log(now, date)
if (date <= now) {
el.show();
}
});
})();
#imageDate img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDate">
<img src="" data-date="November 22 2022" alt="22/11/2022" />
<img src="" data-date="November 23 2022" alt="23/11/2022" />
<img src="" data-date="November 24 2022" alt="24/11/2022" />
</div>
I have a datepicker input and a timepicker input that I'd like to use to schedule a person for appointments.
When the user clicks on the input to open the datepicker menu, I'd like to grey out specific datetimes. I've got a php function that returns this array of datetimes in in 'Y-m-d H:i:s' string format. But I dont' know how to use that function's return value to give the javascript function what it needs to disable a range of dates in datepicker.
In the onSelect event of my datepicker, I want it to enable/disable time options in my timepicker according to which timeslots are booked for that day. But I don't know how.
Datepicker uses beforeshowDay: to disable booked dates
user selects date from datepicker
Datepicker enables/disables times in the timepicker
I did find out how to disable timeranges in the timepicker Here. the code example is this:
$('input.timepicker').timepicker({
'disableTimeRanges': [
['1am', '2am'],
['3am', '4:01am']
]
});
But that's how I'd disable the time ranges from within the scope of the timepicker. I don't know how to disable them from BeforeShowDay in datepicker?
<script type="text/javascript">
$(document).ready(function(){
$( "#datepickerListAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{ // need to disable days other than tuesday and wednesday too.
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
},
onSelect : function(){
should disable/enable timepicker times from here?
}
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
This is the function that gives the datetimes, in case it helps to know.
function get_next_open_appointments($numAppointments, $timeSlotToExclude = "")
{
global $db;
$whereCondition = "WHERE FirstName = :null ";
if ($timeSlotToExclude != "")
{
$whereCondition .= "AND AppointmentTime != '$timeSlotToExclude' ";
}
$query = "SELECT DISTINCT AppointmentTime FROM appointments
$whereCondition
ORDER BY AppointmentTime ASC LIMIT $numAppointments";
$statement = $db->prepare($query);
$statement->bindValue(':null', "");
$statement->execute();
$datesArray = array();
while ($row = $statement->fetch())
{
array_push($datesArray, $row['AppointmentTime']);
}
$statement->closeCursor();
return $datesArray;
}
UPDATE:
Hugo De Carmo pointed me in the right direction and I got the dates to disable/enable appropriately. However, I don't know how to use the datetimes that I pulled in code below to disable/enable times in the timepicker.
Here is the new code:
<script type="text/javascript">
$(document).ready(function(){
// uses php to get open appointments, and put them in a javascript array
<?php $datetime_openings = get_next_open_appointments(200);
$date_openings = array();
foreach ($datetime_openings as $dt)
{
array_push($date_openings, substr($dt,0,10)); // just the date part
}
$json_date_openings = json_encode($date_openings);
echo "var arr_Openings = ". $json_date_openings . ";\n";
?>
$( "#datepickerOpenAppointments" ).datepicker(
{
minDate:'0',
beforeShowDay:
function(dt)
{
var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
var bFound = (arr_Openings.indexOf(string) != -1);
return [ bFound ];
},
onSelect : function(){
// Should disable/enable time ranges here?
});
$('input.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
Try this,
sorry i didn't use beforeshowDay
select date 2017-7-14 and 2017-7-17 and see
var disabledDateTime = {
'2017-7-14':[
['2:30am','3:00am'],
['6:30am','9:00am']
],
'2017-7-17':[
['1:00am','3:00am'],
['5:30am','7:00am'],
['11:30am','2:00pm']
]
};
$(function() {
$('#pickTime').timepicker();
$('#pickDate').datepicker({
'format': 'yyyy-m-d',
'autoclose': true
}).on('changeDate',function(e){
var ts = new Date(e.date);
var m = ts.getMonth()+1;
var dt = ts.getFullYear() + '-' + m + '-' + ts.getDate();
var opt = {'disableTimeRanges': []}
if(typeof(disabledDateTime[dt])!='undefined'){
$('#pickTime').timepicker('setTime', '');
opt = {'disableTimeRanges': disabledDateTime[dt]}
}
$('#pickTime').timepicker('option',opt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<input id="pickDate" type="text" class="date" />
<input id="pickTime" type="text" class="time" />
Someone already answered this question here.
Anyway, the following code should give you an insight on how to solve the problem.
// supose your script return a json similar to the following
{
"data": [
// ...
"17-07-11"
]
}
$(function() {
$.getJSON("/path/to/script", function(response){
$('#datepickerListAppointments').datepicker({
beforeShowDay: function(dt) {
var config = [];
config[1] = 'class';
if ((dt.getDay() === 2) || (dt.getDay() === 3)) {
config[0] = false;
return config;
}
var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
config[0] = (response.data.indexOf(string) === -1);
return config;
}
});
});
});
I've assumed that you're exchanging data with the server using some kind of API, hence the use of getJSON, if you want to handle server errors then I suggest you to use ajax combining with Promise.
Edit 1
You can extract everything from your date using the class DateTime, here is a snippet:
$openings = array();
$date = DateTime::createFromFormat("y/m/d H:i", "17/07/15 08:30");
if (!isset($openings[$date->format("y-m-d")])) {
$openings[$date->format("y-m-d")] = array();
}
$openings[$date->format("y-m-d")][] = array(
"hour" => $date->format("Ha"),
"minute" => $date->format("i")
);
/* result
array(1) {
["17-07-15"]=>
array(1) {
[0]=>
array(2) {
["hour"]=>
string(4) "08am"
["minute"]=>
string(2) "30"
}
}
}
*/
Then you can disable the time in timepicker based on date, you'll probably need to register a callback function in your datepicker to update the timepicker based on the chosen date or you'll have to override the timepicker with new settings.
Yes, you can dinamically update timepicker disableTimeRanges inside the onSelect function using the option method of the timepicker component.
I'm supposing that:
You are using jQuery UI datepicker (since you didn't tag your question with twitter-bootstrap and bootstrap-datepicker has no minDate option)
You are using the first version of get_next_open_appointments that returns an array of datetimes (like ['2017-07-25 09:30:00', ...] see fakeDisabledTimes in the snippet)
I'm using momentjs in order to simplify dates managment. In the following code, I've used moment parsing functions (moment(String) and moment(String, String)), isSame, add and format. Note that moment tokens are different from PHP tokens.
Here a complete working sample:
var fakeDisabledTimes = [
'2017-07-25 09:30:00', '2017-07-26 10:00:00',
'2017-08-01 09:00:00', '2017-08-02 09:30:00',
'2017-08-08 10:30:00', '2017-08-09 10:00:00',
'2017-07-15 09:30:00', '2017-07-16 10:00:00'
];
$(document).ready(function(){
$( "#datepickerListAppointments" ).datepicker({
minDate:'0',
beforeShowDay:
function(dt){
// need to disable days other than tuesday and wednesday too.
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
},
onSelect : function(dateText){
//should disable/enable timepicker times from here!
// parse selected date into moment object
var selDate = moment(dateText, 'MM/DD/YYYY');
// init array of disabled times
var disabledTimes = [];
// for each appoinment returned by the server
for(var i=0; i<fakeDisabledTimes.length; i++){
// parse appoinment datetime into moment object
var m = moment(fakeDisabledTimes[i]);
// check if appointment is in the selected day
if( selDate.isSame(m, 'day') ){
// create a 30 minutes range of disabled time
var entry = [
m.format('h:mm a'),
m.clone().add(30, 'm').format('h:mm a')
];
// add the range to disabled times array
disabledTimes.push(entry);
}
}
// dinamically update disableTimeRanges option
$('input.timepicker').timepicker('option', 'disableTimeRanges', disabledTimes);
}
});
$('input.timepicker').timepicker({
timeFormat: 'h:i a',
interval: 90,
minTime: '9',
maxTime: '10:30am',
defaultTime: '9',
startTime: '9:00',
dynamic: false,
dropdown: true,
scrollbar: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css" rel="stylesheet"/>
<input id="datepickerListAppointments" type="text">
<input class="timepicker" type="text">
main.html
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<datetimepicker data-ng-model="dateRangeStart" data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed' }" data-on-set-time="startDateOnSetTime()" data-before-render="startDateBeforeRender($dates)"></datetimepicker>
</ul>
I am using angular directive https://github.com/dalelotts/angular-bootstrap-datetimepicker , if you select date and time with this module it will display Thu Mar 23 2017 15:46:38 GMT-0400 (Eastern Daylight Time) so here is it possible to get rid of 46:38 GMT-0400 (Eastern Daylight Time) this part i just want hours selection ?
Ctrl.js
$scope.dateRangeStart = new Date();
$scope.dateRangeStart.setDate($scope.dateRangeStart.getDate() - 1);
$scope.dateRangeEnd = new Date();
$scope.endDateBeforeRender = endDateBeforeRender
$scope.endDateOnSetTime = endDateOnSetTime
$scope.startDateBeforeRender = startDateBeforeRender
$scope.startDateOnSetTime = startDateOnSetTime
function startDateOnSetTime () {
$scope.$broadcast('start-date-changed');
}
function endDateOnSetTime () {
$scope.$broadcast('end-date-changed');
}
function startDateBeforeRender ($dates) {
if ($scope.dateRangeEnd) {
var activeDate = moment($scope.dateRangeEnd);
$dates.filter(function (date) {
$scope.searchObj.endDate = activeDate._i;
// console.log(activeDate);
return date.localDateValue() >= activeDate.valueOf()
}).forEach(function (date) {
date.selectable = false;
// console.log(date);
})
}
}
You need to set the minView option in the configuration per the docs. It's the lowest denomination of time the date picker should show. Set that to hours or days, however you want it.
Example from above:
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed', minView: 'hour' }"
Joshua Wilborn is correct, set the configuration:
data-datetimepicker-config="{ dropdownSelector: '#dropdownStart', renderOn: 'end-date-changed', minView: 'hour' }"
Then you can use the angular-date-time-input directive to format the display of a date in an input box or allow users to enter a valid date with the keyboard.
I have a script which creates a lot of divs with the a data-date attribute and has a time format of Tue Aug 16 2016 12:27:21 GMT+0100 (BST)
An example set could be:
<div class="socialBox" data-date="Tue Aug 10 2016 12:30:21 GMT+0100 (BST)" data-type="twitter">
<div class="socialBox" data-date="Tue Aug 14 2016 12:10:21 GMT+0100 (BST)" data-type="facebook">
<div class="socialBox" data-date="Tue Aug 13 2016 15:27:21 GMT+0100 (BST)" data-type="youtube">
<div class="socialBox" data-date="Tue Aug 03 2016 18:27:21 GMT+0100 (BST)" data-type="instagram">
The divs are appended to a blank div from a variety of different functions and then I run the JS to sort the divs and append it to the original blank div again but I can't seem to get it to work.
Here is the script
loadTwitter(twitter);
loadFacebook(facebook);
loadYoutube(youtube);
loadInstagram(instagram);
// DOESN'T WORK YET (THE BELOW)
var board = $("#social-board");
var boards = board.children('.socialBox');
boards.sort(function(a, b) {
var an = $(a).data("date").getTime();
var bn = $(b).data("date").getTime();
if(an > bn) {
return 1;
}
if(an < bn) {
return -1;
}
return 0;
});
boards.detach().appendTo(board);
Could anyone help me out? I'm not sure if its the appending to the div element or the JS sort function itself.
You can do this by:
Detaching them up front and then using .get to get a real array instead of a jQuery object.
Sorting them (which can be a lot simpler)
Appending that array back to #social-board
so:
var boards = board.children('.socialBox').detach().get();
// --------------------------------------^^^^^^^^^^^^^^^
// A bit shorter :-)
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards); // <== switched this to append
Live example:
// Wait a sec so we can see the old order...
setTimeout(function() {
// Now sort them
var board = $("#social-board");
var boards = board.children('.socialBox').detach().get();
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards);
}, 600);
<div id="social-board">
<div class="socialBox" data-date="2016-08-10T11:30:21.000Z" data-type="twitter">2016-08-10T11:30:21.000Z</div>
<div class="socialBox" data-date="2016-08-03T17:27:21.000Z" data-type="instagram">2016-08-03T17:27:21.000Z</div>
<div class="socialBox" data-date="2016-08-14T11:10:21.000Z" data-type="facebook">2016-08-14T11:10:21.000Z</div>
<div class="socialBox" data-date="2016-08-13T14:27:21.000Z" data-type="youtube">2016-08-13T14:27:21.000Z</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note: You cannot rely on the JavaScript Date object parsing dates in the string format you've used. Note the ISO format I've used in the snippet instead.
Side note: Unless you're using the features of data, you may want to use attr instead. data is not just an accessor for data-* attributes. It's both more and less than that.
Your idea is right, but your logic is slightly off in your sort function. This is the code I use to sort dates:
var reverse = false; // ascending/descending flag
var board = $("#social-board");
var boards = board.children('.socialBox');
var orderedBoards = boards.slice().sort(function (elem1, elem2) {
var value1 = new Date($(elem1).data("date")).getTime(),
value2 = new Date($(elem2).data("date")).getTime();
if (reverse) {
// descending
return -(value1 > value2) || +(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
}
// ascending
return +(value1 > value2) || -(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
});
board.empty().append(orderedBoards);
I have a solution:
HTML:
<ul class="sort-list">
<li class="sort-item" data-event-date="2018-06-30 22:00">3</li>
<li class="sort-item" data-event-date="2018-06-29 21:00">2</li>
<li class="sort-item" data-event-date="2018-06-27 22:00">1</li>
<li class="sort-item" data-event-date="2018-07-01 22:00">4</li>
<li class="sort-item" data-event-date="2018-07-02 22:00">5</li>
</ul>
<button onclick="chat_order()">
test
</button>
JS:
function chat_order() {
var container = $(".sort-list");
var items = $(".sort-item");
items.each(function() {
// Convert the string in 'data-event-date' attribute to a more
// standardized date format
var BCDate = $(this).attr("data-event-date");
/*console.log(BCDate);
var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];*/
var standartDate = new Date(BCDate).getTime();
$(this).attr("data-event-date", standartDate);
console.log(standartDate);
});
items.sort(function(a,b){
a = parseFloat($(a).attr("data-event-date"));
b = parseFloat($(b).attr("data-event-date"));
return a>b ? -1 : a<b ? 1 : 0;
}).each(function(){
container.prepend(this);
});
}
JSFIDDLE: http://jsfiddle.net/2fr0vmhu/294/
{{main.featured.date | date:'EEEE, MMMM d, yyyy'}}
//Wednesday, March 16, 2016
//But I want: WEDNESDAY, March 16, 2016
Is there any way to do this without writing my own filter?
You could use the built-in uppercase filter. All you need to do is split the date into two, like this: {{(vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy')}}
Here's an working example:
(function() {
angular
.module('myApp', [])
.controller('MainCtrl', function() {
var vm = this;
vm.myDate = new Date().getTime();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl as vm">
Current date: {{ (vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy') }}
</div>
</div>