working with angularjs

[supzeroIs]

ng-model Can't catch changes using basic
$('#rangestart').calendar({ type: 'date', endCalendar: $('#rangeend') }); $('#rangeend').calendar({ type: 'date', startCalendar: $('#rangestart') });

[mdehoog]

Try using the onChange(date) listener to update your model.

[supzeroIs]

Can you please explain more about this because I think i tried this one already

[mdehoog]

There's some discussion on how to handle ng-model changes in the original Semantic UI PR thread, from this comment onwards: Semantic-Org/Semantic-UI#3256 (comment)

[supzeroIs]

I'm sorry mdehoog but this solution for angularjs2 , how should i fix this for angular 1

[juandarr]

Hi @mdehoog , I have been trying to use onChange function but I have not been able to set a variable value once a change is detected (maybe onChange is not being called at all). Here is the por tion of the code defining the elements and their settings:

        $('#rangestart').calendar({
        onChange: function (date,text) {
            vm.fechaInicial = "init";
        },
        type: 'date',
        firstDayOfWeek: 1,
        endCalendar: $('#rangeend'),

        });

        $('#rangeend').calendar({
        onChange: function (date,text) {
            vm.fechaFinal = "end";
        },
        type: 'date',
        firstDayOfWeek: 1,
        startCalendar: $('#rangestart'),
        });

And here is the html code for #rangeend and #rangestart:

        <label>Inicio</label>
        <div class="ui calendar"  id="rangestart">
          <div class="ui input right icon">
            <i class="icon-calendar icon"></i>
            <input type="text" class="inputs">
          </div>
        </div>
        <label>Fin</label>
        <div class="ui calendar" id="rangeend">
          <div class="ui input right icon">
            <i class="icon-calendar icon"></i>
            <input type="text" class="inputs">
          </div>
        </div>

The settings type, firstDayOfWeek and start/end Calendar work, but for some reason onChange doesn't have any effect changing the value of the variables. Do you have any idea about how to find a solution/debug the problem? I am using angular 1.x. Thanks

[Update] After some trial and error I found that onChange works. Apparently the problem is that since I am using data loaded with angular and this jquery component, some items (data or elements) are loaded in such a way that the data don't flow as expected. For example bringing data from a variable ( loaded from db to the JS controller) to a calendar input: there is a delay when loading a variable in the JS controller from database, a case can appear when the jquery element is ready and the data is not available yet.

I suspect there are many things I don't know about how view/content loading works for Angular/jquery or even JS in general. Any guidance in this regard would be highly appreciated.

[icepeng]

I made Angular2 component that works with ngModel. Hope this one help somebody.
https://gist.github.com/icepeng/b3c13b21a1781a7159a1f0cfe7e47ba3
@mdehoog I made interface that extends JQuery for typescript support. Feel free to use it for create typings into your module.

[dipolediamond]

@icepeng thanks for sharing the Angular 2 component. Life saver. I noticed that the value was not displayed on the input after losing focus on the calendar even though it bound to the model.

However, changing this

writeValue(value: any) {
    this.date = this.formatDate(value);
}

to

writeValue(value: any) {
    this.date = value;
}

displays the value in the input field, howbeit formatted differently.

[icepeng]

@dipolediamond I assume that input value has Date type, any type was my mistake... even Date type was wrong too.

writeValue(value: string) {
  this.date = this.formatDate(new Date(value))
}

This should work, I will update gist after testing.

[anopperl]

but how to do these work in angularjs, i have same problem in semantic ui calendar.. it can not find to ng-model