How can I get time value using materializecss Timepicker in Vuejs
Meterilize css Time Picker Jsfiddle LInk
It's give me value in jsfiddle but when I doing it my vuejs project it's not working..
Vue.js Code:
<v-text-field
name="start-time"
id="edit_start-time"
class="timepicker"
></v-text-field>
mounted() {
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to *
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
aftershow: function() {} //Function for after opening timepicker
});
$('.timepicker').on('change', function() {
let receivedVal = $(this).val();
console.log(receivedVal);
});
},
NB: My fiddle works fine and if you check console it give me value but same code not work in Vue.js Project my Problem in Vuejs.. i want to get value like jsfiddle
Please use
v-model.lazy="deliverySchedule"
worked for me !!!
Jsfiddle Link With Solution own my problem
I got solution by use input
<input class="timepicker" v-model="deliverySchedule" >
I think you should not use jQuery for this.
Vue offers some nice bindings wich are working way better.
<v-time-picker v-model="myTimeValue"></v-time-picker>
In this code i bind myTimeValue (a local data variable) to the actual value of the timepicker. Now i can use it anywhere and vue deals with all updating stuff.
I think you should use ref
If you need directly access a child component in JavaScript you have to assign a reference ID to the child component using ref.
For more information take a look at Link.
How to use:
Your html should be similar to this:
<div class="input-field inline">
<label for="startDate" class="materialize-label">Start Date</label>
<input id="startDate" ref="startDate" type="date" size="12" class="startDate timepicker">
</div>
You also need to initialize it with jquery (the same way you have done it)
$('.timepicker').pickatime({
...
...
...
})
For example, when your user submits a form you just need to use: this.$refs.startDate.value
This will grab the value of the date.
If you want to bind changes from the user you can use v-model.
Otherwise, I think using v-model is unnecessary.
Vue Docs:
You can use the v-model directive to create two-way data bindings on
form input and textarea elements. It automatically picks the correct
way to update the element based on the input type
More information at: Link
Related
I'm using vue-bootstrap in my app, and have 2 fields in a form to fill with time. For it, I'm using b-form-timepicker component of bootstrap, but it appears to not have a function to set min and max values, to limit the range of hours can be selected. The better solution in this case is to use another component than bootstrap nativo timepicker?
Please try these codes, To How to set the min and max values in the bootstrap time picker?
<div class="md-form">
<input placeholder="Selected time" type="text" id="input-limited-range" class="form-control timepicker">
<label for="input-limited-range">Try me</label>
</div>
$( document ).ready(function() {
$('#input-limited-range').pickatime({
twelvehour: true,
min: "8:20am",
max: "5:15pm"
});
});
I hope this code will be useful to you.
Thank you.
One way you could approach this is to use isBetween() from moment.js and the :state validation state to provide a visual cue and block form submission if false:
Template:
<b-form-timepicker v-model='time' :state='isValidTime' >
Script:
import moment from 'moment';
...
format = 'hh:mm:ss';
time = null;
minTime = moment('10:30:00', this.format);
maxTime = moment('14:40:00', this.format);
get isValidTime() {
return moment(this.time, this.format).isBetween(this.minTime, this.maxTime);
}
You also have the #input event at your disposal which will fire when the time value changes. You could put similar validation code there.
Sample validation state behavior using BootstrapVue:
Learn more about validation states here.
I am using AngularJS with this bootstrap-datepicker plugin:
Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
Copyright 2012 Stefan Petre
Improvements by Andrew Rowls
I have it bound like this:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
I get the values to inputs using ng-model.
When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:
the model doesn't get updated,
the field is not treated as dirty (no ng-dirty class).
Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?
I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.
After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
angular.element($(this)).triggerHandler('input');
});
});
}
And run it from within the angular.controller.
Based on this answer: https://stackoverflow.com/a/23850753/1813219.
I created a DateTimePicker and am currently using the "onChangeDateTime" as a means of updating a page using ajax. But I'm not a front end person and I'm having trouble understanding what exactly is going on and I have almost no experience with Jquery. I'm working on learning more but in the mean time I'd appreciate some advice if anyone is offering.
What I'm trying to do is have a link/button on the page where I can call some method to change the time in the date picker and have it trigger the onChangeDateTime function.
I thought it would be as simple as doing $("#DateTimePicker").somefunction() to change the time but I can't seem to figure out even how to change the time nor how to trigger onChangeDateTime().
I'm creating a schedule viewer and I'd like to let users click a button to cycle forward and backward in time rather than having to select the specific time over and over again on the datetimepicker.
I got my version of datepicker from http://xdsoft.net/jqplugins/datetimepicker/
Edit: this is what I've written so far.
<body>
<input id="datetimepicker" type="text" value="2015/04/08 17:49">
<a id="myLink" title="Click to do something"
href="#" onclick="backEpisodes();">Backwards</a>
<a id="myLink" title="Click to do something"
href="#" onclick="forwardEpisodes();">Forwards</a>
<script>
jQuery('#datetimepicker').datetimepicker({
formatTime:'g:ia',
format: 'm/d/Y g:i a',
inline:true,
maxDate:'<?php echo date('Y/m/d', strtotime("+3 week")); ?>',
onSelectTime:function(current_time,$input){
updateEp($input.val());
}
});
</script>
</body>
You can programmatically set the value of the DateTimePicker by using it's setOptions() function and specifying the "value" option like this:
$('datetimepicker').data('xdsoft_datetimepicker').setOptions({
value: '1944/06/06 6:06' // Of course this needs to match the correct format
});
jsfiddle
Note: The jsfiddle contains a function that parses a string into a JavaScript Date object. That could be implemented using a regular expression, but I took a shortcut and utilized the moment.js library.
Notes:
You might want to use the "onChangeDateTime" option, rather than the "onSelectTime" option if you want that code to also execute when the user changes the date.
The format of your initial value ("2015/04/08 17:49") does not match the format you give to the datetimepicker ('m/d/Y g:i a'). You will want to correct that.
The "formatTime" option is needed only if you are specifying the "minTime" and/or "maxTime" options. Similarly, the "formatDate" option is needed only if you are specifying the "minDate" and/or "maxDate" options. Therefore, you don't need to specify the "formatTime" option. You could specify the "formatDate" option since you do specify a "maxDate", but it defaults to "Y/m/d".
id values should be unique, so you should not use "myLink" as the value for both your <a> elements.
I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.
The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle
I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready
In my current project I am using the Bootstrap datepicker to allow users to select dates.
There has been a request to allow people to type the date into the datePicker input rather than having to manually click on the dates in the widget.
Currently when a user manually edits the date string, the date picker will highlight the correct day, but it will not update the variable it is assigned to. (As a note I am using Knockout.js and using an observable for storing the date)
My thoughts were that this would simply trigger the changeDate function but it does not.
Has anyone ever tried to achieve this and get it working?
Here is a working jsfiddle and a gist of the datePicker and dateValue bindings, which bind independently to an observable and update it accordingly.
<div class="input-append date">
<input type="text" data-bind="dateValue: date" />
<span class="add-on datepicker-button" data-bind="datePicker: { date: date }">
<i class="icon-calendar"></i>
</span>
</div>
The bindings are written with a BindingHandlerFactory wrapper that
1. creates a handler object for each element bound and stores it with $.data() on the element.
2. calls the handler's initialize(element, context) once.
3. call the handler's contextChanged(context) method every time the binding context changes.
Why would you not use not Read/Write options with KO.
something like
function yourModel(){
var self = this;
self.theDateUserManuallyWillEnter = ko.computed({
read: function () {
if (self.theDateUserManuallyWillEnter != undefined)
return self.theDateUserManuallyWillEnter ;
else
return $('#theDateUserManuallyWillEnteredTextBox').val(); //Jquery
identifier of text box
},
write: function (value) {
self.theDateUserManuallyWillEnter = value;
},
owner: this
});
}