#javascript #jquery #asp.net
#javascript #jquery #asp.net
Вопрос:
Наше приложение имеет временные диапазоны, время начала и время окончания.
Пользователи должны выбрать минимум 4 часа, прежде чем им будет разрешено продолжить обработку своих запросов.
Пока не имеет значения, какой временной диапазон выбирает пользователь, возникает предупреждение.
Например, если пользователь выбирает время начала 07:00:00 и время окончания 12:00:00, предупреждение не должно возникать, и пользователь должен продолжить выполнение остальной части запроса.
Есть идеи, что нужно изменить с помощью кода ниже?
Заранее большое спасибо
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/datePicker.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
//Attach click event to button
$('#Button1').on('click', function () {
//Get Values from dropdownlist
var sHour = $('#startHour').val(),
eHour = $('#endHour').val();
//create date format from dropdownlist selected values
var theDate = $('#<%= txtDate.ClientID%>').val();
var timeStart = new Date(theDate sHour).getHours();
var timeEnd = new Date(theDate eHour).getHours();
//Calulate the time difference
var hourDiff = timeEnd - timeStart;
//Check if hour difference is less than 4 hours and show the message accordingly
if (hourDiff < 4) {
alert("A mininum of 4 hours is required!");
}
});
});//]]>
</script>
<td align="right">
<span id="lblDate">Date</span>
</td>
<td align="left">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<br />
</td>
<td align="right">
<span id="lblStarTime">Start Time</span>
</td>
<td align="left">
<asp:DropDownList id="startHour" runat="server">
<asp:ListItem Value="07:00:00">07</asp:ListItem>
<asp:ListItem Value="08:00:00">08</asp:ListItem>
<asp:ListItem Value="09:00:00">09</asp:ListItem>
<asp:ListItem Value="10:00:00">10</asp:ListItem>
<asp:ListItem Value="11:00:00">11</asp:ListItem>
<asp:ListItem Selected="True" Value="00:00:00">12</asp:ListItem>
<asp:ListItem Value="01:00:00">01</asp:ListItem>
<asp:ListItem Value="02:00:00">02</asp:ListItem>
<asp:ListItem Value="03:00:00">03</asp:ListItem>
<asp:ListItem Value="04:00:00">04</asp:ListItem>
<asp:ListItem Value="05:00:00">05</asp:ListItem>
<asp:ListItem Value="06:00:00">06</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="startMinutes" runat="server">
<asp:ListItem Value="00">00</asp:ListItem>
<asp:ListItem Value="15">15</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>
<asp:ListItem Value="45">45</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="startAmPm" runat="server">
<asp:ListItem Value="AM">AM</asp:ListItem>
<asp:ListItem Value="PM">PM</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="right">
<span id="lbEndTime">End Time</span>
</td>
<td align="left">
<asp:DropDownList id="endHour" runat="server">
<asp:ListItem Value="07:00:00">07</asp:ListItem>
<asp:ListItem Value="08:00:00">08</asp:ListItem>
<asp:ListItem Value="09:00:00">09</asp:ListItem>
<asp:ListItem Value="10:00:00">10</asp:ListItem>
<asp:ListItem Value="11:00:00">11</asp:ListItem>
<asp:ListItem Selected="True" Value="00:00:00">12</asp:ListItem>
<asp:ListItem Value="01:00:00">01</asp:ListItem>
<asp:ListItem Value="02:00:00">02</asp:ListItem>
<asp:ListItem Value="03:00:00">03</asp:ListItem>
<asp:ListItem Value="04:00:00">04</asp:ListItem>
<asp:ListItem Value="05:00:00">05</asp:ListItem>
<asp:ListItem Value="06:00:00">06</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="endMinutes" runat="server">
<asp:ListItem Value="00">00</asp:ListItem>
<asp:ListItem Value="15">15</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>
<asp:ListItem Value="45">45</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="endAmPm" runat="server">
<asp:ListItem Value="AM">AM</asp:ListItem>
<asp:ListItem Value="PM">PM</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</div>
</table>
<asp:Button ID="Button1" runat="server" Text="Button" />
Комментарии:
1. Какую версию jQuery вы используете?
2. Я не вижу, чтобы вы добавляли AM / PM к строке, которую вы передаете конструктору Date().
3. Как вы ожидаете
theDate sHourвыглядеть?4. я предлагаю проверять разницу во времени на стороне сервера, а не с помощью javascript. люди могут просто открыть консоль разработки и обойти вашу проверку
5. @JustinRusso, Eugine, Banana, Pointy, спасибо вам, ребята, за быстрый ответ. Я обновил свой пост версиями jQuery, которые я использую. Евгений, я не думал, что мне нужно добавлять AM / PM. Это было сделано для того, чтобы пользователь мог выбрать время утра или вечера. Заостренный, мы ожидаем что-то вроде 07/01/2014 07:00:00 до 07/01/2014 11:00:00 или что-то в этом роде. Это ежедневное событие.
Ответ №1:
Ваша проблема в том, как вы создаете свои Date переменные. Вам нужен пробел между вашей датой и вашим временем.
Обновить:
Как упоминал Мэтью из Critical Cognition и некоторые другие, вы захотите добавить значения AM / PM. Таким образом, что-то вроде 2:00 вечера дает значение часа 14, а не 2.
var sAmPm = $('#startAmPm').val();
var eAmPm = $('#endAmPm').val();
var timeStart = new Date(theDate ' ' sHour ' ' sAmPm).getHours();
var timeEnd = new Date(theDate ' ' eHour ' ' eAmPm).getHours();
Комментарии:
1. ВАУ, @BubbleHearth, ты абсолютно прав! Это исправлено. Большое спасибо и благодарность всем вам, кто ответил.
2. Это создаст действительный объект Date, но он не будет правильно вычислять разницу между 2 временами. Вам нужно добавить AM / PM, чтобы получить 24-часовые часы.
Ответ №2:
Я воссоздал все это в JSFiddle, и это работает так, как ожидалось. Могу ли я предложить вам использовать мой метод для получения текущей даты? Я думаю, что проблема была в пробелах, которые я добавил к конкатенациям дат. Как упоминалось в другом ответе «BubbleHeart».
//Attach click event to button
$('#Button1').on('click', function () {
var currentDate = new Date();
//Get Values from dropdownlist
var sHour = $('#startHour').val(),
eHour = $('#endHour').val();
//create date format from dropdownlist selected values
var theDate = (currentDate.getMonth() 1) '/' currentDate.getDate() '/' currentDate.getFullYear();
var timeStart = new Date(theDate ' ' sHour).getHours();
var timeEnd = new Date(theDate ' ' eHour).getHours();
//Calulate the time difference
var hourDiff = timeEnd - timeStart;
//Check if hour difference is less than 4 hours and show the message accordingly
if (hourDiff < 4) {
alert("A mininum of 4 hours is required!");
}
});
Комментарии:
1. Спасибо. BubbleHeart был немного быстрее, и да, что вы сделали по-другому, так это добавили пробелы между датой и часами. Большое спасибо.
Ответ №3:
Пара вещей. Во-первых, добавьте пробел при создании вашего объекта Date. Во-вторых, вам нужно учитывать время утра и вечера. В-третьих, извлекайте только часы из часового поля, а не полный час: минута: секунды. Рабочий код:
<script type='text/javascript'>//<![CDATA[
$(window).load(function () {
//Attach click event to button
$('#Button1').on('click', function () {
//Get Values from dropdownlist
var sHour = $('#startHour').val();
var sMinutes = $('#startMinutes').val();
var sAmPm = $('#startAmPm').val();
var eHour = $('#endHour').val();
var eMinutes = $('#endMinutes').val();
var eAmPm = $('#endAmPm').val();
//create date format from dropdownlist selected values
var theDate = $('#<%= txtDate.ClientID%>').val();
var timeStart = new Date(theDate ' ' sHour ':' sMinutes ' ' sAmPm).getHours();
var timeEnd = new Date(theDate ' ' eHour ':' eMinutes ' ' eAmPm).getHours();
//Calulate the time difference
var hourDiff = timeEnd - timeStart;
//Check if hour difference is less than 4 hours and show the message accordingly
if (hourDiff < 4) {
alert("A mininum of 4 hours is required!");
}
});
});//]]>
</script>
<td align="right">
<span id="lblDate">Date</span>
</td>
<td align="left">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<br />
</td>
<td align="right">
<span id="lblStarTime">Start Time</span>
</td>
<td align="left">
<asp:DropDownList id="startHour" runat="server">
<asp:ListItem Value="07">07</asp:ListItem>
<asp:ListItem Value="08">08</asp:ListItem>
<asp:ListItem Value="09">09</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
<asp:ListItem Value="11">11</asp:ListItem>
<asp:ListItem Selected="True" Value="12">12</asp:ListItem>
<asp:ListItem Value="01">01</asp:ListItem>
<asp:ListItem Value="02">02</asp:ListItem>
<asp:ListItem Value="03">03</asp:ListItem>
<asp:ListItem Value="04">04</asp:ListItem>
<asp:ListItem Value="05">05</asp:ListItem>
<asp:ListItem Value="06">06</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="startMinutes" runat="server">
<asp:ListItem Value="00">00</asp:ListItem>
<asp:ListItem Value="15">15</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>
<asp:ListItem Value="45">45</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="startAmPm" runat="server">
<asp:ListItem Value="AM">AM</asp:ListItem>
<asp:ListItem Value="PM">PM</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="right">
<span id="lbEndTime">End Time</span>
</td>
<td align="left">
<asp:DropDownList id="endHour" runat="server">
<asp:ListItem Value="07">07</asp:ListItem>
<asp:ListItem Value="08">08</asp:ListItem>
<asp:ListItem Value="09">09</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
<asp:ListItem Value="11">11</asp:ListItem>
<asp:ListItem Selected="True" Value="12">12</asp:ListItem>
<asp:ListItem Value="01">01</asp:ListItem>
<asp:ListItem Value="02">02</asp:ListItem>
<asp:ListItem Value="03">03</asp:ListItem>
<asp:ListItem Value="04">04</asp:ListItem>
<asp:ListItem Value="05">05</asp:ListItem>
<asp:ListItem Value="06">06</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="endMinutes" runat="server">
<asp:ListItem Value="00">00</asp:ListItem>
<asp:ListItem Value="15">15</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>
<asp:ListItem Value="45">45</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="endAmPm" runat="server">
<asp:ListItem Value="AM">AM</asp:ListItem>
<asp:ListItem Value="PM">PM</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</div>
</table>
<asp:Button ID="Button1" runat="server" Text="Button" />
Комментарии:
1. это хороший вариант. Большое вам спасибо. Я могу убедиться, что это работает действительно хорошо.