0

есть таблица, как при клике в поле data-name="hdate" сделать чтобы выскакивало выбор даты

 <table  class="heavyTable" contenteditable="true" data-table="1">
                    <thead>
                        <th>Дата прихода</th>
                        <th>Дата продаж</th>
                        <th>Продажа ст</th>
                        <th>Дебит</th>
                        <th>Кредит</th>
                        <th>Столбец</th>
                        <th>Баланс</th>
                        <th>Брак ст</th>
                        <th>Брак сумма</th>
                        <th>Приход сумма</th>
                        <th>Сальдо</th>
                        <th>Приход ст</th>
                        <th>Остаток ст</th>
                    </thead>
                    <tbody>
                        <tr data-id="1" data-table="1" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="pdate">2</td>
                            <td data-name="sale">3</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="row">3</td>
                            <td data-name="balanse">1</td>
                            <td data-name="brakst">2</td>
                            <td data-name="braksumma">3</td>
                            <td data-name="prihodsumma">1</td>
                            <td data-name="saldo">2</td>
                            <td data-name="prihodst">3</td>
                            <td data-name="ostatokst">3</td>
                        </tr>
                        <tr data-id="2" data-table="1" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="pdate">2</td>
                            <td data-name="sale">3</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="row">3</td>
                            <td data-name="balanse">1</td>
                            <td data-name="brakst">2</td>
                            <td data-name="braksumma">3</td>
                            <td data-name="prihodsumma">1</td>
                            <td data-name="saldo">2</td>
                            <td data-name="prihodst">3</td>
                            <td data-name="ostatokst">3</td>
                        </tr>
                        <tr data-id="37" data-table="2" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="pdate">2</td>
                            <td data-name="sale">3</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="row">3</td>
                            <td data-name="balanse">1</td>
                            <td data-name="brakst">2</td>
                            <td data-name="braksumma">3</td>
                            <td data-name="prihodsumma">1</td>
                            <td data-name="saldo">2</td>
                            <td data-name="prihodst">3</td>
                            <td data-name="ostatokst">3</td>
                        </tr>
                    </tbody>
                </table>

1 ответ 1

1

Я старался, все для тебя.

Поле и кнопки для выбора даты берутся способом копирования #block-edit-copy. Для лучшей читаемости убраны лишние td и th. Весь код в комментариях.

Вариант с input type="date"

Выбор и отображение даты производятся в локальном формате пользователя. Чтобы такое преобразование работало, сохраняется ISO формат(международный) даты в data-date="2018-09-01" атрибуте.

let editableItem // текущий редактируемый элемент

$('td[data-name="hdate"]').click(function ({ target }) {
  // вызывать редактор только при клике на td или span
  if (target.nodeName !== 'TD' && target.nodeName !== 'SPAN')
    return

  // удаляет предыдущие редакторы
  $('.my-table .block-edit').remove()
  $('.my-table td[data-name="hdate"]').removeClass('have-select') 
  
  // указывает что это редактируемый td
  $(this).addClass('have-select')
  editableItem = $(this)

  // делает копию редактора
  const copy = $('#block-edit-copy').clone().removeAttr('id')
  const date = editableItem.data('date')

  // ставит значение для input
  copy.find('input').val(date)
  copy.appendTo($(this))
  
  // добавляет обработчики кнопкам
  $('.block-edit__ok').click(save)
  $('.block-edit__close').click(close)
}).attr('contenteditable', false)


function save () {
  // берет хначение из input
  const ISODate = $('.my-table .block-edit input').val()
  const localDate = new Date(ISODate).toLocaleDateString()
  const span = $(`<span>${localDate}</span>`)
  
  editableItem.data('date', ISODate)
  
  console.log(editableItem.parent('tr').data('new'))
  
  editableItem.removeClass('have-select') 
  editableItem.html(span) // сохраняет в td
}

function close () {
  editableItem.find('.block-edit').remove()
  editableItem.removeClass('have-select') 
}
.select {
  border-color: blue;
}

.select option:checked { 
  background-color: blue;
  color: white;
}

#block-edit-copy {
  display: none !important;
}

.have-select {
  background-color: yellow;
}

.have-select span {
  display: none;
}

