Ngx-bootstrap: feat(datepicker): add DateTimePicker

Created on 27 May 2016 · 18Comments · Source: valor-software/ngx-bootstrap

Something similar to https://github.com/Eonasdan/bootstrap-datetimepicker would be immensely useful. I'm not sure if it's an edge case, but I'd love for this to be doable at least. :)

comp(datepicker) enhancement

Source

yusijs

👍19

Most helpful comment

any update on this feature ?

touqeershafi on 13 Apr 2017

👍15

All 18 comments

@yusijs I just implemented something similar. It's very basic and it makes use of the ng2-bootstrap datepicker and timepicker.

I don't have this in any commit, but here is the code :

import { Component, OnInit, Input, Self } from '@angular/core';
import { NgModel, ControlValueAccessor } from '@angular/common';
import { TimepickerComponent } from 'ng2-bootstrap';
import { DATEPICKER_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';


@Component({
    selector: 'date-picker',
    template: require('./date-picker.component.html'),
    styles: [require('./date-picker.component.scss')],
    directives: [DATEPICKER_DIRECTIVES, TimepickerComponent]
})

export class DateTimePickerComponent implements ControlValueAccessor, OnInit {

    @Input() milliseconds: boolean;
    public cd: NgModel;
    public onChange: any = Function.prototype;
    public onTouched: any = Function.prototype;
    internalDate: Date;
    internalTime: Date;
    internalDateTime: Date;

    public constructor(@Self() cd: NgModel) {

        this.cd = cd;
        cd.valueAccessor = this;
    }


    ngOnInit() {

        this.internalDate = this.internalDateTime;
        this.internalTime = this.internalDateTime;
    }


    writeValue(obj: any) : void {

        if (obj === this.internalDateTime) {
            return;
        }
        if (obj && obj instanceof Date) {
            this.internalDateTime = obj;
            return;
        }
        this.internalDateTime = obj ? new Date(obj) : void 0;
    }


    registerOnChange(fn: any) : void {

        this.onChange = fn;
    }


    registerOnTouched(fn: any) : void {

        this.onTouched = fn;
    }


    updateDateTime() {

        let newDate: Date = new Date();
        newDate.setTime(this.internalDate.getTime());
        newDate.setHours(this.internalTime.getHours());
        newDate.setMinutes(this.internalTime.getMinutes());
        newDate.setSeconds(this.internalTime.getSeconds());
        newDate.setMilliseconds(this.internalTime.getMilliseconds());
        this.internalDateTime = newDate;
        if (this.milliseconds) {
            this.cd.viewToModelUpdate(newDate.getTime());
        }
        else {
            this.cd.viewToModelUpdate(newDate);
        }
    }


    get date(): Date {

        return this.internalDate;
    }

    set date(date: Date) {

        this.internalDate = date;
        this.updateDateTime();
    }


    get time(): Date {

        return this.internalTime;
    }

    set time(time: Date) {

        this.internalTime = time;
        this.updateDateTime();
    }
}

and template looks like this :

<div class="row">
    <div class="col-xs-12">
        <datepicker [(ngModel)]="date" [minDate]="minDate" [showWeeks]="false"></datepicker>
        <timepicker [(ngModel)]="time" [hourStep]="1" [minuteStep]="15" [showMeridian]="false"></timepicker>
    </div>
</div>

Usage is done so :

<date-picker *ngIf="isEditable" [(ngModel)]="flyer.startDate" [milliseconds]="true"></date-picker>

You could then accept all inputs from both components and pass them along as needed, styling it the way you like, etc. For the project I am working on this was sufficient and there was no need to do anything more.

Hope this helps!

jppellerin on 27 May 2016

👍3

Thanks - I'll give it a try a bit later today! Do you have the .scss file as well? I'm terrible with styles :3

yusijs on 27 May 2016

@yusijs This is the contents of that file :

As you can see... I am also bad with styling.

jppellerin on 27 May 2016

@jppellerin It's like we're soulmates. :+1:

yusijs on 27 May 2016

😄2

I started putting something a bit more official together - hopefully to lead towards a pull request soon-ish. Pretty busy of late, so I cannot predict when I will be finished.

jppellerin on 31 May 2016

@jppellerin if you have this on a git repo, I could assist?

yusijs on 31 May 2016

Thanks for issue, I was thinkin
Should I include time picker in datepicker or not :)
thanks for an issue! :)