0
  1. I use fomantic-ui/semantic.
  2. I choose the date from the popup - everything is fine.
  3. I am correcting the date "manually" - days with months change (yyyy-mm-dd to yyyy-dd-mm)
  4. I want format date: yyyy-mm-dd (Day: 01-31, month 01 - 12).
  5. I give "if" for days less than 10 to add '0' and for months less than 10 to add '0'

Video problem: https://www.screencast.com/t/y3pnvvZVqL

$('#rangestart').calendar({
  type: 'date',
  firstDayOfWeek: 1,
  monthFirst: false,
  ampm: false,
    formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month<10) var month = ("0" + (date.getMonth() + 1)).slice(-2);
      else var month = date.getMonth() + 1;
      if(day<10)  var day = ("0" + (date.getDate())).slice(-2);
      else var day = date.getDate();
      return year + '-' + month + '-' + day;
    }
  },
  endCalendar: $('#rangeend'),
  text: {
      days: ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb'],
      months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
      monthsShort: ['Sty', 'Luty', 'Mar', 'Kwi', 'Maj', 'Czer', 'Lip', 'Sierp', 'Wrz', 'Paz', 'List', 'Grud'],
      today: 'Dziś',
      now: 'Teraz'
    }
});

$('#rangeend').calendar({
  type: 'date',
  firstDayOfWeek: 1,
  monthFirst: false,
  ampm: false,
    formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var year = date.getFullYear();
      var month = ("0" + (date.getMonth() + 1)).slice(-2);
      var day = ("0" + (date.getDate())).slice(-2);
      return year + '-' + month + '-' + day;
    }
  },
  startCalendar: $('#rangestart'),
    text: {
      days: ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb'],
      months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
      monthsShort: ['Sty', 'Luty', 'Mar', 'Kwi', 'Maj', 'Czer', 'Lip', 'Sierp', 'Wrz', 'Paz', 'List', 'Grud'],
      today: 'Dziś',
      now: 'Teraz'
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Date</title>
</head>
 

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.2/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.7.2/dist/semantic.min.js"></script>

  <!-- jQuery Modal -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<body>


<div class="ui">
      <div class="ui segment">

<label>Zakres dat:</label>
 <div class="ui calendar" id="rangestart" style="font-size: 10px; width: 48%;">
        <div class="ui input left icon" style="font-size: 10px; width: 48%;">
            <i class="calendar icon"></i>
            <input type="text" name="build_daytime_start" placeholder="Od" style="font-size: 10px; width: 48%;">
          </div>
        </div>

        <div class="ui calendar" id="rangeend" style="font-size: 10px; width: 48%;">
          <div class="ui input left icon" style="font-size: 10px; width: 48%;">
            <i class="calendar icon"></i>
            <input type="text" name="build_daytime_end" placeholder="Do" style="font-size: 10px; width: 48%;">
          </div>
        </div><br>

</div>
</div>

 <script src="index.js"></script>
skipper
  • 1
  • Could you please post the problem you are trying to solve as part of your question? – Rajan Panneer Selvam Apr 10 '20 at 11:39
  • I choose the date April 5, 2020 - 2020-04-05 (yyyy-mm-dd). I want to manually correct the date for April 6 (2020-04-06). Then my days change with months in the input and I have 2020-06-04... instead 2020-04-06... You can see this problem: https://www.screencast.com/t/y3pnvvZVqL – skipper Apr 10 '20 at 11:45
  • use Custom format https://fomantic-ui.com/modules/calendar.html#custom-format – SWAT 10101 Nov 12 '21 at 19:23

0 Answers0