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>
Related
The Leaf documentation doesn't seem to be working for me I can't figure out why.
child.leaf
#extend("index"):
#export("hello"):
<p>Welcome to Vapor!</p>
#endexport
#endextend
index.leaf
<!-- Backend Projects -->
<div class="seciton-label">
<h3>#(.backendCollection.title)</h3>
</div>
#import("hello")
<!-- Backend Card -->
#for(card in .backendCollection.collection):
<div class="greeting-card">
<a href=#(card.url)>
<h3>#(card.title)</h3>
</a>
<p> #(card.description) </p>
</div>
#endfor
The following image is the result I get in localhost
Request result running the vapor server on localhost
Please help - I can't find solutions to this issue.
No response from forums.swift.org
Tried removing the import key
Removing quotes
I saw individuals using the following format in older versions of Vapor. This did not work for me either.
<!-- I tried the following format for the extend and export blocks -->
#extend("index") {
#export("hello") {
<p>Welcome to Vapor!</p>
}
}
I'm trying to be able to extend the leaf templates and understand why the html does not render.
This works and does something similar to what you want.
This is my 'template' (heavily simplified here), called Base.leaf:
<!DOCTYPE html>
<html>
<head>
<title>#(title)</title>
</head>
<body>
#import("body")
</body>
</html>
#extend("Build/Message")
</body>
</html>
The extend of Build/Message above behaves simply like an include.
Then I use it in a form called Login.leaf here:
#extend("Build/Base"):
#export("body"):
<form method="POST" action="/log-in">
<label for="email">Email</label>
<input type="text" name="email" required>
<label for="password">Password</label>
<input type="password" name="password" required>
<button class="btn-success">Log-in</button>
</form>
#endexport
#endextend
I then use the `Login.leaf' in a render such as:
let context = ["title": "Log in", "version": C.Msg.Version, "message": request.getMessage()]
return try await request.view.render("Form/Login", context)
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>
I am trying to write a simple Regex Checker function that takes the user input and checks it against certain criteria. Only problem is, I can't get the user input to be passed into the new variable to begin the checking.
Can someone help me understand why I'm not seeing the user input in the log? I just want to be able to see the user input in the console so I can continue writing the code I need. EDIT-I know it is set to ALERT at the moment and not console.log-
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
function regexChecker () {
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
Thanks in advance.
Just assign values of first and last inside the function cause these two lines invoke when the page loads so have null or empty string values. You must reassign them.
function regexChecker () {
let first = document.getElementById('firstName').value;
let last = document.getElementById('lastName').value;
alert(first + last);
};
<!DOCTYPE html>
<html>
<head>
<title>Regex Checker</title>
</head>
<body>
<form id='form'>
<h2>Please enter your first and last name</h2>
<label for='firstName'>First Name: </label>
<input type='text' id='firstName'>
<label for='lastName'>Last Name: </label>
<input type='text' id='lastName' >
<button onclick='regexChecker()' type='reset'>Verify Input</button>
</form>
<script src='./script.js'></script>
</body>
</html>a
I am trying to use autocomplete as a search box so that the search result can be shown in the popup by updating the data as the user types. When the user clicks on an item in the popup he should be navigated to another page. I also want to know if there are any way I can associate an id to the data so that it can be used in the other page.
If autocomplete is not the right candidate, please advice any alternate that materializecss provides.
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
onAutocomplete: function(val) {
// Callback function when value is autcompleted.
alert(val)
//Here you then can do whatever you want, val tells you what got clicked so you can push to another page etc...
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
Here, i modified it in, the val tells you what got clicked and you could for example push to a other page and use that value etc. that depends on your usage. Any questions just comment :)
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>