Controlling dates with datepicker within razor application

Question

I have an asp.net mvc4 application in which I have this view

<script>
    $(function() {
        $(".datepicker").datepicker({
            dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
            dateFormat: "dd/mm/yy"
        });
    });
</script>
</head>
<br />
<br />

<h2 class="title">Ajouter une tâche à l'affaire  :  <label style="color:red">@affaire </label></h2>

<br />
<br />
<form action="/Planning/SaveTask" method="get">
    <table class="table_form">
        <tr>
            <td>Description</td>
            <td>
                <input type="text" name="descr" value="" required/>
            </td>
        </tr>
        <tr>
            <td>Note</td>
            <td>
                <input type="text" name="note" value="" required/>
            </td>
        </tr>
        <tr>
            <td>Date de début</td>
            <td>
                <input type="text" class="datepicker" name="begin" value="" required/>
            </td>
        </tr>
        <tr>
            <td>Date de fin</td>
            <td>
                <input type="text" class="datepicker" name="end" value="" required/>
            </td>
        </tr>
    </table>
</form>

I'd like to ensure that the date begin be lower than the date end ie if begin date is 15th November , the end date must be the 16th November or 17th November ......

Is there any way to do this by javascript?

Answer 1

As per my understanding, you're trying to restrict date between begin and end(I consider it as from and to dates)

1) You can't have same class name, both should have different datepicker method.

2) In my consideration, I'm going with id 's called fromDate and toDate

$('#fromDate').datepicker({
    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
    dateFormat: "dd/mm/yy",
    onClose: function (selectedDate) {
        $("#toDate").datepicker("option", "minDate", selectedDate);
    }
});
$('#toDate').datepicker({
    dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
    dateFormat: "dd/mm/yy",
    onClose: function (selectedDate) {
        $("#fromDate").datepicker("option", "maxDate", selectedDate);
    }
});

When you close the datepicker, assign their max and min dates in opposite fashion that the trick!

JSFiddle

Hope you understood.