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
});
}
Related
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
I am trying to add ng-change to input which runs datetimepicker but it triggers on change function on page load. below is the code
<input datetimepicker ng-model="startDate"
ng-change="testFunction()"
options="cOptions"
placeholder="Select Date"/>
any idea how to prevent this ?
edit:
$scope.testFunction = testFunction;
function testFunction(){
console.log('on change')
}
loadData();
function loadData(){
//this is where startDate is set
}
Hi the change in input field where you're using the directive is triggered by the plugin, it's explicitly setting it to null. So you can have the validation like until input field in filled don't execute logic you written on ng-change function. There're two ways to do that:
<div class="input-group">
<input class="form-control" datetimepicker ng-model="vm.date" options="vm.options"
ng-change="vm.date && vm.changed()"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">
</span></span>
</div>
Now here ng-change will not trigger until something you inserted in the field. So onload it'll not triggered.
Other way is like instead of anding this scope variable with its ng-change function, you can check in that function if the value is null or not. If it's non-null then only run the implementation written on ng-change.
Here's plunker showing both conditions:
http://plnkr.co/edit/uCf2vpmoYIYzxTjmFVcX?p=preview
Update: If you're editing value onload but still you don't want to execute implementation you written on ng-change then have separate variable, toggle its value on first ng-change, which's triggering automatically because of directive, next change onwards your ng-change function will run.
http://plnkr.co/edit/FogYzmDBd1gIolvjP7yl?p=preview
I've used use babakhani Persian datepicker in my project.
There is a problem here. the selected value of date picker does not change on textbox value change!! How can I fix it in my project, myself?
JsFiddle
I used
$("#example1").change(
function (e) {
$("#example1").pDatepicker();
};
});
but the error is:
too much recursion
since it calls change() recursively. (also .blur() is tested)
No need to use change event. you can directly use
$(document).ready(function () {
$("#example1").pDatepicker();
});
Also there is an additional } in your code.
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 am using this html tag as a datetime picker:
<input type="datetime-local">
I want to be able to set a default value for the time part only so if
someone inserts a date and doesn't insert the time (leaves it as --:--:--) then I will be able to set it as 00:00:00 for example.
The problem is I know only how to set the a value including both the date and time and if someone inserts only a date w/o the time I can't read that value and getting a blank value.
Is it possible to overcome that? or is there any other datetime picker I could use for the described scenario?
We can not change the behavior of browser against an element. So this is an answer to the second question that if there is another solution for this scenario. I used two separate fields of date and time which control a single datetime-local field.
Please note that the date filed has no value unless the field is totally completed. So I used blur event instead of keyup or change.
$(document).ready(function() {
var mydate, mytime, mystring;
$("#dateField").blur(function() {
if ($(this).val()) {
setResult();
}
})
$("#timeField").change(function() {
setResult()
})
})
function setResult() {
mydate = $("#dateField").val();
mytime = $("#timeField").val();
mystring = mydate + 'T' + mytime;
document.getElementById('resultField').value = mystring;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateField" type="date"><input id="timeField" type="time" value="18:30">
<br>
<strong>Result</strong>:
<br>
<input id="resultField" type="datetime-local">
Footnote 1:
The change listener works on time field (when has default value) but I noticed a vague behavior in google-chrome that if you change the value of time filed by mouse clicks, the change event is triggered after mouseOut! This has no effect on the answer above.
Footnote 2:
You can hide the result field inside a display:none div.