import { Component , OnInit } from '@angular/core' ; import { IMyDpOptions , IMyDateModel , IMyCalendarViewChanged } from '../../src/my-date-picker/interfaces' ; declare var require ; const inlineSampleTpl = require ( './sample-date-picker-inline.html' ) ; @ Component ( { selector : 'sample-date-picker-inline' , template : inlineSampleTpl } ) export class SampleDatePickerInline implements OnInit { private myDatePickerInlineOptions : IMyDpOptions = { inline : true , disableUntil : { year : 0 , month : 0 , day : 0 } , disableDays : [ { year : 0 , month : 0 , day : 0 } ] , showWeekNumbers : true , selectorHeight : '232px' , selectorWidth : '252px' , allowSelectionOnlyInCurrentMonth : false } ; private selectedDateInline : Object = { } ; private selectedTextInline : string = '' ; private border : string = 'none' ; private locale : string = 'en' ; private selectorSizes : Array < string > = new Array ( 'normal' , 'small' ) ; private locales : Array < string > = new Array ( 'en' , 'fr' , 'ja' , 'fi' , 'es' , 'hu' , 'sv' , 'nl' , 'ru' , 'uk' , 'no' , 'tr' , 'pt-br' , 'de' , 'it' , 'it-ch' , 'pl' , 'my' , 'sk' , 'sl' , 'zh-cn' , 'he' , 'ro' , 'ca' , 'id' , 'en-au' , 'am-et' , 'cs' , 'el' , 'kk' , 'th' , 'ko-kr' , 'da' , 'lt' , 'vi' , 'bn' , 'bg' , 'hr' , 'ar' , 'is' , 'de-ch' , 'fr-ch' , 'tw' , 'lv' , 'et' ) ; constructor ( ) { } ngOnInit ( ) { console . log ( 'onInit(): SampleDatePickerInline' ) ; } onChangeLocale ( locale ) { this . locale = locale ; } onSelectorSize ( size ) { let copy = this . getCopyOfOptions ( ) ; if ( size === 'normal' ) { copy . selectorHeight = '232px' ; copy . selectorWidth = '252px' ; this . myDatePickerInlineOptions = copy ; } else { copy . selectorHeight = '200px' ; copy . selectorWidth = '220px' ; this . myDatePickerInlineOptions = copy ; } } onDisablePast ( checked ) { let date = new Date ( ) ; date . setDate ( date . getDate ( ) - 5 ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableUntil = checked ? { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } : { year : 0 , month : 0 , day : 0 } ; this . myDatePickerInlineOptions = copy ; } onDisableFuture ( checked ) { let date = new Date ( ) ; date . setDate ( date . getDate ( ) + 5 ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableSince = checked ? { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } : { year : 0 , month : 0 , day : 0 } ; this . myDatePickerInlineOptions = copy ; } onDisableSingleDates ( checked ) { let date = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableDays = checked ? [ { year : date . getFullYear ( ) , month : date . getMonth ( ) + 2 , day : 1 } , { year : date . getFullYear ( ) , month : date . getMonth ( ) + 2 , day : 3 } ] : [ ] ; this . myDatePickerInlineOptions = copy ; } onDisableToday ( checked ) { let date = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; copy . disableDays = checked ? [ { year : date . getFullYear ( ) , month : date . getMonth ( ) + 1 , day : date . getDate ( ) } ] : [ ] ; this . myDatePickerInlineOptions = copy ; } onDisableRange ( checked ) { let bdate = new Date ( ) ; let edate = new Date ( ) ; let copy = this . getCopyOfOptions ( ) ; bdate . setDate ( bdate . getDate ( ) - 3 ) ; edate . setDate ( edate . getDate ( ) + 3 ) ; copy . disableDateRanges = checked ? [ { begin : { year : bdate . getFullYear ( ) , month : bdate . getMonth ( ) + 1 , day : bdate . getDate ( ) } , end : { year : edate . getFullYear ( ) , month : edate . getMonth ( ) + 1 , day : edate . getDate ( ) } } ] : [ ] ; this . myDatePickerInlineOptions = copy ; } onDisableWeekends ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . disableWeekends = checked ; this . myDatePickerInlineOptions = copy ; } onMarkCurrentDay ( checked ) { let copy = this . getCopyOfOptions ( ) ; copy . markCurrentDay = checked ; this . myDatePickerInlineOptions = copy ; } onDateChanged ( event ) { console . log ( 'onDateChanged(): ' , event . date , ' - jsdate: ' , new Date ( event . jsdate ) . toLocaleDateString ( ) , ' - formatted: ' , event . formatted , ' - epoc timestamp: ' , event . epoc ) ; if ( event . formatted !== '' ) { this . selectedTextInline = 'Formatted: ' + event . formatted + ' - epoc timestamp: ' + event . epoc ; this . border = '1px solid #CCC' ; } else { this . selectedTextInline = '' ; this . border = 'none' ; } } onCalendarViewChanged ( event ) { console . log ( 'onCalendarViewChanged(): Year: ' , event . year , ' - month: ' , event . month , ' - first: ' , event . first , ' - last: ' , event . last ) ; } getCopyOfOptions ( ) { return JSON . parse ( JSON . stringify ( this . myDatePickerInlineOptions ) ) ; } }