How to set the date value to server timezone?

[Ivan Halim]

this is my datepicker component <template>

<div class="evo-component" v-show="!hidden">

<ejs-datepicker

:floatLabelType="floatLabelType"

:showClearButton="showClearButton"

:max="max"

:min="min"

:placeholder="placeholder"

:readonly="readonly"

:required="required"

:format="format"

:change="onChange"

:allowEdit="allowEdit"

:name="name"

:strictMode="true"

v-show="!hidden"

v-model="localValue"

:locale="locale"

serverTimezoneOffset=7

>ejs-datepicker>

<div class="error-element">div>

div>

template>

<script>

import Vue from "vue";

import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

Vue.use(DatePickerPlugin);

export default {

name: "EvoDatePicker",

props: {

value: "",

name: {

type: String,

default: null,

},

placeholder: {

type: String,

default: "Choose Value",

},

readonly: {

type: Boolean,

default: false,

},

required: {

type: Boolean,

default: false,

},

min: {

type: Date,

},

max: {

type: Date,

},

format: {

type: String,

},

allowEdit: {

type: Boolean,

default: true,

},

hidden: {

type: Boolean,

default: false,

},

locale:{

type:String

}

},

data() {

return {

localValue: this.value,

showClearButton: false,

floatLabelType: "Auto",

};

},

watch: {

value(value) {

this.localValue = value;

},

localValue(value) {

this.$emit("input", value);

},

},

methods: {

onChange: function (args) {

this.$emit("change", args);

},

},

};

script> this is my parent page

<template>

<div>

<b-breadcrumb :items="breadcrumbItems">b-breadcrumb>

<div id="vp">

<div class="col-lg-12 control-section">

<div class="row">

<EvoPanel title="Prospect">

<div class="col-md-6">

<EvoTextField

placeholder="Prospect.No"

v-model="Pros.CIFNo"

:readonly="true"

>EvoTextField>

<EvoDatePicker

placeholder="Application Date"

name="CreatedDate"

v-model="Pros.CreatedDate"

:readonly="true"

/>

<EvoComboBox

placeholder="Branch"

:datareff="Branch"

:fields="{

text: 'AccessDesc',

value: 'AccessId',

groupBy: 'Parent1',

}"

v-model="Pros.BranchId"

>EvoComboBox>

<EvoTextField

placeholder="Full Name"

:required="true"

v-model="Pros.CustName"

:readonly="false"

name="FullName"

@change="onChange"

>EvoTextField>

<EvoTextField

placeholder="Place of Birth"

:required="true"

v-model="Pros.POB"

:readonly="false"

name="POB"

@change="onChange"

>EvoTextField>

<EvoRadio

ref="Gender"

label="Gender"

:RadioList="GenderList"

name="Gender"

v-model="Pros.Gender"

/>

div>

<div class="col-md-6">

<EvoRadio

label="Customer Type"

:RadioList="CustTypeList"

name="CustType"

:required="true"

v-model="Pros.CustExists"

/>

<EvoDatePicker

placeholder="Date of Birth"

v-model="Pros.DOB"

:readonly="false"

:required="true"

name="DOB"

/>

<EvoComboBox

placeholder="Nationality"

:datareff="NationalityList"

v-model="Pros.Nationality"

>EvoComboBox>

<EvoComboBox

placeholder="Product Type"

:datareff="ProductType"

:fields="{ text: 'PTDesc', value: 'PTCode' }"

v-model="Pros.PTCode "

:readonly="false"

>EvoComboBox>

<EvoComboBox

placeholder="Purpose Of Use"

:datareff="Purpose"

v-model="Pros.PurposeOfUseId"

:readonly="false"

>EvoComboBox>

<EvoTextField

placeholder="Sales Name"

:required="true"

v-model="Pros.CreatedBy"

:readonly="false"

>EvoTextField>

div>

EvoPanel>

div>

div>

<div class="card-footer text-center">

<ejs-button cssClass="e-success" v-on:click.native="autosave"

>Saveejs-button

>

<ejs-button cssClass="e-success" v-on:click.native="setRadio"

>Update RadioGroupejs-button

>

div>

div>

div>

template>

<script>

import Vue from "vue";

import { GET_DATA } from "@/store/constants";

import loginInfo from "@/store/modules/auth/state";

import EvoComboBox from "@/components/Common/ComboBoxComponent";

import EvoCheck from "@/components/Common/CheckBoxComponent";

import EvoPanel from "@/components/Common/AccordionComponent.vue";

import EvoRadio from "@/components/Common/RadioGroupComponent.vue";

import EvoNumberField from "@/components/Common/NumericTextBoxComponent.vue";

import EvoMask from "@/components/Common/MaskedTextBoxComponent.vue";

import EvoTextField from "@/components/Common/TextBoxComponent.vue";

import EvoDatePicker from "@/components/Common/DatePickerComponent.vue";