td[data-name="hdate"] {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="my-table table heavyTable" contenteditable="true" data-table="1">
  <thead>
    <th>Дата прихода</th>
    <th>Дата продаж</th>
    <th>Продажа ст</th>
  </thead>
  <tbody>
    <tr data-id="1" data-table="1" data-new="0">
      <td data-name="hdate"><span>Не указано</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
    <tr data-id="2" data-table="1" data-new="0">
      <td data-name="hdate" data-date="2018-09-01"><span>01.09.2018</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
    <tr data-id="37" data-table="2" data-new="0">
      <td data-name="hdate" data-date="2018-08-30"><span>30.08.2018</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
  </tbody>
</table>

<div id="block-edit-copy" class="block-edit">
  <input type="date">
  <button class="block-edit__ok">
    Ок
  </button>
  <button class="block-edit__close">
    X
  </button>
</div>

Вариант с select:

Варианты дат настраиваются в функции addDates.

let editableItem // текущий редактируемый элемент

$('td[data-name="hdate"]').click(function ({ target }) {
  // вызывать редактор только при клике на td или span
  if (target.nodeName !== 'TD' && target.nodeName !== 'SPAN')
    return

  // удаляет предыдущие редакторы
  $('.my-table .block-edit').remove()
  $('.my-table td[data-name="hdate"]').removeClass('have-select') 
  
  // указывает что это редактируемый td
  $(this).addClass('have-select')
  editableItem = $(this)

  // делает копию редактора
  const copy = $('#block-edit-copy').clone().removeAttr('id')
  
  // применяет стартовое значение к select
  const val = $(this).find('span').text()
  copy.find('select').val(val)
  copy.appendTo($(this))
  
  // добавляет обработчики кнопкам
  $('.block-edit__ok').click(save)
  $('.block-edit__close').click(close)
}).attr('contenteditable', false)

// заполняет редактор возможными датами
addDates()

function save () {
  // берет хначение из select
  const span = $('<span></span>').append($('.my-table .block-edit select').val())
  
  editableItem.removeClass('have-select') 
  editableItem.html(span) // сохраняет в td
}

function close () {
  editableItem.find('.block-edit').remove()
  editableItem.removeClass('have-select') 
}

// заполняет редактор возможными датами
function addDates () {
  const now = new Date();
  const select = $('.select')
  
  // генерирует дату для последних 10 дней
  for (let i = 10; i > 0; i--) {
    now.setDate(now.getDate() - 1) // на день назад
    const val = now.toISOString().slice(0, 10) // 2018-09-02 формат
    const option = $('<option></option>').attr('value', val).text(val)
    
    select.append(option)
  }
}
.select {
  border-color: blue;
}

.select option:checked { 
  background-color: blue;
  color: white;
}

#block-edit-copy {
  display: none !important;
}

.have-select {
  background-color: yellow;
}

.have-select span {
  display: none;
}

td[data-name="hdate"] {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="my-table table heavyTable" contenteditable="true" data-table="1">
  <thead>
    <th>Дата прихода</th>
    <th>Дата продаж</th>
    <th>Продажа ст</th>
  </thead>
  <tbody>
    <tr data-id="1" data-table="1" data-new="0">
      <td data-name="hdate"><span>Не указано</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
    <tr data-id="2" data-table="1" data-new="0">
      <td data-name="hdate"><span>2018-09-01</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
    <tr data-id="37" data-table="2" data-new="0">
      <td data-name="hdate"><span>2018-08-30</span></td>
      <td data-name="pdate">2</td>
      <td data-name="sale">3</td>
    </tr>
  </tbody>
</table>

<div id="block-edit-copy" class="block-edit">
  <select class="select">
    <option value="Не указано"><span>Не указано</span></option>
  </select>
  <button class="block-edit__ok">
    Ок
  </button>
  <button class="block-edit__close">
    X
  </button>
</div>

4
  • а можно сделать как-нибудь с input type="date"?
    – Aslero
    2 сен 2018 в 10:47
  • Сделал, должно работать независимо от формата дат пользователя. 2 сен 2018 в 14:18
  • а как вывести при сохранение атрибут tr data-new?
    – Aslero
    4 сен 2018 в 7:58
  • добавил в код console.log(editableItem.parent('tr').data('new')) 4 сен 2018 в 14:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.