Im currently trying to display price (loaded via an api) under the days of a datepicker (a bit like google flights).
Exemple:
Im currently using Vue 3. Im trying to acheive this using Element-plus library. I can't find a way how to do it. Any suggestion (i checked Element-plus doc), or suggestion may another Vue 3 lib does exactly the same !
Here's my code
<link href="//unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"/>
<script src="//unpkg.com/vue#next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div class="grid-container-medium">
<div id="app">
<div class="d-flex justify-content-between">
<div class="block"><span class="demonstration">Single</span>
<el-date-picker :default-value="new Date(2021, 6, 28)"
placeholder="Pick a date"
type="date"
:disabled-date="disabledDate"
v-model="value1"></el-date-picker>
</div>
</div>
</div>
</div>
<script>
var Main = {
data() {
return {
value1: '',
value2: '',
disabledDate(time) {
return time.getTime() < Date.now()
},
};
}
};
;const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
</script>
In the last version of Element+ (v1.2.0-beta.1) they have added a new #cell slot in the DatePicker component.
Docs: DatePicker - Custom content
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template>
So, you can do it now with Element+ also.
You can use the PrimeVue Calendar component. It has a date slot:
<Calendar id="datetemplate" v-model="date_with_price">
<template #date="slotProps">
{{slotProps.date.day}}<br>
{{slotProps.date.price}}
</template>
</Calendar>
Related
This are the event listeners for my two templates,specified in events.js
// event listeners on the addSiteForm template
Template.addCommentForm.events({
// this runs when they click the add button... you need to compete it
'click .js-add-comment':function(event){
var comment_text = $('#comment_input').val();// get the form value using jquery...
var user = 'anonymous person';
// the 'this' variable contains
// the data that this template is displaying
// which is the Website item
var site = this;
if (Meteor.user()){
user = Meteor.user().emails[0].address
}
var comment = {"text":comment_text,
"siteId":site._id,
"createdOn":new Date(),
"createdBy":user};// create a simple object to insert to the collectoin
Comments.insert(comment);
console.log("events start");
console.log("totla coomets are "+Comments.find({}).count()+"\n");
console.log("commenst in site "+Comments.find({siteId:site._id}).count()+"\n");
console.log("site id is "+site._id);
console.log("events end");
return false;
}
});
// event listeners on the addSiteForm template
Template.addSiteForm.events({
// this runs when they click the add button... you need to compete it
'click .js-add-site':function(event){
var url = $('#url_input').val();// get the form value using jquery...
var user = 'anonymous person';
if (Meteor.user()){
user = Meteor.user().emails[0].address
}
var site = {"url":url,
"createdOn":new Date(),
"createdBy":user};// create a simple object to insert to the collectoin
Websites.insert(site);
return false;
}
});
The router function is specified in router.js
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
// the main route. showing the list of sites.
Router.route('/', function () {
this.render('siteList');
});
// this route is for the discussion page for a site
Router.route('/discussSite/:_id', function () {
var siteId = this.params._id;
site = Websites.findOne({_id:siteId});
this.render('discussSite', {data:site});
});
the main.js contain the collections
// shared code
Websites = new Mongo.Collection("websites");
Comments = new Mongo.Collection("comments");
helpers is
// this helper gets the data from the collection for the site-list Template
Template.siteList.helpers({
'all_websites':function(){
return Websites.find({});
},
'safer_email':function(email){
if (email.indexOf('#')!=-1){// we have an email
return email.split('#')[0];
}
else{// probably anonymouse.
return email;
}
}
});
Template.discussSite.helpers({
'comments':function(siteId){
//console.log("helper comments "+this.site);
// complete the code here so that it reruns
console.log(this.params.site._id);
return Comments.find({siteId:siteId});
// all the comments with a siteId equal to siteId.
}
});
the html file is in main.html.here it first displays the websites available in the webpage.On clicking this the user is routed to a new page.Here the user can add comments for the website
<head>
<title>week_4_peer_assessment</title>
</head>
<body>
</body>
<!-- this is the template that iron:router renders every time -->
<template name="ApplicationLayout">
<div class="container">
Home
{{>loginButtons}}
<h1>SiteAce - discuss your favourite websites</h1>
<!-- iron router will select what to render in place of yield-->
{{> yield }}
</div>
</template>
<template name="discussSite">
<h3>Discussing: {{url}} </h3>
{{> addCommentForm}}
<!-- write some code here that iterates through the comments and displays
the comment text and the author -->
<!-- clue - you have already written the 'comments' helper function -->
<ul>
{{#each comments}}
<li>{{text}} (added by {{safer_email createdBy}})
</li>
{{/each}}
</ul>
</template>
<template name="addCommentForm">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="comment_input" class="form-control" placeholder="Enter your comment">
<input type="hidden" id="site_id" class="form-control" placeholder="Enter your comment">
<span class="input-group-btn">
<button class="btn btn-default js-add-comment" type="submit">Add!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</template>
<template name="siteList">
Fill in the form and click submit to add a site:
{{>addSiteForm}}
<h3>Sites you have added:</h3>
<ul>
{{#each all_websites}}
<li>{{url}} (added by {{safer_email createdBy}})
<br/>discuss
<br/>visit site
</li>
{{/each}}
</ul>
</template>
<template name="addSiteForm">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="url_input" class="form-control" placeholder="Enter website URL...">
<span class="input-group-btn">
<button class="btn btn-default js-add-site" type="submit">Add!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</template>
The starup.js contains the start up code run by the server
Meteor.startup(function(){
if (!Websites.findOne()){// nothing in the database yet
var site = {"url":"http://www.google.com",
"createdOn":new Date(),
"createdBy":"Michael"};// create a simple object to insert to the collectoin
Websites.insert(site);
site = {"url":"http://www.yeeking.net",
"createdOn":new Date(),
"createdBy":"Janet"};// create a simple object to insert to the collectoin
Websites.insert(site);
site = {"url":"http://www.coursera.org",
"createdOn":new Date(),
"createdBy":"Jose"};// create a simple object to insert to the collectoin
Websites.insert(site);
}
});
This is what your template should be: (I removed safer_email. It was erroring. Not sure if it was something else you were working on.)
<template name="discussSite">
<h3>Discussing: {{url}} </h3>
{{> addCommentForm}}
<!-- write some code here that iterates through the comments and displays
the comment text and the author -->
<!-- clue - you have already written the 'comments' helper function -->
<ul>
{{#each comments}}
<li>{{text}} (added by {{createdBy}})</li>
{{/each}}
</ul>
</template>
helper:
your helper function is designed to take in siteId as an input, yet you are not passing one to it.
this._id or Router.current().params._id will get you the siteId that you are looking for. You'd used this.site._id which used to error out as this.site was not valid.You can further see what the this object contains by doing a console.log(this). That would have helped you sort this out faster.
'comments':function(){
console.log("site id in helper is ",this._id); // or Router.current().params._id;
console.log(Comments.find({siteId:this._id}).fetch());
return Comments.find({siteId:this._id});
}
i have created a gallery using fancy-box but i have a problem that when i open all items (all projects) it works properly as each item will show its own pictures (only three picture) as shown in this picture
(have only three thumbnails) but when i open a specific category (villas category) pictures for all villas will shown as this picture
(6 thumbnails included for two projects)
and if i press all project again i will have the same problem and the picture for all items will be shown (9 thumbnails for 3 items)
so i think the problem is with the java script and here below is the html code and java script code
sorry i am new to programming and i need your help, i appreciate your efforts
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(function ($) {
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeOut(0)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-group", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
</script>
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
</div>
<div class="row"> </div>
<div class="col">
<div class="galleryWrap">
<ul id="projects">
<li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive" id="img1"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div>
<div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive" id="img2"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div>
<div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" id="img3" border="0"></a></li>
<div class="hidden"> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div>
</div>
</div>
</ul>
</div>
</div>
<footer>©Copyright Qyas Engineering Consultancy All Rights Reserved. </footer>
</div>
I would suggest you to use Isotope + fancybox combination, see this example:
http://codepen.io/fancyapps/pen/EZKYPN
Because then your code could be simplified to something like this:
// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
var visibleLinks = $('.fancybox:visible');
$.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );
return false;
});
I have problems with this datepicker http://jqueryui.com/demos/datepicker/
<script>
$(function() {
$( "#datepicker1" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<div id="checkinWrapper" class="input-wrapper">
<input type="text" id="datepicker1" style="width:118px;" class="checkin search-option hasDatepicker" name="checkin" placeholder="Поаѓаме на">
<span></span>
</div>
<div id="checkoutWrapper" class="input-wrapper">
<input type="text" id="datepicker2" style="width:118px; margin-left:2px;" class="checkout search-option hasDatepicker" name="checkout" placeholder="Се враќаме">
<span></span>
</div>
When I test it on a blank page it works okay but when I implement it in my current design it don't works (do not show). I don't know what causes that. Here are the scripts that I include:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
Maybe the problem occurs becouse I have other jQuery scripts implemented in my current design ? Any solution ?
If you remove the hasDatepicker class from both input tags it will work.
The datepicker plugin adds this class itself, as the class already exists no datepicker is created...
See http://jsfiddle.net/UYGXh/ for a working (non styled) example
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>
I tried to use the afterAdd binding to add some trivial animation to the elements being added to my observableArray but it does not trigger anything.
I tought I had a problem with my animation code so I coded a small alert on the function but still does not work.
Here's some sample code for the div being templated:
<div id="resultList"
data-bind='template: { name: "searchResultTemplate",
afterAdd: function(elem){alert(elem)} }'
runat="server">
</div>
This is the template:
<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
<div class="searchresult">
<img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
<div class="searchresultinformationcontainer">
<span class="searchresulttitle" data-bind="text: Title"></span>
<br />
<div class="searchresultdescription" data-bind="text: Description">
</div>
<span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
<br />
Take me there
</div>
</div>
</div>
<br />{{/each}}
</script>
Any ideas?
You need to qualify the template attributes with foreach like so,
<div id="resultList" data-bind='template: {
name: "searchResultTemplate",
foreach: searchresult,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}' runat="server">
</div>
and then, not use {{each in the template, just template it for each item stand alone.
Here, foreach attribute helps keep track of changes to the object array