I need urgently to make a range datepicker for two dates :start date and end date.
Start date cannot be before date time now and end date cannot be before choosed start date.
Here is an example of what i want.Can somebody tell me what to use to make this?
http://rezervari.hotelalpin.ro/
this is what i tried but is not working:
</head>
#using (Html.BeginForm("SearchFree", "Reservation", FormMethod.Get,new {id = "form" }))
{
<h7>Introduceti perioada Rezervarii</h7>
<div class="editor-label">
<label id="cautare" for="StartDate">Data Intrare: </label>#(Html.JQueryUI().Datepicker("StartDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
<div class="editor-label">
<label id="cautare" for="EndDate">Data Iesire: </label>#(Html.JQueryUI().Datepicker("EndDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
<p>
<input id="buton1" type="submit" value="Cauta camere libere" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$.validator.addMethod("EndDate", function (value, element) {
var startDate = $('.StartDate').val();
return Date.parse(startDate) <= Date.parse(value);
}
, "* End date must be after start date");
$('.form').validate();
});
</script>
The jquery UI datepicker has a date range option that you can use. You can set it up like this:
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"/>
Javascript:
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Should be able to do that with a JQuery date picker!
You can then use some Javascript/JQuery validation to alert the user if they enter a date outside the range you specify.
You can restrict the range of selectable dates using the minDate and maxDate options of jQuery datepicker. See an example here:
http://jqueryui.com/demos/datepicker/#min-max
<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function () {
$("#tbStartDate").datepicker({
//minDate: new Date(2007, 1 - 1, 1), //use for Date time now
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
},
onClose: function (dateText, inst) {
//$("#StartDate").val($("#tbStartDate").val());
}
});
$("#tbEndDate").datepicker({
//minDate: new Date($("#tbStartDate").datepicker('getDate')),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
$('#tbStartDate').datepicker("option", 'minDate', new Date($("#tbEndDate").datepicker('getDate')));
},
onClose: function (dateText, inst) {
//$("#EndDate").val($("#tbEndDate").val());
}
});
var $endDate = $('#tbStartDate').datepicker('getDate');
$endDate.setDate($endDate.getDate() + 1);
$('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); });
</script>
Related
Is there a way to get something similar to this in magento calendar ?
This is my code:
Calendar.setup({
inputField: "myfield",
ifFormat: "%m/%e/%Y",
showsTime: false,
button: "_myfield_date_trig",
align: "Bl",
singleClick : true,
disableFunc: function(date) {
// show only month and year
}
});
You can try this and apply css to hide the ui calendar
<div class="control customer-dob">
<input type="text"
class="input-text required-entry hasDatepicker"
id="calendar_inputField"
name="calendar_inputField"
aria-required="true" />
<script>
require([
"jquery",
"mage/calendar"
], function ($) {
$("#calendar_inputField").calendar({
changeYear: true,
changeMonth: true,
dateFormat: 'MM/yy',
yearRange: "2017:2050",
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
I am searching data on the database in accordance to date range.
In the search box how can I make the data to be picked from the datapicker.
Here is my code :
public ActionResult List(DateTime startDate, DateTime endDate)
{
//var cards = new List<Card>();
//using (CardDBEntities _db = new CardDBEntities() )
//{
// cards = _db.Cards.ToList();
//}
using (var db = new CardDBEntities())
{
var cards = (from c in db.Cards
join d in db.RegistrationDTs
on c.CardId equals d.CardId
where d.RegistrationDateTime >= startDate &&
d.RegistrationDateTime <= endDate
select new Model
{
CardId = d.CardId,
Description = c.Description,
RegistrationDateTime = d.RegistrationDateTime
}).OrderByDescending(x => x.RegistrationDateTime)
.ToList();
ViewData["cards"] = cards;
return View();
and my view :
#using(Html.BeginForm())
{
<fieldset>
<legend>Search criteria</legend>
#Html.Label("startDate", "Start Date:")
#Html.TextBox("startDate", null, new { #class = "DateTime" })
#Html.Label("endDate", "End Date:")
#Html.TextBox("endDate", null, new { #class = "DateTime" })
<input type="submit" value="Apply" />
</fieldset>
Thank you in advance
You can use jQueryUI DatePicker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
</body>
</html>
Working JSFIDDLE: http://jsfiddle.net/18h8zfr8/
Just go through DatePicker API, you will find more options..
I'd looking for the most effective way of inserting a general validation alert "Please check your submission" to be positioned above the fieldset, instead of in an alert pop-up as coded below.
http://jsfiddle.net/Nz38D/3/
HTML:
<script id="customMessageTemplate" type="text/html">
<em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<fieldset>
<legend>Details</legend>
<label>First name:
<input data-bind='value: firstName' />
</label>
<label>Last name:
<input data-bind='value: lastName' />
</label>
<div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
<label>Email:
<input data-bind='value: emailAddress' required pattern="#" />
</label>
</fieldset>
<br>
<button type="button" data-bind='click: submit'>Submit</button>
<br>
<br> <span data-bind='text: errors().length'></span> errors
JS:
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.configure({
decorateElement: true,
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
messageTemplate: null
});
var viewModel = function() {
this.firstName = ko.observable().extend({
minLength: 2,
maxLength: 10
});
this.lastName = ko.observable().extend({
required: true
});
this.emailAddress = ko.observable().extend({ // custom message
required: {
message: 'Enter your email address.'
}
});
this.submit = function () {
if (this.errors().length == 0) {
alert('Thank you.');
} else {
alert('Please check your submission.');
this.errors.showAllMessages();
}
};
this.errors = ko.validation.group(this);
};
ko.applyBindings(new viewModel());
I inserted a virtual element to hold the validation summary message and bound its display to an observable in the click function: http://jsfiddle.net/sx42q/2/
HTML:
<!-- ko if: displayAlert -->
<p class="customMessage" data-bind="text: validationSummary"></p> <br />
<!-- /ko -->
JS:
this.validationSummary = ko.observable("Complete missing fields below:");
this.displayAlert = ko.observable(false);
this.submit = function () {
if (this.errors().length == 0) {
alert('Thank you.');
} else {
this.displayAlert(true);
this.errors.showAllMessages();
}
I have a wizard contains 4 step with knockout its work fine but when i added datepicker of Jquery on step 2 date picker doesn't display (just an input type text display) if i refresh my browser it display, but i lose information of step 1 (if i refresh my browser), how can i solve my problem,
my wizard its like this: http://jsfiddle.net/FyuSD/36/
wizard.cshtml:
....
<script id="step1" type="text/html">
<div>Name: <input type="text" data-bind="value: Name"></div>
<div>Description: <input type="text" data-bind="value: Description"></div>
</script>
<script id="step2" type="text/html">
Start: <br/><input type="text" id="from" data-bind="value: StartDate">
Stop:<br/> <input type="text" id="to" class="required" data-bind="value: EndDate">
</script>
.....
DatePicker.js:
$(function () {
$("#from").datepicker({
showOn: "button",
buttonImage: "/Content/images/calendar.gif",
buttonImageOnly: true,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
showOn: "button",
buttonImage: "/Content/images/calendar.gif",
buttonImageOnly: true,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
I'm sorry for my bad English
thanks,
I played with the fiddle a bit and your solution is the answer to this question
jQuery UI datepicker change event not caught by KnockoutJS
Which shows a datepicker implementation for custom bindings as described in the knockout documentation: Knockout - Custom Bindings
You need to create a custom binding handler that will initialize your datepickers when the template is rendered.
// call this before you call ko.applyBindings()
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
// initialize here
},
update: function(element, valueAccessor, allBindingsAccessor) {
// change handler here
}
};
When you declare your data bindings use the name of your custom binding (instead of "value: StartDate")
<br/>
Start :<input type="text" id="from" data-bind="datepicker: StartDate, datepickerOptions: {onSelect: $root.onSelectStartDate()}" />
<br/>
End :<input type="text" id="to" data-bind="datepicker: EndDate, datepickerOptions: {onSelect: $root.onSelectEndDate()}" />
Of course $root refers to your ViewModel class so that means you need some methods there. This is where you could put your minDate and maxDate code.
function ViewModel() {
// ...
self.onSelectStartDate = function() {
return function() {
alert("Start Date selected");
};
};
self.onSelectEndDate = function() {
return function() {
alert("End Date selected");
};
};
};
I tested it in an updated fiddle here http://jsfiddle.net/carbontax/bwA4N/5/. It looks funny because the datepicker css is not available, but the binding handler is doing the right thing.
I have two datepicker in my view one for "From" and other for "to".
I want when "from" selected date less than "to" should disable.
and also please guide me how to format the view of datePicker
<div>
From:
<input type="text" id="txtFromDate" />
To:
<input type="text" id="txtToDate" />
</div>
$(function() {
$("#txtFromDate").datepicker({
numberOfMonths: 1,
highlightWeek: true,
onSelect: function(selected) {
$("#txtToDate").datepicker("option", "mindate", selected)
}
});
$("#txtToDate").datepicker({
numberOfMonths: 1,
onSelect: function(selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
});
I got the solution...
$(function () {
$("#txtFromDate").datepicker({
changeMonth: true,
changeYear: true,
buttonImage: '../../Images/DatePicker.jpg',
dateFormat: 'dd-mm-yy',
buttonText: 'Select date:',
firstDay: 1,
buttonImageOnly: true,
showOn: 'both',
showAnim: 'fadeIn',
onSelect: function () {
var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
var max = new Date(min.getTime());
max.setMonth(max.getMonth() + 12 * 10); // Add one month
$("#txtToDate").datepicker('option', { minDate: min, maxDate: max });
}
});
});
$(function () {
var min = $("#txtFromDate").datepicker('getDate')
$("#txtToDate").datepicker({
changeMonth: true,
changeYear: true,
buttonImage: '../../Images/DatePicker.jpg',
dateFormat: 'dd-mm-yy',
buttonText: 'Select date:',
firstDay: 1,
buttonImageOnly: true,
showOn: 'both',
showAnim: 'fadeIn',
onSelect: function () { $(this).trigger("onchange", null); }
});
});