dont allow user to select existing date

xnaLearner

So the user selects holidays (start and end dates) from two calendars, the dates from start to end are then stored in the DB in separate records per date. (thanks to help from a previous question this all works fine) Now, I want some sort of error message which doesnt allow the button to be clicked if the dates the user are selecting already exist in the DB. Im unsure if this is done from the view, or controller? View:

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

    Holiday

    

        @Html.LabelFor(model => model.PersonId, "Person")
    

    

 
        @Html.DropDownListFor(model => model.PersonId,
                            new SelectList(ViewBag.Id, "Value", "Text"),
                            "---Select---"
                            )   
     @Html.ValidationMessageFor(model => model.PersonId)            
    

    

        @Html.LabelFor(model => model.HolidayDate)
    

    

        @Html.TextBoxFor(model => model.HolidayDate)

        @Html.TextBoxFor(model => model.endDate)
<script>

// Date.format = 'dd/m/yyy';
$("#HolidayDate").addClass('date-pick');
$("#endDate").addClass('date-pick');
//$('.date-pick').datePicker//({dateFormat: 'dd-mm-yy'}).val();

// clickInput: true

    $(function () {
    //3 methods below dont allow user to select weekends
        $('.date-pick').datePicker(
           {
               createButton: false,
               renderCallback: function ($td, thisDate, month, year) 
               {
                   if (thisDate.isWeekend()) 
                   {
                       $td.addClass('weekend');
                       $td.addClass('disabled');
                   }
               }
           }
    )

    .bind('click',
        function () 
        {
            $(this).dpDisplay();
            this.blur();
            return false;
        }
    )

    .bind('dateSelected',
        function (e, selectedDate, $td) 
        {
            console.log('You selected ' + selectedDate);
        }
    );

// HolidayDate is start date
$('#HolidayDate').bind('dpClosed',

Pete OHanlon

I'd be tempted to use this logic:

    $(function () {
    //3 methods below dont allow user to select weekends
        $('.date-pick').datePicker(
           {
               createButton: false,
               renderCallback: function ($td, thisDate, month, year) 
               {
                   if (thisDate.isWeekend()) 
                   {
                       $td.addClass('weekend');
                       $td.addClass('disabled');
                   }
                   if (thisDate.isHoliday()) // You need to code the method that supports this.
                   {
                       $td.addClass('holiday');
                       $td.addClass('disabled');
                   }
               }
           }
    )

Where you do the check for thisDate.isWeekend, add in a check to see if the date has previously been selected as well. That way you give the user a good UI experience because you can show that a date has previously been selected. Now, you will also need to add a check in to the controller to prevent the user from adding a date that's previously been selected because you are working in a multi-user system here.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

xnaLearner

Ahh yes i see...the holiday method was a ice feature as well...I get what your saying Pete, but unfortunately I don't know how to hard code a check for the UI that will show what dates are already chosen, how can i pull the dates across? Also regarding putting a check in the controller could you give any advice on this? I know what I am meant to do but don't know the syntax datetime startDate if statedate = db.holidayDate MessageBox("error") disable 'select'btn

xnaLearner

Hi Pete, Im trying to give the UI experience of date if it has been previously accepted. In My JS file:

/**
* An Array of day names starting with Sunday.
*/
Date.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

/**
* An Array of abbreviated day names starting with Sun.
*/
Date.abbrDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

/**
* An Array of month names starting with Janurary.
*/
Date.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

/**
* An Array of abbreviated month names starting with Jan.
*/
Date.abbrMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

/**
* The first day of the week for this locale.
*/
Date.firstDayOfWeek = 1;

/**
* The format that string dates should be represented as (e.g. 'dd/mm/yyyy' for UK, 'mm/dd/yyyy' for US, 'yyyy-mm-dd' for Unicode etc).
*/
Date.format = 'dd/mm/yyyy';

/**
* The first two numbers in the century to be used when decoding a two digit year. Since a two digit year is ambiguous (and date.setYear
* only works with numbers < 99 and so doesn't allow you to set years after 2000) we need to use this to disambiguate the two digit year codes.
*/
Date.fullYearStart = '20';

(function () {
function add(name, method) {
if (!Date.prototype[name]) {
Date.prototype[name] = method;
}
};

/\*\*
\* Checks if the year is a leap year.
\*/
add("isLeapYear", function () {
    var y = this.getFullYear();
    return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
});

/\*\*
\* Checks if the day is a weekend day (Sat or Sun).
\*/
add("isWeekend", function () {
    return this.getDay() == 0 || this.getDay() == 6;
});

I'm tryihg to add a check into 'isWeekend' to include dates that already exist but don't know how. Can you Advise? Thanks

Pete OHanlon

Hmm - I would do this differently. In order to get the dates that had already been selected, I would call back to the server to retrieve those dates and use that to blank out those dates in the UI.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

xnaLearner

Im using the kelvin luck J query datePicker.... Is this any help? http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html[^] It already selects todays date, maybe I could edit this somway to include dates that exist in the DB...just not sure of the syntax, ay help? thanks

Pete OHanlon

Maybe, for simplicities sake, you should just stick to informing the user that the date they picked is invalid. You seem very new to this, and adding complexity like this could well be beyond you right now - unfortunately, I don't have the time to write a fully working sample for you to demonstrate how this all hangs together.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

xnaLearner

No problem pete, yeah i'm a beginner at this stuff. Will just have to keep at it. Thanks for the help though

Pete OHanlon

No problem. Sorry I couldn't be more help here.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier