Time-Picker using jQuery in Aurelia

问题

I want to have a custom Time-Picker in Aurelia. A part of View you can see here:

<template>
<require from="time-picker"></require>
.
.
<input timepicker id="time-setting" value.bind="currentTime">

And time-picker.ts is here:

import { customAttribute, inject } from "aurelia-framework";
import $ from "jquery";
import "pickadate/lib/compressed/picker.time";

@customAttribute("timepicker")
@inject(Element)
export class TimePicker {

  private usePickADate: boolean;

  constructor(private element: Element) {
  }

  public attached() {
      $(this.element).pickatime()
        .on("change", (e: any) => {
          fireEvent(e.target, "input");
        });
  }

  public detached() {
      $(this.element).pickatime("picker")
        .off("change")
        .stop();
    }
}

function createEvent(name: string) {
  const event = document.createEvent("Event");
  event.initEvent(name, true, true);

  return event;
}

function fireEvent(element: EventTarget, name: string) {
  const event = createEvent(name);
  element.dispatchEvent(event);
}

It doesn't work and I don't understand where is the problem. I found some related code in web and programmed my code like them. Could you please help me?

回答1:

You question is way too vague. What isn't working exactly? What steps have you taken exactly? Based on the code you have posted it seems as though you might be experiencing a number of problems.

Here are the steps I used to get a working prototype: I started off with a blank cli generated project. au new timepickertest

I chose the RequireJS module loader and the Default TypeScript setup. After that was done running, I tried to use the cli to install the requisite packages as well: au install jquery pickadate

This seems to install the packages correctly regarding npm but not aurelia, so once this was complete, I needed to update the aurelia_project/aurelia.json file. In the dependencies section of the file, I had to add the following:

  "jquery",
  {
      "name": "picker",
      "path": "../node_modules/pickadate/lib",
      "main": "compressed/picker",
      "deps": ["jquery"],
      "resources": ["themes/default.css"]
  },
  {
      "name": "pickatime",
      "path": "../node_modules/pickadate/lib",
      "main": "compressed/picker.time",
      "deps": ["picker"],
      "resources": ["themes/default.time.css"]
  }

After that was complete, I updated src\app.ts to contain:

export class App {}

src\app.html to contain

<template>
  <require from="picker/themes/default.css"></require>
  <require from="pickatime/themes/default.time.css"></require>
  <require from="time-picker"></require>
  <input timepicker type="text">
</template>

I also created src\time-picker.ts with the following contents:

import { customAttribute, inject } from 'aurelia-framework'
import * as $ from 'jquery';
import 'picker';
import 'pickatime';

@customAttribute("timepicker")
@inject(Element)
export class TimePicker {
  constructor(private element: Element) {
  }

  public attached() {
      $(this.element).pickatime()
        .on("change", (e: any) => {
          this.fireEvent(e.target, "input");
        });
  }

  createEvent(name: string) {
    const event = document.createEvent("Event");
    event.initEvent(name, true, true);
 console.log(name, event);
    return event;
  }

  fireEvent(element: EventTarget, name: string) {
    const event = this.createEvent(name);
    element.dispatchEvent(event);

    console.log(element, name);
  }
}

I have a number of console.log statements to verify that the methods are getting invoked as expected and with the expected values. Past that, I don't know what you are trying to accomplish as you didn't include that in your question.

If this doesn't answer your question, please include more details as to what you have so far, what else you have tried and what exactly "It doesn't work and I don't understand where is the problem." means.

来源：https://stackoverflow.com/questions/45285486/time-picker-using-jquery-in-aurelia

标签

typescript

aurelia

timepicker