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>
Related
I am trying to validate the date fields so when you if you select a date in the future and in the second input box you select today's date it should not let you submit the form.
I have it working so you cant select yesterday's date - its the date comparison that i cant seem to get working.
/js/jquery-ui-1.8.6.custom.min.js"/>
/js/jquery.validate.js" />
/js/jquery.ui.datepicker.validation.js" />
<asp:TextBox ID="txtStartDate" runat="server" CssClass="DatepickerInput validBeforeDatepicker" />
<asp:TextBox ID="txtEndDate" runat="server" CssClass="DatepickerInput validAfterDatepicker" />
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
$('.validBeforeDatepicker,.validAfterDatepicker').datepicker();
$(function () {
$(".DatepickerInput").datepicker({
showOn: "button",
buttonImage: "/assets/img/calendar.gif",
buttonImageOnly: true,
minDate: 0,
required: true,
message: "This is a required field",
dateFormat: 'dd-mm-yy'
});
});
$(function () {
$("#validAfterDatepicker").datepicker({
showOn: "button",
buttonImage: "/assets/img/calendar.gif",
buttonImageOnly: true,
minDate: +1,
required: true,
message: "This is a required field",
dateFormat: 'dd-mm-yy'
});
});
I'm following this example but I'm going wrong somewhere and cant seem to quite put my finger on what it could be.
Website: http://bit.ly/WdZf10
Please dont submit form as it will just be spam if testing the form on the website. You can see its not validating even before submitting the form
Found a fix for the problem and probably less code used for it as well. Thought I'd share so if anyone gets stuck they can use this.
<script type="text/javascript">
$(function () {
function getDiff() {
var from = $(".start").val();
var till = $(".fin").val();
var c = from.split("/");
beg = new Date(c[2], c[1] - 1, c[0]);
var d = till.split("/");
en = new Date(d[2], d[1] - 1, d[0]);
var rest = (en - beg) / 86400000;
var txt = rest == 0 ? "" : rest + " days"
$("#res").text(txt);
}
$(".start").datepicker({
changeMonth: false,
changeYear: false,
showAnim: "fadeIn",
gotoCurrent: true,
minDate: 0, //change this to +3 to start 3 days from now
dateFormat: "dd/mm/yy",
onSelect: function (dateText, inst) {
$(".fin").val(dateText);
$(".fin").datepicker("option", "minDate", dateText);
getDiff();
}
});
$(".fin").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
showAnim: "fadeIn",
onSelect: getDiff
});
});
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 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>
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); }
});
});
I am loading a partial view in a popup using the following code
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Mypopup",
modal: true,
autoOpen: false,
height: 300,
width: 700,
open: function () {
//display correct dialog content
$("#Mydiv").load("MyAction");
}
};
$("#Mydiv").dialog(dialogOpts); //end dialog
$("#MyButton").click(
function () {
$("#Mydiv").dialog("open");
return false;
}
);
});
the action MyAction loads a partial view say "Myview" successfully, "Myview" contains a close button and on the click of this button I want to close the popup, How can I do this? I tried following code but this does not work.
$('#Close').click(
function () {
$(this).parent("close");
return false;
});
Can you please help?
Here is my html for the partial view.
#Code
Using (Html.BeginForm())
#<div id="master">
<img alt ="" src ="../../Images/Question.gif" height ="50" width ="50" />#Html.DisplayFor(Function(model) model.ConfirmationMessage) #Html.HiddenFor(Function(model) model.Key )<br /><br />
<div><input id="Yes" type="submit" class ="btn" name="button" value="Yes" /><input id="No" type="submit" class ="btn" name="button" value="No" /></div>
</div>
End Using
End Code
<script type="text/javascript">
$("#No").live("click", function(){ $("#MyDiv").dialog("close"); }); </script>
You could try:
$("#MyDiv").dialog("close")
or add the close buttons in the initialization of it
$( "#MyDiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I think i see it now. That button is loaded dynamically so
$("#MyButton").live("click", function(){ $("#MyDiv").dialog("close"); });
It will work we need to refer the following jQuery,jquery-ui.js and jquery-ui.css.
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
for more details http://www.infinetsoft.com/Post/How-to-open-and-close-a-popup-in-asp-net-mvc-using-Jquery/99#.V0LlETV97cs