БЛОГ НА HUSL


Cамый простой календарь с настройкой ссылок для архива

Автор вопроса: Makar X

Вот такой шаблон сайта. В окне для текста загружаются новости, а календарь нужен чтобы загрузить новость за предыдущий период

Вопрос: Как научить даты на календаре открывать документы с такой же датой в названии с помощью функции

onClick="$('#article').load('08.02.2020.html')"

, т.е. нажали на 8 февраля 2020 и открылась страница 08.02.2020.html 

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    /* Локализация datepicker */
    $.datepicker.regional['ru'] = {
      closeText: 'Закрыть',
      prevText: 'Предыдущий',
      nextText: 'Следующий',
      currentText: 'Сегодня',
      monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
      monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
      dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
      dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'],
      dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
      weekHeader: 'Не',
      dateFormat: 'dd.mm.yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['ru']);
    $(document).ready(function() {
      $('#article').load('intro2.htm');
    });
    $(document).ready(function() {
      $('#nav1').load('calen1.htm');
    });
  </script>
  <style>
    #nav {
      position: fixed;
      top: 0px;
      left: 1px;
      right: 1px;
      background: rgb(81, 92, 102);
      z-index: 2;
    }
    
    #nav ul {
      list-style: none;
      text-align: left;
      margin: -3px auto 0px auto;
      padding-top: 2px;
      padding-left: 0px;
      padding-right: 0px;
      width: 100%;
      display: inline;
      float: left;
    }
    
    #nav1 {
      position: fixed;
      background: rgba(30, 168, 143, 0.5);
      border: 1px solid rgba(33, 43, 52, 1);
      top: 40px;
      left: 1px;
      width: 250px;
      height: 250px;
      z-index: 1;
    }
    
    #nav li {
      display: inline-block;
    }
    
    #article {
      position: inherit;
      margin-top: 34px;
      margin-left: 244px;
      margin-right: -7px;
      border: 1px solid rgba(33, 43, 52, 1);
      top: 0px;
      width: auto;
      height: 600px;
    }
    
    a.button0 {
      width: 210px;
      font-size: 15px;
      display: inline-block;
      color: rgb(205, 216, 228);
      text-decoration: none;
      text-align: left;
      line-height: 2em;
      padding: 1px 1.2em;
      outline: none;
      border: 1px solid rgba(33, 43, 52, 1);
      border-radius: 3px;
      background: rgb(81, 92, 102);
      box-shadow: inset 0 1px rgba(101, 114, 126, 1), inset 0 0 1px rgba(140, 150, 170, .8), 0 1px rgb(83, 94, 104), 0 0 1px rgb(86, 96, 106);
    }
    
    a.button1 {
      width: 90px;
      display: inline-block;
      font-family: arial, sans-serif;
      font-size: 15px;
      color: rgb(205, 216, 228);
      text-shadow: 0 -1px rgb(46, 53, 58);
      text-decoration: none;
      text-align: center;
      line-height: 2em;
      padding: 1px 1.2em;
      outline: none;
      border: 1px solid rgba(33, 43, 52, 1);
      border-radius: 3px;
      box-shadow: inset 0 1px rgba(101, 114, 126, 1), inset 0 0 1px rgba(140, 150, 170, .8), 0 1px rgb(83, 94, 104), 0 0 1px rgb(86, 96, 106);
    }
  </style>
</head>

<body style="background: transparent">
  <div id="nav1">
    <div id="datepicker">
      <input type="hidden" id="datepicker_value" value=""></div>
    <script>
      $(function() {
        $("#datepicker").datepicker({
          onSelect: function(date) {
            $('#datepicker_value').val(date)
          }
        });
        $("#datepicker").datepicker("setDate", $('#datepicker_value').val());
      });
    </script>
  </div>
  <div>
    <ul id="article"><br><br>Здесь загружается текст</ul>
  </div>
  <div id="nav">
    <ul>
      <table>
        <tr>
          <td><a class="button0" tabindex="0">LOGO</a></td>
          <td><a href="#" onClick="$('#article').load('intro1.htm')" class="button1" tabindex="0">News</a></td>
          <td><a href="#" onclick="$('#article').load('intro2.htm')" class="button1" tabindex="0">Link 2</a></td>
          <td><a href="#" onClick="$('#article').load('intro3.htm')" class="button1" tabindex="0">Link 3</a></td>
          <td><a href="#" onClick="$('#article').load('intro4.htm')" class="button1" tabindex="0">Link 4</a></td>
          <td><a href="#" onClick="$('#article').load('intro5.htm')" class="button1" tabindex="0">Link 5</a></td>
          <td><a class="button0" tabindex="0">EasyDay</a></td>
          <td></td>
        </tr>
      </table>
    </ul>
  </div>
