@progress/kendo-vue-dateinputs/datetimepicker/DateTimeSelector.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),C=require("@progress/kendo-vue-intl"),i=require("../messages/main.js"),c=require("@progress/kendo-vue-buttons"),N=require("../calendar/components/Calendar.js"),$=require("../timepicker/TimePart.js"),n=require("../utils.js"),B=require("@progress/kendo-date-math"),r=require("@progress/kendo-vue-common"),p=require("../defaults.js"),f=require("../timepicker/utils.js");function d(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!a.isVNode(e)}const M=a.defineComponent({name:"KendoDateTimeSelector",props:{value:Date,disabled:{type:Boolean,default:!1},cancelButton:{type:Boolean,default:!0},min:{type:Date,default:n.MIN_DATE},max:{type:Date,default:n.MAX_DATE},maxTime:{type:Date,default:function(){return r.cloneDate(n.MAX_TIME)}},minTime:{type:Date,default:function(){return r.cloneDate(n.MIN_TIME)}},weekNumber:{type:Boolean,default:!1},steps:{type:Object,default:function(){return{}}},focusedDate:Date,format:[String,Object],calendar:Object,onChange:Function,onReject:Function,onFocus:Function,onBlur:Function,onKeydown:Function},created(){this._calendarWrap=null,this.currentTab="date",this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE},inject:{kendoLocalizationService:{default:null}},data(){return{currentTab:null,dateValue:null,timeValue:Date}},computed:{hasDateValue(){return this.dateValue!==null},computedMinTime(){return this.$props.minTime!==void 0?this.$props.minTime:this.normalizeRange(this.$props.min,this.dateValue)},computedMaxTime(){return this.$props.maxTime!==void 0?this.$props.maxTime:this.normalizeRange(this.$props.max,this.dateValue)}},mounted(){this._acceptButton=this.$refs.acceptButton,this._calendar=this.$refs.calendar,this._calendarWrap=this.$refs.calendarWrap,this._cancelButton=this.$refs.cancelButton,this._timePart=this.$refs.timePart,this.focus({preventScroll:!0})},updated(){this.shouldFocusPart&&this.focus({preventScroll:!0}),this.shouldFocusPart=!1},setup(){const e=a.ref(null),t=a.inject("kendoLocalizationService",{});return{kendoAnchorRef:e,kendoLocalizationService:t}},render(){const{disabled:e,cancelButton:t,min:s,max:g,weekNumber:T,focusedDate:b,format:k,steps:V}=this.$props,v=r.classNames({"k-date-tab":this.currentTab==="date","k-time-tab":this.currentTab==="time","k-disabled":e},"k-datetime-wrap"),u=C.provideLocalizationService(this),h=u.toLanguageString(i.date,i.messages[i.date]),m=u.toLanguageString(i.time,i.messages[i.time]),o=u.toLanguageString(i.dateTimePickerCancel,i.messages[i.dateTimePickerCancel]),l=u.toLanguageString(i.dateTimePickerSet,i.messages[i.dateTimePickerSet]),D=a.createVNode(N.Calendar,{ref:"calendar",min:s,max:g,weekNumber:T,focusedDate:b,disabled:e||this.currentTab!=="date",value:this.dateValue,onChange:this.handleCalendarValueChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null),y=r.getTemplate.call(this,{h:a.h,template:this.$props.calendar,defaultRendering:D});return a.createVNode("div",{onKeydown:this.handleKeyDown,class:v,tabindex:-1},[a.createVNode("div",{class:"k-datetime-buttongroup"},[a.createVNode(c.ButtonGroup,{width:"100%"},{default:()=>[a.createVNode(c.Button,{type:"button",selected:this.currentTab==="date",togglable:!0,onClick:this.handleDateClick},d(h)?h:{default:()=>[h]}),a.createVNode(c.Button,{type:"button",selected:this.currentTab==="time",togglable:!0,onClick:this.handleTimeClick},d(m)?m:{default:()=>[m]})]})]),a.createVNode("div",{class:"k-datetime-selector"},[a.createVNode("div",{class:"k-datetime-calendar-wrap",ref:"calendarWrap"},[y]),a.createVNode("div",{class:"k-datetime-time-wrap"},[a.createVNode($.TimePart,{key:1,onNowclick:this.handleNowClick,disabled:e||this.currentTab!=="time",ref:"timePart",min:this.computedMinTime||n.MIN_TIME,max:this.computedMaxTime||n.MAX_TIME,value:this.timeValue,format:k,steps:V,onChange:this.handleTimeListContainerChange,onFocus:this.handleFocus,onBlur:this.handleBlur},null)])]),a.createVNode("div",{class:"k-datetime-footer k-actions k-actions-stretched"},[t&&a.createVNode(c.Button,{type:"button",ref:"cancelButton",class:"k-time-cancel",onClick:this.handleReject,title:o,"aria-label":o},d(o)?o:{default:()=>[o]}),a.createVNode(c.Button,{type:"button",ref:"acceptButton",disabled:!this.hasDateValue,themeColor:"primary",class:"k-time-accept",onClick:this.handleAccept,title:l,"aria-label":l},d(l)?l:{default:()=>[l]})])])},methods:{handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},focus(e){this.$nextTick(()=>{this.currentTab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.currentTab==="date"&&t&&t.focus(e)})},calendarElement(){return this._calendar&&this._calendar.$el?this._calendar:null},normalizeRange(e,t){return B.isEqualDate(e,t||n.getToday())?e:null},hasActiveButton(){return this._acceptButton?r.canUseDOM&&(document.activeElement===this._acceptButton.$el||document.activeElement===this._cancelButton.$el):!1},mergeTime(e,t){return e&&t?n.setTime(t,e):t},mergeDate(e,t){return e?n.setTime(e||n.getToday(),t):t},move(e){if(e==="right"&&this.currentTab==="time"||e==="left"&&this.currentTab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.currentTab=t},handleReject(e){this.dateValue=this.$props.value,this.timeValue=this.$props.value||p.MIDNIGHT_DATE;const t=this.mergeDate(this.$props.value,this.$props.value||p.MIDNIGHT_DATE),s={event:e,target:this,value:t};this.$emit("reject",s)},handleAccept(e,t){if(!this.dateValue||!this.timeValue||!this.hasDateValue)return;const s=this.mergeDate(this.dateValue,t||this.timeValue);this.$emit("change",{event:e,value:s,target:this})},handleNowClick(e){this.timeValue=f.getNow(),this.handleAccept(e,f.getNow())},handleCalendarValueChange(e){e.event.stopPropagation(),this.dateValue=e.value,this.currentTab="time",this.shouldFocusPart=!0},handleTimeListContainerChange(e){this.timeValue=e},handleDateClick(e){e.stopPropagation(),this.move("left")},handleTimeClick(e){e.stopPropagation(),this.move("right")},handleKeyDown(e){const{keyCode:t,altKey:s}=e;switch(this.$emit("keydown",e),t){case r.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case r.Keys.left:if(!s)return;this.move("left");return;case r.Keys.right:if(!s)return;this.move("right");return;default:return}},handleTimePartMount(e){this.timeValue=e}}});exports.DateTimeSelector=M;