How to set minimum date in bootstrap datetimepicker 2.0. In 4.0 we can use minDate is there any way to set this in version 2.0
Yes use startDate
Refer more:
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Use like this
<div class="input-append date form_datetime" data-date="2013-02-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
startDate: "2013-02-14 10:00",
});
</script>
Bootstrap datetimepicker v 4.x
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
$('#datePicker1').datetimepicker({
minDate: today
})
});
Bootstrap datetimepicker v 2.0
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()+1);
$('#datePicker1').datetimepicker({
startDate: today
})
});
Related
How can I disable future dates while using date range?
<date-picker
v-model="params.range"
type="date"
value-type="format"
format="YYYY-MM-DD"
range
placeholder="Filter by date range"
/>
You can use the disabled-date prop to provide a function telling if a date should be disabled or not.
From the vue2-datepicker documentation demo (source code)
<template>
<div>
<p>Not before than today and not after than a week</p>
<date-picker
v-model="value1"
:default-value="new Date()"
:disabled-date="disabledAfterToday"
></date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: new Date(),
};
},
methods: {
disabledAfterToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date > today
},
},
};
</script>
I am trying to set the value of datepicker using v-model. The js code looks like below:-
var example1 = new Vue({
el: '#example-1',
data: {
end: "2021-03-03T20:20:00Z",
}
})
And the HTML code is like below:-
<div class="mb-3">
<label for="waterEnd">End (date and time):</label>
<input v-model="end" class="form-control" type="datetime-local" id="waterEnd" name="waterEnd">
</div>
I am not able to set this value but however if I print it:-
{{ end }}
Its value is rendered in the HTML page successfully.
Can anyone suggest what's being wrong here?
The UTC time zone indicator (Z) is not allowed for the datetime-local input likely because the local timezone is assumed.
The seconds (:00) are not allowed when the input has no step attribute configured (default is 1000, as in milliseconds). To enable seconds, set a step less than 1000:
<input type="datetime-local" step="1">
You could either remove both:
var example1 = new Vue({
el: '#example-1',
data: {
// end: "2021-03-03T20:20:00Z",
end: "2021-03-03T20:20", ✅
}
})
demo 1
Or configure step and remove only the Z from the string input:
<input type="datetime-local" step="1" v-model="end">
var example1 = new Vue({
el: '#example-1',
data: {
// end: "2021-03-03T20:20:00Z",
end: "2021-03-03T20:20:00", ✅
}
})
demo 2
I am trying to make validation on datepicker such as if a user does not select an date and it gives an errors.for instance "date is required"
You can use the v-model to validate the date.
const app = new Vue({
el: '#app',
data: {
date: null
},
components: {
vuejsDatepicker
},
methods: {
formSubmit() {
if (!this.date) {
alert('Please select a date');
return;
}
console.clear();
console.log('Selected date is ' + this.date);
}
}
})
<div id="app">
<vuejs-datepicker v-model=date :typeable=true>
</vuejs-datepicker>
<input type="submit" v-on:click="formSubmit">
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
You could add required in date picker
<vuejs-datepicker v-model=date :typeable=true required>
</vuejs-datepicker>
This will add a red border around the datepicker.
I'm using moment js to change the format of my date. I'm trying to create a start and end date to view all the transaction of the customer. I already create the first date. And I want to create another one for my end date. How can I do that? Can somebody help me with my problem? Here's my jsfiddle: https://jsfiddle.net/89vwy2od/1/
var vm = new Vue({
el: '#app',
data: {
date : "",
date2 : ""
},
methods : {
showDate1 : function() {
alert(this.date);
},
showDate2 : function() {
alert(this.date2);
}
},
mounted: function() {
var args = {
format: 'MM-DD-YYYY'
};
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
});
this.$nextTick(function() {
$('.time-picker').datetimepicker({
format: 'LT'
})
});
}
})
$('.datepicker').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
}
});
One possible solution (not optimal) is using 2 different class or different id
<div class="col-md-2">
<input type="text" v-model="date" class="datepicker form-control form-control-sm" placeholder="Enter Date 1">{{date}}
<input type="text" v-model="date2" class="datepicker2 form-control form-control-sm" placeholder="Enter Date 1">{{date2}}
</div>
then you need to init 2 twices:
this.$nextTick(function() {
$('.datepicker').datetimepicker(args)
$('.datepicker2').datetimepicker(args)
});
and
$('.datepicker').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date', date);
}
});
$('.datepicker2').on('dp.change', function(event) {
if (event.date) {
var date = event.date.format('YYYY-MM-DD');
console.log(date);
Vue.set(vm, 'date2', date);
}
});
You can check demo here
A better solution is creating a custom component.
I have to select two dates to set input date range. I have used this library but not date range input, have used single datepicker for each dates (Start Date and End Date) as requirement is to display only one calendar at a time. I have used vuejs in my project. So I have to bind those input values to the model. I'm new in vuejs so don't know very much about vuejs. But I come to know that I have to use custom vuejs directive to bind those values to model. Here are requirements of date range inputs.
One datepicker at a time.
Dynamic min max date to fullfill some validations like start<=end
Bind selected value to the modal (twoWay)
Different date format for modal and display value (if possible)
I have already spent 25 hrs on this and got too much frustrated. So If anyone knows the answer, it will be appreciated.
Here is my code.
HTML
<div id="app">
<div class="dropdown-menu">
<div class="input-group date">
<label>from:</label>
<input size="16" type="text" v-date v-model="queries.start_date" class="form_datetime" readonly="">
<span class="input-group-addon">
<span class="calendar-icon"></span>
</span>
</div>
<div class="input-group date form_datetime">
<label>to:</label>
<input size="16" type="text" v-date v-model="queries.end_date" class="form_datetime" readonly>
<span class="input-group-addon">
<span class="calendar-icon"></span>
</span>
</div>
</div>
</div>
js
Vue.directive('date', {
twoWay: true,
bind: function (el) {
$(el).datetimepicker({
format: "mm/dd/yyyy",
autoclose: true,
minView: 2,
daysShort: true
});
}
});
var vm = new Vue({
el: '#app',
data: {
queries: {
start_date: "",
end_date: "",
}
},
methods: {
testVal: function () {
console.log([this.queries.start_date, this.queries.end_date]);
}
}
});
Here is link for content.
EDIT
I have linked wrong library. I have updated library which I have used. Please check updated link.
I got solution. I have to use component. I have read somewhere that you can not get instance of custom directive in VueJS2. I don't know it is correct or not. But got my solution from this reference.
HTML
<div class="dropdown-menu" id="app">
<div class="input-group date">
<label>from:</label>
<datepicker v-model="queries.start_date" :enddate="queries.end_date"></datepicker>
<span class="input-group-addon">
<span class="calendar-icon"></span>
</span>
</div>
<div class="input-group date form_datetime">
<label>to:</label>
<datepicker v-model="queries.end_date" :startdate="queries.start_date"></datepicker>
<span class="input-group-addon">
<span class="calendar-icon"></span>
</span>
</div>
</div>
<script type="text/x-template" id="datepicker-template">
<input size="16" type="text" class="form_datetime" readonly="">
</script>
JS
Vue.component('datepicker', {
props: ['value', 'startdate', 'enddate'],
template: '#datepicker-template',
mounted: function () {
var vm = this;
$(this.$el)
.val(this.value)
.datetimepicker({
format: "mm/dd/yyyy",
autoclose: true,
minView: 2,
daysShort: true,
startDate: this.startdate,
endDate: this.enddate
})
.on('change', function () {
vm.$emit('input', this.value);
});
},
watch: {
value: function (value) {
$(this.$el).val(value);
},
startdate: function (value) {
$(this.$el).datetimepicker('setStartDate', value);
},
enddate: function (value) {
$(this.$el).datetimepicker('setEndDate', value);
}
}
});
var vm = new Vue({
el: '#app',
data: {
queries: {
start_date: "",
end_date: "",
}
},
});