</body>

</html>


Источник

Ответы (1 шт):

Автор решения: adudnik.ru

Просто добавьте $('#article').load(date + '.html');

В эту часть кода:

    $("#datepicker").datepicker({
      onSelect: function(date) {
        $('#article').load(date + '.html'); 
        $('#datepicker_value').val(date)
      }
    });


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    /* Локализация datepicker */
    $.datepicker.regional['ru'] = {
      closeText: 'Закрыть',
      prevText: 'Предыдущий',
      nextText: 'Следующий',
      currentText: 'Сегодня',
      monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
      monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
      dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
      dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'],
      dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
      weekHeader: 'Не',
      dateFormat: 'dd.mm.yy',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['ru']);
    $(document).ready(function() {
      $('#article').load('intro2.htm');
    });
    $(document).ready(function() {
      $('#nav1').load('calen1.htm');
    });
  </script>
  <style>
    #nav {
      position: fixed;
      top: 0px;
      left: 1px;
      right: 1px;
      background: rgb(81, 92, 102);
      z-index: 2;
    }
    
    #nav ul {
      list-style: none;
      text-align: left;
      margin: -3px auto 0px auto;
      padding-top: 2px;
      padding-left: 0px;
      padding-right: 0px;
      width: 100%;
      display: inline;
      float: left;
    }
    
    #nav1 {
      position: fixed;
      background: rgba(30, 168, 143, 0.5);
      border: 1px solid rgba(33, 43, 52, 1);
      top: 40px;
      left: 1px;
      width: 250px;
      height: 250px;
      z-index: 1;
    }
    
    #nav li {
      display: inline-block;
    }
    
    #article {
      position: inherit;
      margin-top: 34px;
      margin-left: 244px;
      margin-right: -7px;
      border: 1px solid rgba(33, 43, 52, 1);
      top: 0px;
      width: auto;
      height: 600px;
    }
    
    a.button0 {
      width: 210px;
      font-size: 15px;
      display: inline-block;
      color: rgb(205, 216, 228);
      text-decoration: none;
      text-align: left;
      line-height: 2em;
      padding: 1px 1.2em;
      outline: none;
      border: 1px solid rgba(33, 43, 52, 1);
      border-radius: 3px;
      background: rgb(81, 92, 102);
      box-shadow: inset 0 1px rgba(101, 114, 126, 1), inset 0 0 1px rgba(140, 150, 170, .8), 0 1px rgb(83, 94, 104), 0 0 1px rgb(86, 96, 106);
    }
    
    a.button1 {
      width: 90px;
      display: inline-block;
      font-family: arial, sans-serif;
      font-size: 15px;
      color: rgb(205, 216, 228);
      text-shadow: 0 -1px rgb(46, 53, 58);
      text-decoration: none;
      text-align: center;
      line-height: 2em;
      padding: 1px 1.2em;
      outline: none;
      border: 1px solid rgba(33, 43, 52, 1);
      border-radius: 3px;
      box-shadow: inset 0 1px rgba(101, 114, 126, 1), inset 0 0 1px rgba(140, 150, 170, .8), 0 1px rgb(83, 94, 104), 0 0 1px rgb(86, 96, 106);
    }
  </style>
</head>

<body style="background: transparent">
  <div id="nav1">
    <div id="datepicker">
      <input type="hidden" id="datepicker_value" value=""></div>
    <script>
      $(function() {
        $("#datepicker").datepicker({
          onSelect: function(date) {
            alert("выбрана дата" + date + "загружаем страницу");
            $('#article').load(date + '.html'); 
            $('#datepicker_value').val(date)
          }
        });
        $("#datepicker").datepicker("setDate", $('#datepicker_value').val());
      });
    </script>
  </div>
  <div>
    <ul id="article"><br><br>Здесь загружается текст</ul>
  </div>
  <div id="nav">
    <ul>
      <table>
        <tr>
          <td><a class="button0" tabindex="0">LOGO</a></td>
          <td><a href="#" onClick="$('#article').load('intro1.htm')" class="button1" tabindex="0">News</a></td>
          <td><a href="#" onclick="$('#article').load('intro2.htm')" class="button1" tabindex="0">Link 2</a></td>
          <td><a href="#" onClick="$('#article').load('intro3.htm')" class="button1" tabindex="0">Link 3</a></td>
          <td><a href="#" onClick="$('#article').load('intro4.htm')" class="button1" tabindex="0">Link 4</a></td>
          <td><a href="#" onClick="$('#article').load('intro5.htm')" class="button1" tabindex="0">Link 5</a></td>
          <td><a class="button0" tabindex="0">EasyDay</a></td>
          <td></td>
        </tr>
      </table>
    </ul>
  </div>
</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.