export default Vue.extend({

props: [],

components: {

EvoComboBox,

EvoCheck,

EvoPanel,

EvoRadio,

EvoNumberField,

EvoMask,

EvoTextField,

EvoDatePicker,

},

data: function () {

return {

breadcrumbItems: [

{

text: "Main",

to: { name: "MainMenu" },

},

{

text: "Pipeline",

rel='nofollow' href: "#",

active: true,

},

],

Pros: {},

session: {},

Branch: [],

ProductType: [],

Purpose: [],

NationalityList: [],

GenderList: [],

CustTypeList: [],

};

},

mounted: function () {

const param = [

this.JParam(

"V",

"1",

"",

"AccessId,AccessDesc,Parent1",

"VW_BRANCH",

null,

null,

null

),

this.JParam(

"V",

"1",

"",

"PTCode,PTDesc",

"rfProductType",

"Active=1",

"",

null,

null

),

this.JParam(

"V",

"1",

"",

"Code,Descr",

"rfPurposeOfUse",

"Active=1",

"",

null,

null

),

this.JParam(

"V",

"1",

"",

"Code,Descr",

"rfNationality",

"Active=1",

"",

null,

null

),

this.JParam(

"V",

"1",

"",

"Code,Descr",

"rfJenisKelamin",

"Active=1",

"",

null,

null

),

this.JParam(

"V",

"1",

"",

"Code,Descr",

"rfCustExists",

"Active=1",

"",

null,

null

),

];

this.$store

.dispatch(GET_DATA, param)

.then((data) => {

console.log(data);

if (data[0].length > 0) this.Branch = data[0];

//rfProductType

if (data[1].length > 0) this.ProductType = data[1];

//rfPurpose

if (data[2].length > 0) this.Purpose = data[2];

//rfIDType

//rfNationality

if (data[3].length > 0) this.NationalityList = data[3];

//rfJenisKelamin

if (data[4].length > 0) this.GenderList = data[4];

//rfCustType

if (data[5].length > 0) this.CustTypeList = data[5];

//rfReligion

//Assign default value if null

this.session = loginInfo.loginInfo;

if (this.Pros.CreatedDate == null) {

this.Pros.CreatedDate = new Date();

}

if (this.Pros.CreatedBy == null) {

this.Pros.CreatedBy = this.session.UserName;

}

if (this.Pros.CIFNo == null) {

this.Pros.CIFNo =

"PROSPECT" +

Math.floor(10000000 + Math.random() * 90000000).toString();

}

})

.catch((err) => {

console.log("Error" + err);

});

},

methods: {

onChange(args) {

console.log("Parent Change");

console.log(this);

},

setRadio: function () {

// this.$refs.Gender.setRadioValue("Male");

this.Pros.Gender = null;

},

autosave: function () {

if (this.validateComponent("#vp")) {

const saveparam = [

this.JNew(

"N",

"1",

this.Pros.BranchId,

[this.Pros],

"App"

)

];

console.log(this.Pros.ProspectNo);

console.log(saveparam);

this.$store

.dispatch(GET_DATA, saveparam)

.then((data) => {

console.log(data);

this.$swal({

icon: "success",

title: "Saving Success",

showConfirmButton: false,

timer: 1500,

});

})

.catch((err) => {

console.log("Error " + err);

});

}

},

handleChange: function (args) {

//this.f1.BranchId = args.value;

},

},

});

script>

<style>

style>

from the screenshot , my local time and date time should be

for Application Date

2021-07-05T12:48:53.716Z not

2021-07-05T05:48:53.716Z

DOB : chosen date show 7/5/2021

but the value 7/4/2021 , this will misleading saving value to database as 7/4/2021

how to set server timezone offset to UTC+7 or server timezone , in custom component of datepicker?

[Sevvandhi Nagulan]

Hi Ivan, 

Greetings from Syncfusion support. 

We checked your query. We have provided serverTimeZoneOffset property for avoiding this kind of issue and handled these variations in source end. We suggest that you to specify your time zone value in that property such as 7.0 to resolve the reported issue.    

<ejs-datepicker 

:floatLabelType="floatLabelType" 

:showClearButton="showClearButton" 

:max="max" 

:min="min" 

:placeholder="placeholder" 

:readonly="readonly" 

:required="required" 

:format="format" 

:change="onChange" 

:allowEdit="allowEdit" 

:name="name" 

:strictMode="true" 

v-show="!hidden" 

v-model="localValue" 

:locale="locale" 

serverTimezoneOffset="7.0" 

>ejs-datepicker> 

 

If you don't know what time zone you are in, use the code below to find the exact time zone value and assign it to the serverTimeZoneOffset property. Please see the code below  

 

 var timezone = new Date().getTimezoneOffset() / 60;  

 

 

You can also avoid the issue by sending the time zone information to the server without the time zone information. Since the DateTimePicker component sends time zone information to the back and converts the date time to UTC, hence the time difference is created. To remove the time zone information, use the solution provided in the stack overflow link.  

 

Stack overflow link:  https://stackoverflow.com/questions/10830357/javascript-toisostring-ignores-timezone-offset   

  

  

Please check the above suggestion and get back to us if you need further assistance.  

Regards, 

Sevvandhi N