DatePicker with AspNetCore Typescript

Help Requests
1

Hi all,

i’m trying to use a datepicker with aurelia typescript aspnet.
I’m not able to take the value of the date. I tryied 3-4 differents methods but it’doesn’t seems working.

The Code:

<div class="form-group">
   <div class="col-sm-2">
      <label class="control-label">Date</label>
   </div>
   <div class="col-sm-10">
      <div class="input-group">
         <div class="input-group-addon">
            <i class="fa fa-calendar"></i>
         </div>
         <input type="text" id="datepicker" model.bind="myDateValue" placeholder="mm/dd/yyyy" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask="">
      </div>
   </div>
</div>

for the class i use a simple variable:

myDateValue : Date;

I’m trying to take the value with the “change.delegate” event… with a input with a “type=‘date’”:

<input id="datepicker"
   value.bind="test" type="date" class="form-control" date-format="{0:yyyy-MM-dd}"  min="2018-01-01" max="2018-12-31"  >
</div>

but this never enter in the method.

someone could help me?

Thanks,
Andrea

2

It depends on the datepicker you’re using.

3

I have tryed a lot of different types.
If you want paste a your small and simple tutorial … it is welcome :smiley:

4

I’ve run into this with a datepicker plugin/library. Not sure if it’s the same issue but for me the issue with the change.delegate not firing was due to how the plugin was injecting the updated value to the input. In my case they were using jquery’s $('input').val('new value') which does not trigger a changed event. I had to add a hook in to fire a trigger for the change event myself so that whenever the datepicker plugin updated the value, it would manually trigger the change event $('input').trigger('change'). The same applies for when you are changing the binding value using aurelia.

You can see this thread for more info: Missing change event when changing model on input value.bind

5

I used something called pikaday because it was simple and didn’t need jquery to work. My project uses WebPack to deploy.

I added pikaday as a dev dependency in my package.json. Then I created a custom attribute called DatePicker.ts

    import { inject, customAttribute } from 'aurelia-framework';
import pikaday from 'pikaday';

@customAttribute('datepicker')
@inject(Element)
export class DatePicker {
    onChange: any;

    constructor(private element: Element) {
        this.element = element;
    }

    attached() {
        var picker = new pikaday({ field: this.element });
        this.onChange = e => fireEvent(e.target, 'input');
        this.element.addEventListener('change', this.onChange);
    }

    detached() {
        this.element.removeEventListener('change', this.onChange);
    }
}

function createEvent(name) {
    var event = document.createEvent('Event');
    event.initEvent(name, true, true);
    return event;
}

function fireEvent(element, name) {
    var event = createEvent(name);
    element.dispatchEvent(event);
}

Html looks like this:

    <require from="../attributes/DatePicker"></require>

        <div class="form-group">
            <label class="col-md-2 control-label">Effective Date:</label>
            <div class="col-md-2">
                <input datepicker="effectiveDate" class="form-control" type="text" id="datepicker" placeholder="Effective Date" value.bind="effectiveDate">
            </div>
        </div>

Imports in my boot.ts look like this:

import 'isomorphic-fetch';
import { Aurelia, PLATFORM } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
import 'pikaday';
import 'pikaday/css/pikaday.css';
import 'font-awesome/css/font-awesome.css';
declare const IS_DEV_BUILD: boolean;

Hopefully this helps.