“如何使用存储在 MongoDB 中并使用 EJS 和 ExpressJS 在客户端呈现的数据设置 div 的背景颜色？”

我不知道如何使用数据库控制 div 的背景颜色，我正在使用 MongoDb 和 ExpressJS，对于客户端渲染，我使用 ejs。

              <div class="habbits">
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="50"
                  class="slider"
                  id="myRange"
                />
                <div class="habbit-name"><p>Drinking Water</p></div>
                <div class="habbit-icon">
                  <i class="fa-solid fa-infinity"></i>
                </div>
              </div>  
     

这是我的 EJS 代码..我在课堂习惯中的 div 中创建了两个 div，并尝试使用 range 更改 div 的背景颜色

我也不知道如何在日历上方显示...

我采取了一个范围元素来做到这一点但无法做到..下面我附上了我目前拥有的和我想要的图像请帮助我我正在使用ejs express和mongodb我也遵循了MVC模式

<FormikDatePicker
        autoOk
        variant='inline'
        inputVariant='outlined'
        format='dd/MM/yyyy'
        data-test='user-datepicker-container'
        required
        label='Select date'
        format='dd/MM/yyyy'
        name='extenstionDate'
        minDate={presentDate}
        maxDate={values.endDate === '' ? maxAppDate : values.endDate}
        InputProps={{
          endAdornment: (
            <InputAdornment>
              <CalendarIcon />
            </InputAdornment>
          )
        }}
      />

还有

延期日期 : 2023 年 5 月 12 日星期五 16:23:00 GMT+0530（印度标准时间）{}

aslo{}

    import React from 'react';
import { connect, useFormikContext } from 'formik';
import { DatePicker as Picker } from '@material-ui/pickers';

export const DatePicker = props => {
  const { setFieldValue } = useFormikContext();
  const fieldProps = { ...props };
  delete fieldProps.formik;
  const {
    name,
    formik: { values, handleBlur, touched, errors, status }
  } = props;
  //For Announcement Screen
  if (touched['scheduled'] || status['scheduled']) {
    touched[name] = true;
  }
  return (
    <Picker
      data-test='component-DatePicker'
      style={{ display: 'block' }}
      value={values[name]}
      error={
        touched[name] && Boolean(errors[name] || status[name] || status.root)
      }
      helperText={touched[name] && (errors[name] || status[name])}
      onChange={val => {
        setFieldValue(name, val);
      }}
      onBlur={handleBlur}
      {...fieldProps}
    />
  );
};

export default connect(DatePicker);