jQueryを使用してチェックインとチェックアウトの機能が必要ですか？

-1

私は2つのテキストボックスにチェックインを挿入することができます&チェックアウト日。チェックイン日は現在または未来の日付で、チェックアウト日は選択したチェックイン日より大きくする必要がありますjQueryを使用してチェックインとチェックアウトの機能が必要ですか？

出典

2017-04-19 Darshit Patel

これまでにお試しいただいた内容は？それを投稿する – Sharmila

Googleで5秒かけています。ここには例があります。http://jsbin.com/seduseqici/edit?html,output –

@CarstenLøvboAndersenあなたが提供したリンクのコードには、現在の日付のような機能はほとんどありません選択ボックスに日付がある場合は、残りの部分が良好です。 –

JQueryのデフォルトのdatepickerプラグインを使用して簡単です。 jsfiddleのコードには、チェックインのための2つのテキストボックスと、チェックアウトのためのもう1つのテキストボックスがあります。

$("#checkin").datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});

Hit Me !! For code..

出典

2017-04-19 06:59:22

この

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#txtCheckin").datepicker({ 
 
       dateFormat: "dd-M-yy", 
 
       onSelect: function (date) { 
 
        var date2 = $('#txtCheckin').datepicker('getDate'); 
 
        date2.setDate(date2.getDate()); 
 
        $('#txtCheckout').datepicker('setDate', date2); 
 
        //sets minDate to dateofbirth date + 1 
 
        $('#txtCheckout').datepicker('option', 'minDate', date2); 
 
       } 
 
      }); 
 
      $('#txtCheckout').datepicker({ 
 
       dateFormat: "dd-M-yy", 
 
       onClose: function() { 
 
        var dt1 = $('#txtCheckin').datepicker('getDate'); 
 
        console.log(dt1); 
 
        var dt2 = $('#txtCheckout').datepicker('getDate'); 
 
        if (dt2 <= dt1) { 
 
         var minDate = $('#txtCheckout').datepicker('option', 'minDate'); 
 
         $('#txtCheckout').datepicker('setDate', minDate); 
 
        } 
 
       } 
 
      }); 
 
     }); 
 

 
    </script> 
 
</head> 
 
<body> 
 
    <input type="text" id="txtCheckin" /> 
 
    <input type="text" id="txtCheckout" /> 
 
</body> 
 
</html>

のSrc試してみてください：http://jsbin.com/seduseqici/edit?html,output

出典

2017-04-19 07:00:56

コメントを取って答えとして投稿する点は何でしょうか。 –

あなたの答えはコメントでは見えませんでした。同時に私はグーグルでもあります。同じ答えを見つける –

をjqueryの& jqueryのUIを含めるとこれを試してみてください。スクリプトタグ内

HTML

<label for="from">From</label> 
     <input type="text" id="from" name="from"> 
     <label for="to">to</label> 
     <input type="text" id="to" name="to">

、これを試してみてください。

<script> 
     $(function() { 

      var dateFormat = "mm/dd/yy", 
     from = $("#from") 
     .datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 

     }) 
     .on("change", function() { 
      to.datepicker("option", "minDate", getDate(this)); 
     }), 
     to = $("#to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 

     }) 
     .on("change", function() { 
      from.datepicker("option", "maxDate", getDate(this)); 
     }); 

      function getDate(element) { 
       var date; 
       try { 
        date = $.datepicker.parseDate(dateFormat, element.value); 
       } catch (error) { 
        date = null; 
       } 

       return date; 
      } 
     }); 
    </script>

出典

2017-04-19 07:08:23

jQueryを使用してチェックインとチェックアウトの機能が必要ですか？

答えて

関連する問題