DateTimePicker Belirli Tarihten Öncesini Seçmeyi Engelleme

Selamlar arkadaşlar, yeni bir blog yazısında daha beraberiz. Bugün, sizlere sade ve basit bir şekilde, iki tarih arasında seçim yaparken kullanabileceğiniz bir yöntem göstereceğim.

Öncelikle senaryoyu anlatmak gerekirse, örneğin araba kiralayacağınızı varsayalım ve alış ile arabayı geri teslim tarihini belirlemeniz gerekiyor. Birinci datetimepicker, arabayı alış tarihi; ikinci datetimepicker ise arabayı geri teslim tarihi olsun. Eğer arabayı geri teslim tarihini, alış tarihinden önceki günleri seçebiliyor olursanız, bu uygun bir durum olmaz. Bu yüzden, böyle bir durumu engellemek için bir örnek yapacağız. Yine arabayı alış ve geri teslim tarihini düşünerek hareket edelim. Yaptığımız uygulamada, arabayı geri teslim tarihini, alış tarihinden önce seçemeyeceksiniz.

Not: Ben veritabanı kullanamayacağım için Controller kısmıyla bir işlem yapmayacağım direkt default gelen Home Controller’in view kısmını kullanacağım

View Kısmına Ekleyeceğimiz Scriptler :

<!--Scriptler-->
<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- Bootstrap JS ve Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<!-- Bootstrap DateTimePicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!-- JQUERY.MİN.JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Not : Bu scriptleri eklemesseniz işlem doğru şekilde çalışmaz.

Html Kodlarımız :


<div class="col-md-6">
    <label for="datetime1">Birinci</label>
    <div class="form-floating date" id="date3" data-target-input="nearest">
        <input type="datetime-local" class="form-control" id="datetime1">
    </div>

</div>
<div class="col-md-6">
    <label for="datetime2">ikinci</label>
    <div class="form-floating date" id="date4" data-target-input="nearest">
        <input type="datetime-local" class="form-control" id="datetime2">
    </div>
</div>

Javascript (JQUERY) kodumuz :

<script>
    $(function(){
        var datetime1=document.getElementById("datetime1");
        var datetime2=document.getElementById("datetime2");
        datetime1.addEventListener("input",function(){
            datetime2.min=datetime1.value;
            if(datetime2.value<datetime1.value){
                datetime2.value=datetime1.value;
            }
        });
    });
</script>

Kodumuzu biraz anlatmak gerekirse İlk tarih alanı (datetime1) seçildiğinde, ikinci tarih alanının (datetime2) minimum değeri, ilk tarih alanının değeriyle eşitlenir ve ikinci tarih alanının değeri, ilk tarih alanının değerinden küçükse, ikinci tarih alanının değeri de ilk tarih alanının değeriyle eşitlenir.

Tüm kodların birleşmiş hali:

@{
    ViewData["Title"] = "Home Page";
}
<!--Scriptler-->
<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- Bootstrap JS ve Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<!-- Bootstrap DateTimePicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!-- JQUERY.MİN.JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="col-md-6">
    <label for="datetime1">Birinci</label>
    <div class="form-floating date" id="date3" data-target-input="nearest">
        <input type="datetime-local" class="form-control" id="datetime1">
    </div>

</div>
<div class="col-md-6">
    <label for="datetime2">ikinci</label>
    <div class="form-floating date" id="date4" data-target-input="nearest">
        <input type="datetime-local" class="form-control" id="datetime2">
    </div>
</div>

<script>
    $(function(){
        var datetime1=document.getElementById("datetime1");
        var datetime2=document.getElementById("datetime2");
        datetime1.addEventListener("input",function(){
            datetime2.min=datetime1.value;
            if(datetime2.value<datetime1.value){
                datetime2.value=datetime1.value;
            }
        });
    });
</script>

GÖRSEL:

DateTimePicker Belirli Tarihten Öncesini Seçmeyi Engelleme

Bu anlatımın sonuna geldik. Umarım detaylı ve anlaşılır bir şekilde anlatabilmişimdir. Sorularınız veya önerileriniz varsa yorum yazarak veya mail atarak sorabilirsiniz. Bir sonraki yazımda görüşmek üzere, sağlıkla kalın.