Saya memiliki 2 kotak pilihan tanggal dan waktu, sebagai tanggal mulai dan tanggal akhir. sekarang saya dapat memilih tanggal yang berbeda dengan waktu. Jadi yang saya inginkan adalah dapat memilih tanggal yang sama dengan perbedaan waktu. Misalnya tanggal mulai - 07-02-2020 - 21:90 Tanggal berakhir - 07-02-2020 waktu - 22:00

Saya juga dapat memilih waktu mulai dari waktu saat ini dengan langkah 30 menit dan waktu sebelumnya dinonaktifkan.

enter image description here

Kode yang dicoba

 import Datetime from 'react-datetime';
    import momentLocalizer from 'react-widgets-moment';
    import { DateTimePicker } from 'react-widgets';
    import moment from 'moment';

Mulai tanggal

<Datetime
dateFormat='YYYY-MM-DD'
timeFormat={false}
closeOnSelect={true}
onChange={(e) => {
    // changeStartDate(e);
    setStartDate(e);
}}
value={date}
isValidDate={ validStartDate }

/>

Waktu mulai

    <DateTimePicker
    date={false}
    timeFormat={'HH:mm'}
    format={'HH:mm'}
    // defaultValue={new Date(startInterval)}
    onChange={(e) => {
        setStartTime(e);
    }}
    value={time}
    inputProps={{component: props => <input {...props} readOnly/>}}
    // min={new Date()}
    // step={30}
    // min={ (date && moment(date).isSame(moment(), 'day')) ? moment(new Date()).add({hours: 6}).set({minute:0}).toDate() : moment().startOf('day').toDate() }
/>

kode serupa juga untuk tanggal dan waktu berakhir.

Fungsi yang memeriksa tanggal yang valid

var yesterday = Datetime.moment().subtract(1, 'day');
var validStartDate = function( current ){
  if(endDate){
    return !current.isAfter( Datetime.moment(endDate).add(0, 'day') ) && current.isAfter( yesterday );
  }else{
    return current.isAfter( yesterday );
  }
};
var validEndDate = function( current ){
  if(date){
    return current.isAfter( Datetime.moment(date).add(-1, 'day') );
  }
  else{
    return current.isAfter( yesterday );
  }
};

Output : tombol harus diaktifkan berdasarkan input yang benar, yang tidak terjadi.

0
DharmikSoni 2 Juli 2020, 19:23

1 menjawab

Jawaban Terbaik

Baik, saya harus menjawab pertanyaan saya sendiri.

Mengubah waktu mulai menjadi

<DateTimePicker
date={false}
open={openStartTime}
timeFormat={'HH:mm'}
format={'HH:mm'}
onChange={(e) => {
    setStartTime(e);
}}
value={time}
min={new Date(new Date().getTime()+ (1000 * 60 * 30) - (new Date().getTime() % 
(1000 * 60 * 30)))}
/>

Mengubah waktu akhir menjadi

<DateTimePicker
date={false}
timeFormat={'HH:mm'}
format={'HH:mm'}
onChange={(e) => {
  setEndTime(e);
}}
value={endTime}
min={moment(endDate).isAfter(date) ? moment(endTime).startOf('day').toDate() : new Date(new Date(time).getTime()+ (1000 * 60 * 30) - (new Date(time).getTime() % (1000 * 60 * 30)))}
/>

Dan ini memecahkan masalah saya.

0
DharmikSoni 3 Juli 2020, 10:09