import { Component , OnInit , ViewChild } from '@angular/core' ; import { INgxMyDpOptions , IMyDateModel , IMyInputFieldChanged , IMyCalendarViewChanged , IMyMarkedDate , IMyDate , IMyDefaultMonth } from '../../src/ngx-my-date-picker/interfaces' ; import { NgxMyDatePickerDirective } from '../../src/ngx-my-date-picker' ; declare var require ; const normalSampleTpl = require ( './sample-date-picker-ngmodel.html' ) ; @ Component ( { selector : 'sample-date-picker-ngmodel' , template : normalSampleTpl } ) export class SampleDatePickerNgModel implements OnInit { private myDatePickerOptions : INgxMyDpOptions = { dateFormat : 'dd.mm.yyyy' , firstDayOfWeek : 'mo' , sunHighlight : true , markCurrentDay : true , alignSelectorRight : false , openSelectorTopOfInput : false , minYear : 1970 , maxYear : 2200 , showSelectorArrow : true , monthSelector : true , yearSelector : true , satHighlight : false , highlightDates : [ ] , disableDates : [ ] , disableHeaderButtons : true , showWeekNumbers : false , disableDateRanges : [ { begin : { year : 2016 , month : 10 , day : 5 } , end : { year : 2016 , month : 10 , day : 7 } } , { begin : { year : 2016 , month : 10 , day : 10 } , end : { year : 2016 , month : 10 , day : 12 } } ] , disableWeekdays : [ ] , markDates : [ ] , markWeekends : < IMyMarkedDate > { } , selectorHeight : '232px' , selectorWidth : '252px' , closeSelectorOnDateSelect : true , closeSelectorOnDocumentClick : true , allowSelectionOnlyInCurrentMonth : true , appendSelectorToBody : false , focusInputOnDateSelect : true } ; @ ViewChild ( 'dp' ) ngxdp : NgxMyDatePickerDirective ; private selectedTextNormal : string = '' ; private disabled : boolean = false ; private validDate : boolean = false ; private inputText : string = "" ; private model : string = null ; private defMonth : IMyDefaultMonth = { defMonth : '' } ; private selectorSizes : Array < string > = new Array ( 'normal' , 'small' , 'big' ) ; constructor ( ) { } clearDate ( ) { this . ngxdp . clearDate ( ) ; } onShowTodayButton ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . showTodayBtn = checked ; this . myDatePickerOptions = copy ; } onOpenSelectorTopOfInput ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . openSelectorTopOfInput = checked ; this . myDatePickerOptions = copy ; } onAlignSelectorRight ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . alignSelectorRight = checked ; this . myDatePickerOptions = copy ; } onShowSelectorArrow ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . showSelectorArrow = checked ; this . myDatePickerOptions = copy ; } onMonthSelector ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . monthSelector = checked ; this . myDatePickerOptions = copy ; } onYearSelector ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . yearSelector = checked ; this . myDatePickerOptions = copy ; } onDisableToday ( checked ) { let d = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableDates = checked ? [ { year : d . getFullYear ( ) , month : d . getMonth ( ) + 1 , day : d . getDate ( ) } ] : [ ] ; this . myDatePickerOptions = copy ; } onMarkToday ( checked ) { let d = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; copy . markDates = checked ? [ { dates : [ { year : d . getFullYear ( ) , month : d . getMonth ( ) + 1 , day : d . getDate ( ) } ] , color : '#C30000' } ] : [ ] ; this . myDatePickerOptions = copy ; } onMarkWeekends ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . markWeekends = checked ? { marked : true , color : 'blue' } : { marked : false , color : '' } ; this . myDatePickerOptions = copy ; } onHighlighSaturday ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . satHighlight = checked ; this . myDatePickerOptions = copy ; } onHighlighSunday ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . sunHighlight = checked ; this . myDatePickerOptions = copy ; } onHighlightDates ( checked ) { let d = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; let dates = [ ] ; dates . push ( { year : d . getFullYear ( ) , month : d . getMonth ( ) + 1 , day : d . getDate ( ) } ) ; d . setDate ( d . getDate ( ) + 1 ) ; dates . push ( { year : d . getFullYear ( ) , month : d . getMonth ( ) + 1 , day : d . getDate ( ) } ) ; dates . push ( { year : 2017 , month : 6 , day : 1 } ) ; copy . highlightDates = checked ? dates : [ ] ; this . myDatePickerOptions = copy ; } onDisableWeekends ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . disableWeekends = checked ; this . myDatePickerOptions = copy ; } onDisableHeaderButtons ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . disableHeaderButtons = checked ; this . myDatePickerOptions = copy ; } onShowWeekNumbers ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . showWeekNumbers = checked ; this . myDatePickerOptions = copy ; } onCloseSelectorOnDateSelect ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . closeSelectorOnDateSelect = checked ; this . myDatePickerOptions = copy ; } onCloseSelectorOnDocumentClick ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . closeSelectorOnDocumentClick = checked ; this . myDatePickerOptions = copy ; } onAllowSelectionOnlyCurrentMonth ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . allowSelectionOnlyInCurrentMonth = checked ; this . myDatePickerOptions = copy ; } onAppendSelectorToBody ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . appendSelectorToBody = checked ; this . myDatePickerOptions = copy ; } onDisableWednesday ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . disableWeekdays = checked ? [ 'we' ] : [ ] ; this . myDatePickerOptions = copy ; } onDisable24Day ( checked ) { let d = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableDates = checked ? [ { year : 0 , month : 0 , day : 24 } ] : [ ] ; this . myDatePickerOptions = copy ; } onFocusInputOnDateSelect ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . focusInputOnDateSelect = checked ; this . myDatePickerOptions = copy ; } onDisableInput ( checked ) { this . disabled = checked ; } onSelectorSize ( size ) { let copy = this . getCopyOfOptions ( ) ; if ( size === 'normal' ) { copy . selectorHeight = '232px' ; copy . selectorWidth = '252px' ; this . myDatePickerOptions = copy ; } else if ( size === 'small' ) { copy . selectorHeight = '200px' ; copy . selectorWidth = '220px' ; this . myDatePickerOptions = copy ; } else { copy . selectorHeight = '260px' ; copy . selectorWidth = '290px' ; this . myDatePickerOptions = copy ; } } getCopyOfOptions ( ) { return JSON . parse ( JSON . stringify ( this . myDatePickerOptions ) ) ; } ngOnInit ( ) { console . log ( 'onInit(): SampleDatePickerNgModel' ) ; } onDateChanged ( event ) { console . log ( 'onDateChanged(): ' , event . date , ' - jsdate: ' , new Date ( event . jsdate ) . toLocaleDateString ( ) , ' - formatted: ' , event . formatted , ' - epoc timestamp: ' , event . epoc ) ; if ( event . formatted !== '' ) { this . selectedTextNormal = 'Formatted: ' + event . formatted + ' - epoc timestamp: ' + event . epoc ; this . validDate = true ; this . inputText = event . formatted ; } else { this . selectedTextNormal = '' ; } } onInputFieldChanged ( event ) { console . log ( 'onInputFieldChanged(): Value: ' , event . value , ' - dateFormat: ' , event . dateFormat , ' - valid: ' , event . valid ) ; this . validDate = event . valid ; this . inputText = event . value ; } onCalendarToggle ( event ) { console . log ( 'onCalendarToggle(): Reason: ' , event ) ; } onCalendarViewChanged ( event ) { console . log ( 'onCalendarViewChanged(): Year: ' , event . year , ' - month: ' , event . month , ' - first: ' , event . first , ' - last: ' , event . last ) ; } }