Knockout and Kendo Datetimepicker resets date to today when changing time - javascript

I have page that uses the Kendo DateTimePicker with the input bound to a Knockout Observable. I am using knockout-kendo.js for the bridging.
As you can see in this JSFiddle, I set up the observable with today's date time at initialization. I later set the value (as if it was loaded from an ajax retrieval, I just didn't want to deal with the echo api on JSFiddle)
var SchedulerAppointmentModel = function () {
var self = this,
saved = [],
initComplete = false;
self.StartDateTime = ko.observable(moment().format("MM/DD/YYYY hh:mm A"));
self.StartDateTime(moment("10/23/2014 1:30 PM").format("MM/DD/YYYY h:mm A"));
};
The problem is, if I change the time in my drop down box, the date resets to today. I wanted to leave the date alone.
I think it has something to do with setting the kendoDateTimePicker in code and not in html. I think if i could somehow set the max later, it would work.

Not sure if you still need an answer, but...
I see you've pulled in the knockout-kendo library. With that there is no need to manually initialize the dateTimePicker. You can simply use the binding that comes with that library:
<input id="appt-start-datetime" value="0" data-bind="kendoDateTimePicker: StartDateTime" />
Fiddle Updated

Related

Is there a rangeselector event to get dates outside the data range?

I am looking to build a chart which loads and displays years worth of time-series data, collected over years, but loaded dynamically in small chunks (1 day, 1 week, 1 month). For instance, I am looking at a chart which is displaying data for 8/21 -> 8/22.
I would like to use the built-in range selector in order to change the date range, for example to change the From date to 8/15, and then go fetch and display data for 8/15 -> 8/22.
I am looking for an event or API which is triggered when the date rangeselector is modified by a user. I have found and experimented with xAxis.events. setExtremes, but this doesn't seem to have what I need. Before triggering this event, the chart does some form of sanitization, the date I give it is discarded and the To-From dates in the event are normalized to the min-and-max range of the data itself. For example, suppose I have data loaded into my chart from 8/19 -> 8/22 (3-day window), but I have my chart zoomed in to 8/21 -> 8/22 (1 day). I would like to see data from 8/15 -> 8/22 so I change the From date to 8/15. The event that gets fired changes the min I entered to be 8/19, as that is the minimum edge of the existing data, but what I would like is an event that says the date was changed to 8/15.
I have also tried to hack something in using the rangeSelector.inputDateParser API, but this is definitely not ideal, and I don't think it will even work, as I can't tell [i]which[/i] date field was edited.
I'm not sure what else to try, but i'm worried I will need to implement/integrate my own custom range selector separately, which I would rather not do.
Here is a jsFiddle using setExtremes. (It's from the API docs, not my code, but it's a good representation of what I'm trying to do)
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/events-setextremes/
What I would like to happen is, when I set the From date to '2001-01-01', that the setExtremes event (or some other event) returns 2001-01-01 (Or any equivalent in some other format). But the problem is, it changes 2001 to 2007, because that's the lowest data value, before telling me what value was entered.
Is there any way to detect or trigger an event when I change the date in the range selector to a date outside of the range of the data?
There is no such event in the Highcharts core. However, it can be easily added by wrapping RangeSelector.prototype.drawInput and adding these lines of code:
// Custom event
H.fireEvent(rangeSelector, 'RSValueProvided', {
inputValue: inputValue,
dataMin: dataMin,
dataMax: dataMax
});
After that, you can add a callback function that will be invoked when the event occurs:
chart: {
events: {
load: function() {
var chart = this;
Highcharts.addEvent(chart.rangeSelector, 'RSValueProvided', function(e) {
var date = +new Date(e.inputValue);
if (date < e.dataMin || date > e.dataMax) {
console.log(e.inputValue);
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/cf0h8tp5/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.fireEvent%3CT%3E
https://api.highcharts.com/class-reference/Highcharts#.addEvent%3CT%3E

Can you make an Ember.TextField wait until change to update its value binding?

I extended an Ember.TextField to include a date picker. A function that observes the text field’s value attempts to parse the string in the text field and update a date property. This is all fine and good when you use the date picker, but if you were to try to type a date into the box, it goes crazy because the value gets updated on every keydown (or keyup or whatever Ember’s default event to update the value bindings for a TextField), and it immediately re-updates the value of the text field with the nicely-formatted date string that came from what it just parsed. Example:
Input says 10/26/2014
You insert your cursor after 2014 and hit backspace
The value has changed, so a handler parses 10/26/201 and updates a date property
The date property has changed, so a handler formats the date as MM/d/yyyy and sets the value
The input now says 10/26/0201
Rather than changing the way those handlers work, all my problems would be solved if I could tell Ember to update the value binding when the input’s change event fires, rather than trying to update everything on every keystroke. I know this can be done in AngularJS and Knockout, but I can’t find anything about it for Ember.
EDIT
I know I can change the way my code works to avoid this specific problem. At this point, I’m more interested for purposes of edification, in a yes-or-no answer that specifically addresses the question that is the title of this post. I’m starting to think the answer is no, but wanted to poll the community.
I wrote a blog post that may offer some solutions about Date Pickers And Validation In Ember with examples here is one of the JSBins from the post.
Write your own extension of text field component and add the change callback.
App.DateTextComponent = Em.TextField.extend({
change: function(event){
var value = this.get('value');
// massage data
value += "foo";
this.set('value', value);
}
});
Example: http://emberjs.jsbin.com/suzami/2/edit
If you really want to get a call when the value changes after the fact, don't observe the value, use actions.
App.DateTextComponent = Em.TextField.extend({
change: function(event){
var value = this.get('value');
this.sendAction('changed', value);
}
});
{{date-text value=foo changed='fooChanged'}}
Example: http://emberjs.jsbin.com/suzami/3/edit?html,js,output

What's the difference between bootstrap datepicker "setDate" and "update" methd?

I've tried to use
$element.datepicker('setDate', dateObj);
And
$element.datepicker('update', dateObj);
to set the internal date of a datepicker. But it looks like if i use setDate, the default selected date(which is the start date) is still highlighted, but update will clear the default selected date and use the new dateObj as selected
I wonder how to clear the default selected date with setDate
I've been playing around trying out different alternatives to the API and according to my findings, there's no difference between those two.
$("#calendar").datetimepicker("update",new Date());
$("#calendar").datetimepicker("setDate",new Date());
It seemed to me confusing and suspicious that they'd put in two different methods for the same task so I started asking around. By the word of mouth, I've learned that the former was originally intended to be the general setter of all properties but due to technical issues, the functionality was dropped (only retaining the date setting capability due to compatibility issues for pre-existing code).
$("#calendar").datetimepicker("update", "weekStart", 4);
The above was but isn't anymore changing the starting week of the control.
Difference between bootstrap datepicker “setDate” and “update” is as follows:
$("#calendar").datetimepicker("setDate",new Date()); = triggers an event "change"
$("#calendar").datetimepicker("update",new Date()); = no triggers an event "change"

Kendo Scheduler EditorTemplate - set recurrence date to selected date

I'm working on a Kendo Scheduler, which has a custom EditorTemplate for adding a new task. And now, if I want to make a task that has to be recursive (that is, it is should be repeated daily, weekly, etc.), it does not, as standard, set it's recursive date to the selected date, but the actual date of the week.
I have tried to comment the EditorTemplate out, and I can see that it then sets the recursive date to the selected date - so as a standard it works as it should.
I have also tried to add some JavaScript to check the correct checkbox, but I could not get that to work as well
The recursive part of the template looks like:
<div data-container-for="recurrenceRule" class="k-edit-field">
#(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule).Messages(m =>
SchedulerHelper.MessageLocaliztion(this, m))
.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
</div>
Any idea how to make it work as it does as standard ? Or make a EditorTemplate where you exclude the recursiveness, and it takes the standard ?
You can take help of the SchedularEvent Framework
I'm not certain this is the answer to your question, but we needed to set the change event in the kendoRecurrenceEditor (or kendoMobileRecurrenceEditor) so that when the user makes a change, it comes back into the parent event properly. This was the direction from Kendo Support.
recurrenceEditor.kendoRecurrenceEditor({
start: new Date(event.start),
value: event.recurrenceRule,
timezone: self.scheduleConfig.timezone,
messages: self.scheduleConfig.messages.recurrenceEditor,
change: function () {
event.set("recurrenceRule", this.value());
}
});

FullCalendar Select Method

I am creating a interactive calendar using FullCalendar but I have run into a nice to have snag.
When the person makes the hour range selection (click and drag) I have a dialog open and allows the user to title their event and modify the date/time selection if needed. What I would like is to re-render the selection with the new date/time selection from the dialog if it changes.
Currently when I run the select method my selection area is just removed from the view, I want it to stay and be updated to the current selection.
Here is my code
$('#UserCalendarToHour, #UserCalendarToMin').change(function(){
var allDay = false;
var startDate = new Date($('#UserCalendarFromDate').val()+' '+$('#UserCalendarFromHour').val()+':'+$('#UserCalendarFromMin').val());
var endDate = new Date($('#UserCalendarToDate').val()+' '+$('#UserCalendarToHour').val()+':'+$('#UserCalendarToMin').val());
if($('#UserCalendarAllDay').is(':checked')){
allDay = true;
}
$('#calendar').fullCalendar('unselect');
$('#calendar').fullCalendar('select',startDate.toString(),endDate.toString(),allDay);
});
Now what am I missing.
The select method is expecting startDate and endDate as Date objects. You're converting them to text. Also, according to docs,
allDay is a boolean indicating if entire days were selected (days in
month view or the "all-day" slot in the agenda view) or time slots
were selected.
So if you are selecting time slots you need to set it to false.
You'll see it more clearly in the select callback documentation. The same type for arguments seem to apply for the method. It took me a while to realize it. You may get confused with, for instance, the Event Object attributes, which have similar names but are of different type. See it here:
http://arshaw.com/fullcalendar/docs/selection/select_callback/

Categories