I'm trying to get the following Bootstrap 3 plugin to work:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
One of the requirement is Moment.js:
http://momentjs.com/docs/#/customization/
My HTML is:
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
The JS:
<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script>
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" />
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" />
$(function () {
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
//format: moment().format('YYYY-MM-DD'),
format: moment().format('LLLL'),
locale: "en"
});
$('#datetimepicker7').datetimepicker({
useCurrent: false, //Important! See issue #1075
allowInputToggle: true,
enabledHours : false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
I'm a bit confused, as I can't seem to get the format to work. If I use this to set the format:
format: moment().format('LLLL'),
I get a REALLY weird date! (not even sure what language that is??)
If I change it to:
format: moment().format('YYYY-MM-DD'),
The date DOES show correctly, but then the dropdown stops working for me!
Can anyone suggest where I'm going wrong? I've done loads of playing around, googling etc, but I still can't figure it out :(
BTW: The dropdown itself works when I don't try and edit the format of the date:
Ok, well I'm not sure why it didn't like taking a moment().format() value, but after checking the GitHub issues, I came across an issue with the format. It led me to this example:
https://jsfiddle.net/dugujianxiao/ad64awL7/11/
So after tweaking my code to use format: 'YYYY-MM-DD' instead, and this seems to have sorted it:
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
locale: moment().local('en'),
format: 'YYYY-MM-DD'
});
The date is correct, as well as the format.
Hopefully this helps someone else!
Related
Can you add more than one modifier?
For example:
<input v-model.trim="name.first"/>
<input v-model.lazy="name.first"/>
into something along the line
<input v-model.{lazy,trim}="name.first"/>
Possible or not possible?
Yes!
followup question:
What is the concept behind it?
I understand it works,
but ".lazy.trim" sounds like trim is a part of lazy object
Yes,we can add more than one modifier to Vue js v-model.
new Vue({
'el': '#app',
data: {
val: 'default value',
num: 0,
trimExample: ''
},
methods: {
handleBtnClick() {
console.log(this.trimExample, this.num)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model.lazy="val">
<br> {{val}}
<br><br>
<input type="text" v-model.number="num">
<input type="text" v-model.trim.lazy="trimExample">
<button v-on:click="handleBtnClick">
check console
</button>
</div>
Fiddle Link
Yes you can use it !
for example you can see this link which v-model.trim.lazy is used in it !
https://vuelidate.js.org/#sub-basic-form
<input class="form__input" v-model.trim.lazy="$v.age.$model"/>
I'm building a web application which has several forms on the same page, so scoped validation from VeeValidate looked like an obvious choice, but I can't make it work.
No matter what I do, model is always valid. I built a small example to help you help me 😊 https://jsfiddle.net/pvkovalev/3vwp9zdo/
Here is my HTML code:
<div id="app">
<div data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: true}" />
</div>
<div data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: false}" />
</div>
<input type="button" #click="validate" value="validate" />
</div>
And JS:
Vue.use(VeeValidate)
new Vue({
el: "#app",
data: {
input1: undefined,
input2: 'not required'
},
methods: {
validate: function (){
this.$validator.validateAll('InformationStep1').then((result) => {
alert('InformationStep1 valid: '+ JSON.stringify(result))
})
this.$validator.validateAll('InformationStep2').then((result) => {
alert('InformationStep2 valid: '+ JSON.stringify(result))
})
}
}
})
What did I miss here? Perhaps, something obvious. Any help appreciated!
I found it!
Okay, so the solution is to use form tag, not a div tag. As soon as I changed it, it works like a charm.
Here is a new code:
<div id="app">
<form data-vv-scope="InformationStep1">
<input v-model="input1" v-validate="{required: false}" />
</form>
<form data-vv-scope="InformationStep2">
<input v-model="input2" v-validate="{required: true}" />
</form>
<input type="button" #click="validate" value="validate" />
</div>
and new fiddle https://jsfiddle.net/pvkovalev/1L5t3dsc/
I am trying to close a Modal of Materialize CSS if the validation is correct but I can not find the form.
The simplest thing was to do a type validation:
v-if = "showModal" and it works but leaves the background of the Modal and although click does not disappear. The background is a class named 'modal-overlay'
This is my code:
<i class="material-icons modal-trigger tooltipped" style="margin-left: 2px;
color:#ffc107; cursor:pointer;" #click="getById(article), fillSelectCategories(),
titleModal='Edit', type='edit'" data-target="modal1">edit</i>
I imported M from the JS file of MaterilizeCSS
import M from "materialize-css/dist/js/materialize.min";
Method:
update(){
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.getInstance(elem);
console.log(instance)
That returns 'undefined'
I tried this too on the update() method:
var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()
I initialize the modal from mounted and it works fine but I can not close it at the moment I require it.
mounted(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
}
But I know what else to try :(
It really is difficult to know why things aren't working for you without looking further into your code, but I've created this simple example to demonstrate how it could be done ..
new Vue({
el: "#app",
data: {
modalInstance: null,
closeAfterTimeElapsed: true,
seconds: 1
},
mounted() {
const modal = document.querySelector('.modal')
this.modalInstance = M.Modal.init(modal)
const select = document.querySelector('select');
M.FormSelect.init(select);
M.updateTextFields();
},
methods: {
handleClick() {
if (this.closeAfterTimeElapsed) {
setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
}
}
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<!-- Modal Trigger -->
<button #click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br>
<br>
<div class="row">
<div class="input-field col s6">
<select v-model="closeAfterTimeElapsed">
<option :value="false">False</option>
<option :value="true">True</option>
</select>
<label>Close Modal After</label>
</div>
<div class="input-field col s6">
<input id="seconds" type="number" v-model="seconds">
<label for="seconds">Seconds</label>
</div>
</div>
</div>
See this JSFiddle
I am using https://eonasdan.github.io/bootstrap-datetimepicker/ and is it possible to cofigure to use 24 hours format?
Nowadays I use it like this but it is not what I need
$('.dayWorkTime').datetimepicker({
format: 'LT'
});
Yes, you have to set format to HH:mm.
As the docs says:
See momentjs' docs for valid formats. Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.
Here a working example:
$("#datetimepicker1").datetimepicker({
format: 'HH:mm'
});
<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.37/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.15.2/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.37/js/bootstrap-datetimepicker.min.js"></script>
<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>
How can I set a particular format in bootstrap 3 Datetimepicker?. The format should be "hh:mm:ss" and I don't want "AM" and "PM". Actually, this is for selecting Hours, minutes and seconds. I tried with this code,but it is not working.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
pickDate: false
});
</script>
</div>
</div>
I want to get it to appear like this -
You can use format option to set the date format you prefer. In your case you can have:
$('#datetimepicker4').datetimepicker({
format: 'HH:mm:ss'
});