7171</template >
7272
7373<script >
74- import Datepicker from " ../src/components/datepicker.vue" ;
74+ import Datepicker from ' ../src/components/datepicker.vue'
7575export default {
76- name: " app" ,
76+ name: ' app' ,
7777 components: {
78- Datepicker,
78+ Datepicker
7979 },
80- data () {
80+ data () {
8181 return {
8282 exampleCode:
8383 ' < Datepicker <br> v-model="example.value" <br> :range="example.range" <br> :lang="example.lang" <br> :firstDayOfWeek="example.firstDayOfWeek" <br> :input-class="example.inputClass" <br> :position="example.position" <br> :disabled-start-date="example.disabledStartDate" <br> :text-format="example.textFormat" <br> :date-format="example.dateFormat" <br> :disabled-end-date="example.disabledEndDate"/>' ,
8484 examples: [
8585 {
86- title: " Single" ,
87- inputClass: " exampleDatePicker" ,
88- lang: " tr " ,
89- position: " bottom" ,
86+ title: ' Single' ,
87+ inputClass: ' exampleDatePicker' ,
88+ lang: ' tr ' ,
89+ position: ' bottom' ,
9090 range: false ,
9191 value: null ,
92- firstDayOfWeek: " monday" ,
92+ firstDayOfWeek: ' monday'
9393 },
9494 {
95- title: " Range" ,
96- inputClass: " exampleDatePicker" ,
97- lang: " tr " ,
98- position: " bottom" ,
95+ title: ' Range' ,
96+ inputClass: ' exampleDatePicker' ,
97+ lang: ' tr ' ,
98+ position: ' bottom' ,
9999 range: true ,
100100 value: [null , null ],
101- firstDayOfWeek: " monday" ,
101+ firstDayOfWeek: ' monday'
102102 },
103103 {
104- title: " Custom lang" ,
105- inputClass: " exampleDatePicker" ,
106- lang: " en " ,
107- position: " right" ,
104+ title: ' Custom lang' ,
105+ inputClass: ' exampleDatePicker' ,
106+ lang: ' en ' ,
107+ position: ' right' ,
108108 range: true ,
109109 value: [
110110 new Date (),
111- new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 ),
112- ],
111+ new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 )
112+ ]
113113 },
114114 {
115- title: " First Day Of Week" ,
116- inputClass: " exampleDatePicker" ,
117- lang: " en " ,
118- position: " left" ,
115+ title: ' First Day Of Week' ,
116+ inputClass: ' exampleDatePicker' ,
117+ lang: ' en ' ,
118+ position: ' left' ,
119119 range: true ,
120120 value: [
121121 new Date (),
122- new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 ),
122+ new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 )
123123 ],
124- firstDayOfWeek: " sunday" ,
124+ firstDayOfWeek: ' sunday'
125125 },
126126 {
127- title: " Selected Circle" ,
128- inputClass: " exampleDatePicker" ,
129- lang: " en " ,
130- position: " left" ,
127+ title: ' Selected Circle' ,
128+ inputClass: ' exampleDatePicker' ,
129+ lang: ' en ' ,
130+ position: ' left' ,
131131 range: true ,
132132 value: [
133133 new Date (),
134- new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 ),
134+ new Date (new Date ().getTime () + 9 * 24 * 60 * 60 * 1000 )
135135 ],
136- firstDayOfWeek: " sunday" ,
137- circle: true ,
136+ firstDayOfWeek: ' sunday' ,
137+ circle: true
138138 },
139139 {
140- title: " Disabled Status" ,
141- inputClass: " exampleDatePicker" ,
142- lang: " tr " ,
143- position: " top" ,
140+ title: ' Disabled Status' ,
141+ inputClass: ' exampleDatePicker' ,
142+ lang: ' tr ' ,
143+ position: ' top' ,
144144 disabledStartDate: {
145145 to: new Date (' 01.02.2021' ),
146146 from: new Date (' 02.02.2021' )
147147 },
148- value: new Date (new Date ().getTime () - 5 * 24 * 60 * 60 * 1000 ),
148+ value: new Date (new Date ().getTime () - 5 * 24 * 60 * 60 * 1000 )
149149 },
150150 {
151- title: " Date Options String" ,
152- inputClass: " exampleDatePicker" ,
153- lang: " en " ,
154- position: " right" ,
155- textFormat: " long" ,
156- value: new Date (),
151+ title: ' Date Options String' ,
152+ inputClass: ' exampleDatePicker' ,
153+ lang: ' en ' ,
154+ position: ' right' ,
155+ textFormat: ' long' ,
156+ value: new Date ()
157157 },
158158 {
159- title: " Showed Date Format" ,
160- inputClass: " exampleDatePicker" ,
161- lang: " en " ,
162- position: " left" ,
159+ title: ' Showed Date Format' ,
160+ inputClass: ' exampleDatePicker' ,
161+ lang: ' en ' ,
162+ position: ' left' ,
163163 value: new Date (),
164- dateFormat: { day: " 2-digit" , month: " 2-digit" , year: " numeric" },
164+ dateFormat: { day: ' 2-digit' , month: ' 2-digit' , year: ' numeric' }
165165 },
166166 {
167- title: " Disabled Open Picker" ,
168- inputClass: " exampleDatePicker" ,
169- lang: " en " ,
170- position: " left" ,
167+ title: ' Disabled Open Picker' ,
168+ inputClass: ' exampleDatePicker' ,
169+ lang: ' en ' ,
170+ position: ' left' ,
171171 value: new Date (),
172172 disabled: true ,
173- dateFormat: { day: " 2-digit" , month: " 2-digit" , year: " numeric" },
174- },
175- ],
176- };
173+ dateFormat: { day: ' 2-digit' , month: ' 2-digit' , year: ' numeric' }
174+ }
175+ ]
176+ }
177177 }
178- };
178+ }
179179 </script >
180180
181181<style >
@@ -341,4 +341,4 @@ export default {
341341 width : 95% ;
342342 font-size : 13px ;
343343}
344- </style >
344+ </style >
0 commit comments