How do I properly markup holiday hours when a business is closed on the holiday?
Normal holiday hours markup example:
<li itemprop="openingHoursSpecification" itemscope="" itemtype="http://schema.org/OpeningHoursSpecification" class="holidayHours">
<span itemprop="validFrom" content="2014-05-26">Memorial Day Hours, Monday, May 26th: </span>
<span itemprop="validThrough" content="2014-05-26"></span>
<span itemprop="opens" content="09:00">9 am</span> - <span itemprop="closes" content="15:00">3 pm</span>
</li>
What is the schema.org or Google preferred way to show closed on a holiday?
Would this be correct?
<li itemprop="openingHoursSpecification" itemscope="" itemtype="http://schema.org/OpeningHoursSpecification" class="holidayHours">
<span itemprop="validFrom" content="2014-05-26">Memorial Day Hours, Monday, May 26th: </span>
<span itemprop="validThrough" content="2014-05-26"></span>
<span itemprop="opens" content="00:00">CLOSED<span itemprop="closes" content="00:00"></span>
</li>
This is the ld+json format, but say you are closed for Christmas, just leave the opening & closed hours blank, like I did for regular openingHours below. This test business is closed Sunday, so I just don't enter any time for it at all.
...
"telephone": "123-555-1212",
"openingHours": "Mo,Tu,We,Th 09:00-19:00, Fr 09:00-20:00, Sa 09:00-18:00",
{
"#type": "OpeningHoursSpecification",
"validFrom": "2015-12-25",
"validThrough": "2015-12-25"
},
"address": {
...
}
Don't know if things has changed since you posted this #Nathan but this is the only way I could get https://developers.google.com/structured-data/testing-tool/ to validate properly. By specifying "openingHoursSpecification" outside of the brackets.
"openingHours": "Mo,Tu,We,Th 09:00-19:00, Fr 09:00-20:00, Sa 09:00-18:00",
"openingHoursSpecification":
{
"#type": "OpeningHoursSpecification",
"validFrom": "2015-12-25",
"validThrough": "2015-12-25"
}
You could possibly handle it that way, Christopher, but you need to mark up the time down to the seconds (00:00:00) in this situation. It's because the business would open at 00:00:00 and close at 00:00:01. Or another way to do it would be simply to specify the days of the year that the business is open and leave out any mark up for the days that the business is closed.
Related
I am using bootstrap datetime picker (http://eonasdan.github.io/bootstrap-datetimepicker/) and I want to change the header of the week to a single letter like below:
S M T W T F S
Does anyone know any property to do that?
Bootstrap eonasdan-datetimepicker relies on momentjs and it uses moment to get the localized names of the days of the week (see fillDow function in the source: it uses currentDate.format('dd') to get short name of the day of the week via moment format).
Moment lets you customize localized short names using updateLocale and the weekdaysMin key as explained in the Customize -> Minimal Weekday Abbreviations section of the docs.
Here a complete working sample:
moment.updateLocale('en', {
weekdaysMin : ["S", "M", "T", "W", "T", "F", "S"]
});
$('#datetimepicker1').datetimepicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
There is an edit page where a user can, obviously, edit aspects of an event. Everything displays fine except the Date shows empty.
I am using the type="date" in my html which may be a cause, how can I get around this so that I can show the date, because when it saves it saves as null after editing the event
View:
<div class="form-group">
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= event.startDate %>">
</div>
Route:
router.get("/event/:id/edit", isLoggedIn, function(req,res){
Event.findById(req.params.id, function (err, foundEvent) {
if(err){
console.log(err);
console.log("Cannot find the event...maybe the database isnt running?")
} else {
res.render("eventEdit", {event: foundEvent});
Everything works fine but the date
Can you add some more information to the question? at the moment it looks quite unclear. like how is your server set up.
It turns out its an HTML thing, if you want to display a date you have to have it formattted as YYYY-MM-DD then it shows fine, otherwise it doenst recognize the format.
This comes into account if you use the type="date" attribute in your input
I had to edit the event date coming from mongo using momentjs and here is the line I used.
var newDate = moment(foundEvent.startDate).utc().format("YYYY-MM-DD")
res.render("eventEdit", {event: foundEvent, newDate:newDate});
The newDate is the variable being passed to the template, then I just have:
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= newDate %>">
This works.
I want to pick year firstly in datepicker and after that pick month and after that pick day.
I want to see years first.
try this:
datepickerMode: "year"
js
$scope.dateOptions = {
datepickerMode: "'year'",
formatYear: 'yy',
startingDay: 1};
html
<input type="text" class="form-control" datepicker-options="dateOptions" ng-model="dt" is-open="status.opened" />
This is solution > plunker
Like everyone else who has asked this question about Angular JS, my problem goes deeper than the simple "how to fix blank option in drop down menu". Basically, I am creating a live preview WITH the form that I am creating. Here is what I mean:
The initial blockquote in the HTML is basically the actual reviews that will be there. The second blockquote is the actual LIVE preview. Finally, the third part is the piece of dilemma I am having.
DILEMMA:
Here is the dilemma I am having:
By removing: ng-model="review.stars" from the select tag, my page will load the 5 stars as expected. However, since I need to bind the ratings already posted up, the live preview AND the initial selection of 5 stars, I have to use ng-model="review.stars" to bind everything together.
BUT, now what happens is that by adding ng-controller=starsController along with the ng-model, the whole thing simply doesn't work. I have tried using a few formulas (and one of those was looking promising, one using an orderProp), but because I NEED to bind the three aforementioned things, it breaks the code and that specific piece.
I can still select an option from the list, but the preview fails to show it. Furthermore, it will NOT automatically show up the 5th star in the drop down (I have to manually select it).
In case you would like a visual aid to understand better what I'm explaining, let me post a picture of the two situations I am referring to. This is the image via a link - I don't have enough rep to post it directly here :/
HTML
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm">
<blockquote>
<b> Stars: {{review.stars}}</b>
<br/>
<b> Review: {{review.body}}</b>
<br/>
<cite>by: {{review.author}}</cite>
</blockquote>
<select ng-model="review.stars" ng-controller="starsController" name="stars" id="stars">
<option style="display:none" value=""></option>
<optgroup label="Rate the product">
<option value="1 star" name="1 star">1 star</option>
<option value="2 stars" name="2 stars">2 stars</option>
<option value="3 stars" name="3 stars">3 stars</option>
<option value="4 stars" name="4 stars">4 stars</option>
<option value="5 stars" name="5 stars" selected="selected">5 stars
</option>
</optgroup>
</select>
<br/>
JS
app.controller('starsController', ['$scope', function($scope) {
$scope.options = [
{ name: '1 star', value: '1 star' },
{ name: '2 stars', value: '2 stars' },
{ name: '3 stars', value: '3 stars' },
{ name: '4 stars', value: '4 stars' },
{ name: '5 stars', value: '5 stars' }
];
$scope.orderProp = options[4];
}]);
Updated Plunker
To fix this, add ng-init="review={}" to your form tag.
<form name="reviewForm" ng-init="review={}">
Or, even better - move ng-controller higher up the DOM tree (maybe on your form element)
<form name="reviewForm" ng-controller="starsController">
Or the best option, create a custom reviewStars directive:
app.directive('reviewStars', function() {...});
I've looked at the Schema.org spec for opening hours, but it seems to fail to address two key items:
1) Localbusinesses that have multiple hours (ie 8-12, 1-5 with the hole in the middle being closed for lunch)
2) Days where the business is closed altogether.
I can't find any examples of anyone else doing it on google, this is my code for just normal hours (9-5) and my GUESS for how to handle days that are closed.
Can someone chime in on multiple hours and confirm my handling of closed days is correct?
<time itemprop="openingHours" datetime="Mo 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Monday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Tu 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Tuesday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="We 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Wednesday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Th 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Thursday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Fr 10:10-12:00">
<div style="font-weight:bold;width:100px;margin- right:10px;padding:5px;clear:both;float:left;">Friday</div>
<div style="float:left;padding:5px;">
10:10AM - 12:00PM
</div>
</time>
<br />
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Saturday</div>
<div style="float:left;padding:5px;">
<em>Closed</em>
</div>
<br />
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Sunday</div>
<div style="float:left;padding:5px;">
<em>Closed</em>
</div>
The 2nd example on the LocalBusiness schema page appears to illustrate both the issues which you've raised:
Hours:
<meta itemprop="openingHours" content="Mo-Sa 11:00-14:30">Mon-Sat 11am - 2:30pm
<meta itemprop="openingHours" content="Mo-Th 17:00-21:30">Mon-Thu 5pm - 9:30pm
<meta itemprop="openingHours" content="Fr-Sa 17:00-22:00">Fri-Sat 5pm - 10:00pm
This shows a restaurant that closes for a couple hours during the afternoon and is not open on Sundays (implied by no given openingHours for Sunday).