выбор даты в таблице

187

04 декабря 2018, 03:50

есть таблица, как при клике в поле 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>

Answer 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>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Декорирование вызова функции

Извиняюсь за тавтологию заранееНо в этом примере в строке:

161

javascript

Как вывести большое число как строку в JavaScript?

Есть два больших числа:

321

javascript

Остановка функции JavaSript

Нужно сделать Ajax запрос только один раз и если пользователь прокрутит документ на 100pxСейчас делается постоянно при прокрутке на 1px

118

javascript

Поместить текст в Ace редактор

Нашел markdown редактор на js, построенный на базе текстового редактора Ace[GitHub]Проблема в том, что у меня не получается поместить текст в редактор...

156