Bootstrap 3 Datepicker sometimes adds one minute when using linked pickers. When using the option stepping: 0, you still get one minute extra.
You can try it on this website under 'Linked pickers': http://eonasdan.github.io/bootstrap-datetimepicker/
$(function () {
$('.datum-tijd-van').datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD HH:mm'
});
$('.datum-tijd-tot').datetimepicker({
locale: 'nl',
format: 'YYYY-MM-DD HH:mm'
});
$(".datum-tijd-van").on("dp.change", function (e) {
$('.datum-tijd-tot').data("DateTimePicker").minDate(e.date);
});
$(".datum-tijd-tot").on("dp.change", function (e) {
// $('.datum-tijd-van').data("DateTimePicker").maxDate(e.date); // disabled this one
});
});
Related
I just started programming in vue. js.
I want to program a clock that outputs as text a time after typing it in hh:mm format.
To do this, I have to divide the input into minutes and hours and save the values in a variable. How do you do that? Can I use split?
You may use VueJS Computed & Javascript Split function to achieve what you need.
Eg:
data: () => ({
userInput: '' // 08:33
}),
computed: {
hours: function() {
return this.userInput.split(":")[0] // return 08
},
minutes: function() {
return this.userInput.split(":")[1] // return 33
}
}
Computed method will listen to the change of userInput in this case. Meaning if the user key in 08:33, then decided to change to 08:44, the minutes will react and change to 44.
I'am vuejs-datepicker . I'm trying to print the selected date which is stored in a variable in data. Initially the value of the variable is empty. vuejs-datepicker supports the selected event. so when the event is triggering, I mean if date is selected the selected event get triggered. but does not print ta current selected date rather it print empty string. if I again select another date the it prints the previous date. It is printing the the previous stored date. code is given below
Uses
<date-picker :bootstrap-styling="true" class="datepicker form-control"
placeholder="Select Date" v-model="appointment.appointmet_date"
#selected="dateSelected()"></date-picker>
dateSelected method
dateSelected () {
console.log(this.appointment.appointmet_date)
},
data property
data () {
return {
appointment: {
appointmet_date: '',
}
}
}
When I entered first date it printed null. when I entered date second time it printed the time entered first time
upadate
dateSelected () {
// console.log(this.appointment.appointmet_date)
var self = this
this.$nextTick(() => console.log(self.appointment.appointmet_date))
this.$http.post(apiDomain + 'api/getAvailableDate', {avlDate: self.appointment.appointmet_date})
.then(response => {
console.log(response)
})
}
when i entered first date it printed null. when i entered date second time it printed the time entered first time
Yes because the selected event is fired before the Vue nextTick function which updates the v-model.
Please below code and working codesandbox demo.
dateSelected (e) {
console.log(this.appointment.appointmet_date);
this.$nextTick(() => console.log(this.appointment.appointmet_date))
},
For future visitors - simply make the post request within the Vue nextTick() like so:
dateSelected () {
...
this.$nextTick(() => {/* post call here */})
}
I am trying to set up my MaterlizeCSS timepicker to output the time for further processing. The docs don't give any instructions for this, but the pickadate.js docs themselves have instructions.
$('.timepicker').pickatime({
formatSubmit: 'HH:i',
hiddenName: true
})
From my understanding, this method should produce a hidden field with the name of the input field and the time in the 24-hr format. It isn't working for me. The name isn't stripped from the original input and the hidden field isn't created. I don't see any errors either. Has anyone else gotten this to work?
For reference, this is my function:
function setTimePicker (elem) {
elem.pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
style: {"color": "#ff16a2"},
formatSubmit: 'HH:i',
hiddenName: true,
aftershow: function () {
} //Function for after opening timepicker
});
}
EDIT: I've also tried setting the containerHidden option but it didn't do anything either.
I am trying to hide datepicker after changing month. For that I tried this code :
$("#datepicker").datepicker({
viewMode: 'months',
format: 'mm-yyyy'
}).on('changeMonth', function (e){
$(this).datepicker('hide');
});
But it's not working, please help.
Try this,
$('#datepicker').datepicker({
startView: 'months',
minViewMode: 'months',
format: 'mm-yyyy'
}).on('changeMonth', function(e) {
$(this).datepicker('hide');
});
Thanks!
I have a ArrayController for date picker with properties to and from. Now when user selects a new date range from the UI both to and from value changes.
So a function which observers on to and from is trigger twice for a single change in date range.
I want to trigger the function only one every date range change. Any suggestions how to do that with ember
app = Ember.Application.create();
app.Time = Ember.ArrayController.create({
to: null,
from: null,
rootElement: "#time",
debug1: function() {
this.set('to', 1);
this.set('from', 2);
},
debug2: function() {
this.setProperties( {
'to': 3,
'from': 4
});
},
debug3: function() {
this.beginPropertyChanges();
this.set('to', 5);
this.set('from', 6);
this.endPropertyChanges();
},
search: function() {
alert('called');
}.observes('to', 'from')
});
View in JS Fiddle
Perhaps you can introduce a computed property on from and to, and then plug the observer on this property. As CPs are cached by default, I think the observer will be triggered only once.
date: function(){
// return the computed date
}.property('from', 'to')
dateDidChange: function(){
}.observes('date')
EDIT Thanks to your fiddle, it seems to work using setProperties, or begin/end propertyChanges http://jsfiddle.net/Sly7/zf2q3/1/
You can wrap observer in a Em.run.once
_dateDidChange: function(){
Ember.run.once(this, 'dateDidChange');
}.observes('from', 'to'),
dateDidChange: function() {
// should be called only once
}