4

私は使用しようとしていますbootstrap-datetimepicker.min.jsが、プロジェクトにうまく統合しました。それでも、今日の日付をfrom入力フィールドのデフォルト値として表示しようとすると、機能しません。

Javascript:

var d = new Date();

var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();

var dateStr = currDate + "-" + currMonth + "-" + currYear;

$('#from').datetimepicker({
    pickTime: false,
    defaultDate: dateStr
});

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>

fromそして、これにより、提出された日付を検証して、今日の日付toよりも小さく、明日の日付よりも小さく、3 か月の日付より大きくならないようにしたいと考えています。

私はすでにグーグルとスタックオーバーフローで答えを探しました。私を助けてください。

4

4 に答える 4

3

このコードを試してみてくださいhttp://jsfiddle.net/KWvNe/

HTML

<div class="well">
  <div id="from-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>

<div class="well">
  <div id="to-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>

JS

$(function() {

    var d = new Date();
    var today = d;
    var dateThreeMonthLater = d.setMonth(d.getMonth() + 3);

    $('#from-datepicker').datetimepicker({
      language: 'pt-BR',
      startDate: today,
      endDate: dateThreeMonthLater
    });

     $('#to-datepicker').datetimepicker({
      language: 'pt-BR'
    });

});

ここで動作するフィドルを確認してくださいhttp://jsfiddle.net/KWvNe/ 必須の JavaScript と CSS を含めることを忘れないでください ここで確認してくださいhttp://tarruda.github.io/bootstrap-datetimepicker/

日付ピッカーには次のオプションを設定できます

  maskInput: true,           // disables the text input mask
  pickDate: true,            // disables the date picker
  pickTime: true,            // disables de time picker
  pick12HourFormat: false,   // enables the 12-hour format time picker
  pickSeconds: true,         // disables seconds in the time picker
  startDate: -Infinity,      // set a minimum date
  endDate: Infinity          // set a maximum date
于 2014-01-20T11:18:23.657 に答える
1

私はあなたの問題を抱えています...これは簡単な日付の検証です

<input type="text" id="txtdate" />
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/>
<script>
           function checkDate() {
            var EnteredDate = document.getElementById("txtdate").value; //for javascript
            var EnteredDate = $("#txtdate").val(); // For JQuery
            var date = EnteredDate.substring(0, 2);
            var month = EnteredDate.substring(3, 5);
            var year = EnteredDate.substring(6, 10);
            var myDate = new Date(year, month - 1, date);
            var today = new Date();
            if (myDate > today) {
                alert("Entered date is greater than today's date ");
            }
            else {
                alert("Entered date is less than today's date ");
            }
        }
    </script>
于 2014-01-20T11:24:31.170 に答える
1

このjquery関数を使用してください

<script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
          $("#from").datepicker( "option", "dateFormat", "yy-mm-dd");
          $("#to").datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
          $("#to").datepicker( "option", "dateFormat", "yy-mm-dd");
          $("#from").datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
</script>

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>
于 2014-01-20T11:01:49.680 に答える
0

このスクリプトを含める

// jQuery Date Picker
jQuery(".datepicker").datepicker({
    showOtherMonths: true,
    selectOtherMonths: false,
    isRTL:false,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,

});
jQuery('.datepicker').css('cursor', 'pointer');
jQuery('.datepicker').attr("readonly", "readonly");
jQuery('.datepicker').addClass('tooltip-info');
jQuery('.datepicker').attr('data-rel', 'tooltip');
jQuery('.datepicker').attr('data-placement', 'right');
jQuery('.datepicker').attr('data-original-title', 'Select a Date');
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown");
jQuery(".datepicker").each(function(){
    jQuery(this).datepicker( "setDate", jQuery(this).attr('date-value'));
});
Use id="datepicker"

于 2014-01-20T11:09:52.753 に答える